9 Creating Tables with HTML: A Step-By-Step Guide
Overview
Tables require the following key elements to work correctly and accessibly:
- Text introducing the table and providing context to its data
- A set of
<table>and</table>tags - A caption
- A header row or column, with scope specified (discussed below)
- A number of data cells, none of which can be empty (discussed below)
Let’s explore how these parts fit together by recreating the following table.
| First Column Header | Second Column Header |
|---|---|
| First cell of data | Second cell of data |
| Second row, first cell | Second row, second cell |
Step 1: Announcing A Table
Introductory text provides context for your table and announces it for screen reader users. For more information, see Table Basics.
Step 2: <table> Tags
The <table> tag starts a new table. The </table> tag ends the table. All contents of the table should go between these tags.
<table>
(Table contents should go here)
</table>
Step 3: Caption
All tables require a caption to be accessible. Caption tags go immediately after the opening <table> tag.
Like a table, a caption must be started with the <caption> tag and ended with a </caption> tag.
Captions aren’t titles, so you should only capitalize the first letter of the caption (not every word). The caption should be a brief description (no more than a few words) of the contents of the table.
<table>
<caption>Caption goes here</caption>
(Rest of table contents should go here)
</table>
Step 4: The Header Row
Typically, your first row should be a header row. Each header cell acts as a title for a column of data. This provides context for learners, especially if they’re using screen readers.
Headers should be treated as titles, which means almost every word should be capitalized.
To make a header row:
- Begin and end the row with
<tr>and</tr> tags. - Inside the row tags, write the following to create a header cell:
<th scope="col"></th>. Repeat this code once for every header you need (one for each column in your table). - Create a label for each header by putting your text between the
<th>and</th>tags.
This code would be applied as follows:
<table>
<caption>Caption goes here</caption>
<tr>
<th scope="col">First Column Header</th>
<th scope="col">Second Column Header</th>
</tr>
(Rest of table contents should go here)
</table>
Step 6: Rows of Data
The <tr> and </tr> tags indicate a row. Inside these rows, you'll need tags for each cell of data. Data cells are indicated with the <td> and </td> tags. Every row should have the same number of data cells, which should be the same as the number of headers.
The following code produces one row of two data cells.
<tr>
<td>Data goes here</td>
<td>More data goes here</td>
</tr>
Never leave out a data cell, even if it's empty. A table with an irregular number of cells would be considered improperly formed and may not function correctly when displayed to learners.
The following shows the table with one row of data cells. To add more rows, simply copy and paste everything between the <tr> and </tr> tags.
<table>
<caption>Caption goes here</caption>
<tr>
<th scope="col">First Column Header</th>
<th scope="col">Second Column Header</th>
</tr>
<tr>
<td>First cell of data</td>
<td>Second cell of data</td>
</tr>
</table>
Putting It All Together
The full table would use the following code.
<table>
<caption>Captions are always required</caption>
<tr>
<th scope="col">First Column Header</th>
<th scope="col">Second Column Header</th>
</tr>
<tr>
<td>First cell of data</td>
<td>Second cell of data</td>
</tr>
<tr>
<td>Second row, first cell</td>
<td>Second row, second cell</td>
</tr>
</table>
And here is the original table again:
| First Column Header | Second Column Header |
|---|---|
| First cell of data | Second cell of data |
| Second row, first cell | Second row, second cell |