The basic structure of an HTML table consists of a table tag, rows, and an equal number of table cells in each row. That’s where most developers leave things, but it’s not enough: a table on a web page should have several elements added in order to make it both accessible and far easier to style with CSS.

A correctly structured table should usually have at least one set of table header cells, indicating the meaning or interpretation of the data in the cells of the columns underneath. Much like a web page, a table should be divided into table head (<thead>) and table body (<tbody>) sections, with an optional <tfoot> section that (rather paradoxically) must immediately follow the <thead> if it’s included. (Despite the order of the code, a modern browser will display the <tfoot> section last in the table. Think of the <tfoot> section as an opportunity to display summed or summary data for each row.)

An example of a correctly sectioned table is shown below, with closing tags (optional in HTML5) removed to save space:

<table>
	<caption>Top Selling Processors</caption>
	<thead>
		<tr>
			<th>Processor
			<th>Speed
			<th>Cores
			<th>L3 Cache Size
	<tbody>
		<tr>
			<td>Intel Core i7-2600K
			<td>3.4 GHz
			<td>4
			<td>8 MB
		<tr>
			<td>AMD Phenom II X6 1100T
			<td>3.3 GHz
			<td>6
			<td>6 MB
</table>

A correct table works very well in screen readers for the blind: with the tags and attributes I’ve shown added to the code, accessible software will never mistake your table for a layout element, and will allow a blind user to navigate your data with ease.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.