Tables

HTML Tables Summary

HTML tables organize related data into rows and columns so information can be compared like a simple spreadsheet.

Use a table for tabular data, not for general page layout. If you only need to place boxes beside each other, CSS layout tools are a better fit.

<table>
	<thead>
		<tr>
			<th>Color</th>
			<th>Shape</th>
			<th>Texture</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Blue</td>
			<td>Square</td>
			<td>Smooth</td>
		</tr>
		<tr>
			<td>Green</td>
			<td>Triangle</td>
			<td>Rough</td>
		</tr>
	</tbody>
</table>

Rows And Cells

A table row uses <tr>. Each regular data cell inside a row uses <td>.

<tr>
	<td>Blue</td>
	<td>Square</td>
</tr>

Rows run across the table. Cells sit inside each row.

Header Cells Explain Columns

A header cell uses <th>. Header cells name the kind of information in a column or row.

<tr>
	<th>Name</th>
	<th>Score</th>
</tr>

Using header cells makes the table easier to understand and improves accessibility.

The Table Head And Body

The <thead> element groups the heading rows. The <tbody> element groups the main data rows.

<table>
	<thead>
		Heading rows go here.
	</thead>
	<tbody>
		Data rows go here.
	</tbody>
</table>

Small tables can work without these grouping elements, but they make larger tables easier to read and style.

Tables Need Room

Tables can become wider than a small screen. Test tables at narrow widths and make sure they remain usable on phones.

The Responsive Design lesson explains why pages need to work at different screen sizes.