Tables

Tables are heavily used in HTML documents. If you want to present data in a grid of columns and rows, like in a spreadsheet, you may want to create a table. A cell in a table can not only contain numbers or words, it can even contain an image or ... another table.

By default, the browser will make a judgment call as to how wide each column will have to be, depending on the width of the cell contents and how much room there is for the table overall.

Table elements

The following HTML elements are used to create tables:

<table>

This is the main tag to create a table. Every table begins with a <table> tag and ends with a </table> tag.

<thead> <tbody>

These (optional) elements allow you to separate (and subsequently style) the header part and body part of a table. Like in spreadsheets, the header is used for the descriptions of what goes in the table rows, and the body for the actual content. You can use more than one <tbody> section to better organize (and style) your table.

<tr>

No rows? No table. The <tr> or table row is the element you are going to use for all the rows in your table, both the header and body section.

<th> <td>

These are the elements for your table cells. The <th> tags are used for your labels in the table header and the <td> (table data) for your content cells in the table body.

Table attributes

Some of the table elements have attributes that are unique to tables. We will discuss them here.

colspan (td)

A table that consists of x rows and y columns will of course contain x times y cells. With the colspan attribute, you can specify that, for a given cell, you want to span it across a number of columns. The following line will span this table cell across three columns:

<td colspan="3">Verylongname</td>

rowspan (td)

This is the equivalent of colspan but for rows. With this attribute, you can specify that you want a table cell to be higher than just a single row.

Let's take a look at a table example:

<table>
<thead>
<tr><th>First</th><th>Last</th><th>Organization</th><th>Phone</th></tr>
</thead><tbody>
<tr><td>John</td><td>Muir</td><td>Yosemite</td><td></td></tr>
<tr><td colspan="2">Michael Tilson Thomas</td><td>San Francisco Symphony</td><td>4158885555</td></tr>
<tr><td>Diane </td><td>Nicolini</td><td rowspan="2">KDFC</td><td rowspan="2">415888KDFC</td></tr>
<tr><td>Bill</td><td>Lueth</td></tr>
</tbody>
</table>