Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

HTML5 Table Template

[ 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..

<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 page1 (using different data and with styles removed):

Key languages involved with Web Standards
Language Acronym Purpose
Cascading Style Sheets CSS Presentation
Hypertext Markup Language HTML Structure
JavaScript JS Behavior

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:

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

  • 1 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 = Creative thinker. Passionate about free and open Web.
The Tao of WordPress: Master the art of WordPress.

15 responses to “HTML5 Table Template”

  1. What can I use for layout? I want to make one column on the left and one big one on the right (or no column at all) with the main content of the page.

  2. This won’t pass validation. <colgroup span="2" title="title" /> is a non-void HTML element.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
The Tao of WordPress: Master the art of WordPress.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.