Table Structure - HTML Tutorial
Even a simple table involves multiple nested elements. A table’s basic structure is:
- The
<table>element defines the table itself. - Inside the
<table>are one or more<tr>elements that define table rows. - Within each
<tr>are one or more<th>or<td>elements. These define header cells and data cells, respectively.
Here’s a simple example of a table with one row and two columns. To make the structure visible, we’ve added some CSS to provide a border around each cell.
<html>
<head>
<title>1x2 Table</title>
<style>
td { border: 1px solid #000; }
</style>
</head>
<body>
<table>
<tr>
<td>California</td>
<td>Michigan</td>
</tr>
</table>
</body>
</html>Adding Rows and Columns
A <tr> element represents a row. To add another row, simply add another <tr> with the same number of <td> cells as the other rows:
<table>
<tr>
<td>California</td>
<td>Michigan</td>
</tr>
<tr>
<td>Nevada</td>
<td>Ohio</td>
</tr>
</table>To add another column, include an additional <td> in each row:
<table>
<tr>
<td>California</td>
<td>Michigan</td>
<td>Mississippi</td>
</tr>
<tr>
<td>Nevada</td>
<td>Ohio</td>
<td>Alabama</td>
</tr>
</table>Adding Headers
Rows can also include <th> (header) elements. Table headers label rows or columns and are rendered bold by default:
<table>
<tr>
<th>West</th>
<th>Midwest</th>
<th>South</th>
</tr>
<tr>
<td>California</td>
<td>Michigan</td>
<td>Mississippi</td>
</tr>
<tr>
<td>Nevada</td>
<td>Ohio</td>
<td>Alabama</td>
</tr>
</table>Adding Captions and Summaries
You can provide extra information for your table with a caption or a summary. The caption element, placed immediately after <table>, gives the table a title. By default, captions appear above the table, and you can style them with CSS.
The summary attribute provides a brief description of the table’s purpose for screen readers and text-only browsers. While most modern browsers don’t display it visually, it’s an important accessibility feature.
Table Rows, Cells, and Headers
After any optional <caption>, start building the table with <tr> rows. Each row contains cells that are either table headers (<th>) or table data (<td>). Header cells provide context (titles for rows or columns), and data cells hold the actual content.
If a cell is empty (<td></td>), it may collapse visually. Use a <br> or placeholder content to maintain table layout.
Here’s a more complete example: a 4×4 table with headers, captions, and a summary:
<table style="border-collapse: collapse;" border="2" summary="All 12 months, organized by season">
<caption>The Four Seasons</caption>
<tr>
<th>Spring</th>
<th>Summer</th>
<th>Fall</th>
<th>Winter</th>
</tr>
<tr>
<td>March</td>
<td>June</td>
<td>September</td>
<td>December</td>
</tr>
<tr>
<td>April</td>
<td>July</td>
<td>October</td>
<td>January</td>
</tr>
<tr>
<td>May</td>
<td>August</td>
<td>November</td>
<td>February</td>
</tr>
</table>Key points to notice:
- Check how each month aligns in the correct row and column. The first row contains headers, and the following rows contain data.
- By default,
<th>text is bold while<td>text is normal. You can style these with CSS. - The
summaryattribute improves accessibility even though it isn’t visible in most browsers.