HTML5 Table Template

A good designer knows that tables should not be used for layout, but rather for displaying columns and rows of data. HTML enables the creation of well-structured, well-formatted tables, but they’re used infrequently enough to make remembering all of the different elements and attributes rather time-consuming and tedious. So to make things easier, here is a clean HTML5 template to speed-up development for your next project..

• Update, June 9th: Here is an absolute basic vanilla template for any markup language.
• Update, June 9th: Here is a better template for HTML5. For HTML 4.01 or anything XHTML-flavor, use the following template:

<table dir="ltr" width="500" border="1" 
			summary="purpose/structure for speech output">
	<caption>Here we assign header information to cells 
			by setting the scope attribute.
	</caption>
	<colgroup width="50%" />
	<colgroup id="colgroup" class="colgroup" align="center" 
			valign="middle" title="title" width="1*" 
			span="2" style="background:#ddd;" />
	<thead>
		<tr>
			<th scope="col">Name</th>
			<th scope="col">Side</th>
			<th scope="col">Role</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Darth Vader</td>
			<td>Dark</td>
			<td>Sith</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Obi Wan Kenobi</td>
			<td>Light</td>
			<td>Jedi</td>
		</tr>
		<tr>
			<td>Greedo</td>
			<td>South</td>
			<td>Scumbag</td>
		</tr>
	</tbody>
</table>

Ahh, gives me goose bumps just looking at it. You can use this code with any markup language, whether HTML5, HTML 4.1, or any flavor of XHTML. Here is how this basic template looks in the current web page¹ (using different data and with styles removed):

Notice that this 3-column/3-row table markup uses the scope attribute to set the column headers. You could also use the headers attribute like this:

<table>
	<tr>
		<th id="c1">Name</th>
		<th id="c2">Side</th>
		<th id="c3">Role</th>
	</tr>
	<tr>
		<td headers="c1">Greedo</td>
		<td headers="c2">South</td>
		<td headers="c3">Scumbag</td>
	</tr>
</table>

But that requires more code, so I generally just roll with the scope, as used in the template code above. As with any template, this table markup serves as a starting point for further modification and elaboration. The nice thing about tables is that they are easily chopped and mixed, once you have the basic structure and the myriad pieces at your disposal. Also, notice the inclusion of some key attributes within the various markup elements. Here is the <table> element, for example:

<table dir="ltr" width="500" border="1">

Text direction, width (in pixels), and a border. Pretty common stuff. Other attributes are included within the <colgroup> elements, and may be applied to many of the different table elements. For example, align and valign may be used for rows (<tr>) and cells (<td>). Also included are all three width value-formats: pixels, percentages, and relative via n*. It’s nice to have everything all in one place and ready to go. Good times :)

Clean, precise, well-structured data

Anybody can type out a few <tr>s and <td>s and call it good, but a well-structured table benefits from precisely defined data. Four elements improve structure significantly: <caption>, <thead>, <tfoot>, and <tbody>, which also provide additional hooks for CSS and JavaScript. Of course, use only concise markup to keep things as lean and clean as possible.

Let me know if anything can be improved with this table template. I would be happy to post additional examples if generally useful. Here are some more Perishable Press resources that may provide some additional help with your markup efforts:

• Bare-Bones HTML/XHTML Document Templates
• Rethinking Structural Design with New Elements in HTML 5
• (X)HTML Document Header Resource
• The Power of HTML 5 and CSS 3

Better Table Template for HTML5

Thanks to input from Rich Clark, here is a better template to use specifically for HTML5:

<table>
	<caption>Here we assign header information to cells 
			by setting the scope attribute.
	</caption>
	<colgroup />
	<colgroup span="2" title="title" />
	<thead>
		<tr>
			<th scope="col">Name</th>
			<th scope="col">Side</th>
			<th scope="col">Role</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Darth Vader</td>
			<td>Dark</td>
			<td>Sith</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Obi Wan Kenobi</td>
			<td>Light</td>
			<td>Jedi</td>
		</tr>
		<tr>
			<td>Greedo</td>
			<td>South</td>
			<td>Scumbag</td>
		</tr>
	</tbody>
</table>

Notice how much cleaner it is now with all of the attributes removed. Well, we still have title, span and scope, but still way cleaner. Most of the presentational stuff is now handled by CSS.

Absolute Basic Table Template

Because, sometimes it’s all you need. Thanks to Helen for the idea.

<table>
	<tr>
		<td>Name</td>
		<td>Side</td>
		<td>Role</td>
	</tr>
	<tr>
		<td>Obi Wan Kenobi</td>
		<td>Light</td>
		<td>Jedi</td>
	</tr>
	<tr>
		<td>Greedo</td>
		<td>South</td>
		<td>Scumbag</td>
	</tr>
</table>

Thanks to the amazing powers of CSS3, even the most basic table can be transformed into brilliant works of art, displaying data as clearly and succinctly as possible. Nice :)

Footnotes

• ¹ The current page may be formatted in something other than HTML5, depending on which theme is used to view the content.

About the Author

Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.