Tables

Basic tables

Tables are made up of rows and columns. Here's a table listing some university classes:

It's hard to see the rows and columns, so let's add some lines.

You can see that the table has two rows and three columns. That's what makes a table a table: rows and columns.

Here's the code for the table.

The whole thing is surrounded by a table tag. Next is thead, giving table column headers. This table doesn't have any. After that is tbody, with the body of the table. Each row in the body is inside a tr tag. Inside each tr, there is a td for each table cell. The "d" in td stands for "data." There's one td for each column, in each row.

Header and footer

Here's the table of university classes again:

It might help to add a header, so users know what the columns are. A footer can come in handy, too. How about this:

Here's the code. The table is divided into three parts: the header, the body, and the footer.

The header uses the tag th instead of td.

By default, browsers render th as centered and bold. You can change that with CSS.

Here's the footer:

The colspan tells the footer's td to take up three columns, so it stretches across the entire row as needed:

Without the colspan...

... the table would look like this:

The browser makes the first column too wide, so it can fit the text "Times subject to change."

Putting the colspan in the footer...

... makes the table look more natural:

Exercise

Summary.

• The table tag makes a table with rows and columns.
• A table can have a head (thead), a body (tbody), and a footer (tfoot).
• tr makes a table row.
• Inside trs, td makes a table column.
• colspan makes a td span multiple columns.

Up next

The tables you've seen so far are ugly. Let's make them look better.