Complex data may sometimes need to be presented in a table. Where you have a complex diagram, graph, or visualization you should provide the same data in a table, using the <table> element.

The code

A simple table with column headers should mark up those column headers using the <th> element. Simple row cells should use <td>. In addition, you should provide a table caption, using <caption>:

<table>
<caption>Descriptive label for the table</caption>
<tr> <!-- header row -->
<th>Column header 1</th>
<th>Column header 2</th>
<th>Column header 3</th>
</tr>
<tr> <!-- first data row -->
<td>Cell for column 1 / row 1</td>
<td>Cell for column 2 / row 1</td>
<td>Cell for column 3 / row 1</td>
<tr>
<tr> <!-- second data row -->
<td>Cell for column 1 / row 2</td>
<td>Cell for column 2 / row 2</td>
<td>Cell for column 3 / row 2</td>
<tr>
<tr> <!-- third data row -->
<td>Cell for column 1 / row 3</td>
<td>Cell for column 2 / row 3</td>
<td>Cell for column 3 / row 3</td>
<tr>
</table>

How it looks


Descriptive label for the table

Column header 1 Column header 2 Column header 3
Cell for column 1 / row 1 Cell for column 2 / row 1 Cell for column 3 / row 1
Cell for column 1 / row 2 Cell for column 2 / row 2 Cell for column 3 / row 2
Cell for column 1 / row 3 Cell for column 2 / row 3 Cell for column 3 / row 3

Column and row headers

Some tables use column headers and row headers. The scope attribute is used to differentiate the two.

<table>
<caption>Descriptive label for the table</caption>
<tr> <!-- header row -->
<th>&nbsp;</th> <!-- empty for row headers -->
<th scope="col">Column header 1</th>
<th scope="col">Column header 2</th>
<th scope="col">Column header 3</th>
</tr>
<tr> <!-- first data row -->
<th scope="row">Row header 1</th>
<td>Cell for col 1 / row 1</td>
<td>Cell for col 2 / row 1</td>
<td>Cell for col 3 / row 1</td>
<tr>
<tr> <!-- second data row -->
<th scope="row">Row header 2</th>
<td>Cell for col 1 / row 2</td>
<td>Cell for col 2 / row 2</td>
<td>Cell for col 3 / row 2</td>
<tr>
<tr> <!-- third data row -->
<th scope="row">Row header 3</th>
<td>Cell for col 1 / row 3</td>
<td>Cell for col 2 / row 3</td>
<td>Cell for col 3 / row 3</td>
<tr>
</table>

How it looks


Descriptive label for the table

  Column
header 1
Column
header 2
Column
header 3
Row header 1 Cell for col 1
/ row 1
Cell for col 2
/ row 1
Cell for col 3
/ row 1
Row header 2 Cell for col 1
/ row 2
Cell for col 2
/ row 2
Cell for col 3
/ row 2
Row header 3 Cell for col 1
/ row 3
Cell for col 2
/ row 3
Cell for col 3
/ row 3