Rows, cells, captions

You have already learned about creating HTML tables — you've seen how to insert column headings at the top and add data like text and links to cells. In this topic, you'll discover how to add a table caption and use attributes to specify the number of rows and columns cells span. You will also find out the purpose of the headers attribute.

Table cells and rows

As you're already aware, the <tr> tag defines a row of cells in an HTML table. And the cells themselves can be created by using the <th> or <td> tag. The <th> tag is utilized to define header cells, and <td> is used to specify data cells. Together, these cells contain all the content present in an HTML table. The distinction between the two makes it easy to render them differently, so their purposes are clear.

Attributes

You can apply several attributes to cell tags:

• rowspan is used with the <td> tag. It's a non-negative number that enables you to specify how many rows a cell should span. For example, rowspan="3" will merge the cell over three rows.

• colspan is similar to rowspan and can be applied to the <td> or <th> tag. It allows you to specify the number of columns a cell should span. So, colspan="2" will merge the cell across two columns.

• headers is used to specify that table cells are related to one or more header cells. A cell's headers attribute contains a list of the id attributes of the associated header cells. And if there's more than one id, they're separated by spaces. These ids aren't visible in an ordinary web browser. But if a table's headings are complex, they can be helpful for people using screen readers. You can read more about this technique.

The following example demonstrates the effects of using the rowspan and colspan attributes:

HTML:

<table>
      <thead>
        <tr>
          <th>Heading 1</th>
          <th>Heading 2</th>
          <th>Heading 3</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Column 1, Row 2</td>
          <td>Column 2, Row 2</td>
          <td rowspan="3">Column 3, Row 2, 3 & 4 spanned</td>
        </tr>

        <tr>
          <td>Column 1, Row 3</td>
          <td>Column 2, Row 3</td>
          <!-- <td>Column 3, Row 3</td> -->
        </tr>

        <tr>
          <td colspan="2">Column 1 & 2 spanned, Row 4</td>
          <!-- <td>Column2, Row 4</td> -->
          <!-- <td>Column 3, Row 4</td> -->
        </tr>
      </tbody>
</table>

CSS:

table,
td,
th {
   border: 1px solid black;
}

Output:

Caption tag

As its name suggests, the <caption> tag is used to specify a table's caption — it must be inserted directly after the <table> tag. The caption appears above the table and is center-aligned by default. But you can apply CSS properties to alter the alignment of the caption if you wish.

Take a look at the following example:

<table>
      <caption>
        This is the caption
      </caption>
      <thead>
        <tr>
          <th>This is</th>
          <th>a heading</th>
          <th>row</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1st</td>
          <td>First row</td>
          <td>of the table</td>
        </tr>

        <tr>
          <td>2nd</td>
          <td>Second row</td>
          <td>of the table</td>
        </tr>
      </tbody>
</table>

Output:

As you can see, the caption sits at the top of a table containing cells created with <td> and <th> tags. Don't forget that header cells must be placed above the body of the table inside a <thead> tag.

Conclusion

You now know more about creating HTML tables. You've learned how to add a caption at the top of a table. And that you can apply attributes to specify the number of rows and columns a cell should span. Don't forget you can use the headers attribute to relate table cells to one or more header cells — an approach that can help screen readers interpret complex tables.