HTML5 Table Template

Updated August 4, 2024 • 15 comments

[ 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):

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

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

15 responses to “HTML5 Table Template”

Helen 2010/06/08 4:54 pm

Hell! I really didn’t know there is a HTML5-table though I run a website with many tables in HTML5! I just kept the tables as they were when I switched from XHTML1 to HTML5 four month ago, i.e. there are no embedding thead, tbody and tfoot.

I don’t see any use for tfoot except a bottom title spanning the total width of the table in case its content is not data which would be semantica. But it is good that every area has three parts, header, (main), footer, in HTML5 without exceptions.

I don’t use any of the old style attributes in my tables except the span-attribut which is not appearance but syntax. Everything else can be done with CSS, even pseudo-elements for complex table layouts. If you have a lot of tables on your website, inline-styles would be hard to maintain or to redesign.

Colgroups as vertical elements might be a wonderful possibility to control the widths inside the table. Unfortunately, I hadn’t pay attention to this yet. Often, the CSS-property “table-layout” with its values “auto” or “fixed” is far to vague.

I just want to point out that all the new elements surrounding old xhtml-elements are more than useful in a semantic way (often they are just redundant) can bring advantages for CSS, because they are elements, and elements can by styled. But they can be annoying too, if you really use cascading styles and operations like section + section + section { … }. It blows upthe CSS if you want to take care of every cascade in the CSS.

Good article

Hugo Laporte 2010/06/09 7:02 am

Do you know if the text direction (dir="ltr") is really necessary ? Is it specific to HTML5?

What’s the utility in an tag ?

THX !

Rich Clark 2010/06/09 7:12 am

Hey

You need to loose some of the attributes there for it to be valid HTML5, I suggest you check out this list of absent attributes. http://www.w3.org/TR/html5-diff/#absent-attributes

Also why do you need a class=”colgroup” when you can style the element? Lastly, I don’t think a template should be provided with inline CSS, after all it isn’t exactly best practice.

Cheers

Rich

Jeff Starr 2010/06/09 9:32 am • Post Author

@Helen: That’s okay — apparently I didn’t know what one looked like when I wrote the post, which has now been updated with a cleaner, more HTML5-specific template. We ripped out most of the attributes, but the tstuff is still there. I think I’ll add another template that is just an absolute basic, no-nonsense table. Thanks for the comment!

@Hugo: No it is not necessary. Just remove it if not needed.

@Rich: Updated the article with your suggestions. Also removed the border, width, id and just about everything else. Thanks for that list of absent values – I somehow missed it while scraping things together. Much appreciated.

H5N1 2010/06/13 1:42 am

Hi Jeff!
Long time no see ;)
When I switched to HTML5 I was very enthusiast and I’m still.
As many of us has just noticed (and is very evident in this example of yours) HTML5 is very degradable: you can obtain an understandable (for browsers) markup very easily using HTML or XML syntax.
More, I think HTML5 is very simplified for some aspects – just thnk about the DOCTYPE – and if one has just switched from HTML 4.01 to XHTML can easily learn HTML5.
Well, not so easily… :)
I love to separate presentation from content even it makes code reusable and more flexible to changes (think about CSS Zen Garden, e. g.).
Thanks for sharing this knowledge.
I’ve always said that “knowledge is nothing without sharing” :)

Jeff Starr 2010/06/14 12:41 pm • Post Author

H5N1, always a pleasure! ;)

Completely agree about your points, especially the practice of separating presentation from content (structure). I like to segregate things in terms of content, structure (markup), presentation (CSS), and behavior (JavaScript).

Tables have always been challenging to design for. I think there was such an incredible backlash against using them, that designers (such as myself) have become a bit ignorant of how they work and best-practice for design.

A few years ago, you needed the extra attributes and classes to get tables to look decent across browsers. Now we can get most of it done with CSS3 and its amazing powers of selection.

Great hearing from you, H5N1 – have an awesome Summer! :)

albert 2010/06/14 8:57 pm

no summary attribute on the table element?
just wondering what your thought(s) are on that guy.
nice write up, always great reads @ perishable press. u rule.

Marko Randjelovic 2010/06/15 8:19 am

Hi Jeff,

Great article and it came in very handy for me as I’m coding a web app right now and needed to display some prices… So, thanks very much! :)

Jeff Starr 2010/06/15 11:25 am • Post Author

albert, here is what i found on the summary attribute in the W3 Table spec:

This attribute provides a summary of the table’s purpose and structure for user agents rendering to non-visual media such as speech and Braille.

http://www.w3.org/TR/html401/struct/tables.html#adef-summary

I think it’s useful, so I updated the first template in the post to include summary. Thanks for the tip :)

Jeff Starr 2010/06/15 11:28 am • Post Author

@Marko: Thank you for the feedback – glad it is useful :)

Marko Randjelovic 2010/06/16 4:05 am

You’re welcome, Jeff. Your entire site is packed with information that has been valuable to me at certain points (the .htaccess stuff, for example) so thanks for all the great content, keep it coming. ;)

yuvacka 2010/06/25 4:51 am

Thank Jeff, good job. I jus came through your article, it really very useful for me. You mentioned here only for table concept, can u give some samples for tableless template. Thanks Again:)

Comments are closed for this post. Something to add? Let me know.

Helen 2010/06/08 4:54 pm

Hell! I really didn’t know there is a HTML5-table though I run a website with many tables in HTML5! I just kept the tables as they were when I switched from XHTML1 to HTML5 four month ago, i.e. there are no embedding thead, tbody and tfoot.

I don’t see any use for tfoot except a bottom title spanning the total width of the table in case its content is not data which would be semantica. But it is good that every area has three parts, header, (main), footer, in HTML5 without exceptions.

I don’t use any of the old style attributes in my tables except the span-attribut which is not appearance but syntax. Everything else can be done with CSS, even pseudo-elements for complex table layouts. If you have a lot of tables on your website, inline-styles would be hard to maintain or to redesign.

Colgroups as vertical elements might be a wonderful possibility to control the widths inside the table. Unfortunately, I hadn’t pay attention to this yet. Often, the CSS-property “table-layout” with its values “auto” or “fixed” is far to vague.

I just want to point out that all the new elements surrounding old xhtml-elements are more than useful in a semantic way (often they are just redundant) can bring advantages for CSS, because they are elements, and elements can by styled. But they can be annoying too, if you really use cascading styles and operations like section + section + section { … }. It blows upthe CSS if you want to take care of every cascade in the CSS.

Good article
Hugo Laporte 2010/06/09 7:02 am

Do you know if the text direction (dir="ltr") is really necessary ? Is it specific to HTML5?

What’s the utility in an tag ?

THX !
Rich Clark 2010/06/09 7:12 am

Hey

You need to loose some of the attributes there for it to be valid HTML5, I suggest you check out this list of absent attributes. http://www.w3.org/TR/html5-diff/#absent-attributes

Also why do you need a class=”colgroup” when you can style the element? Lastly, I don’t think a template should be provided with inline CSS, after all it isn’t exactly best practice.

Cheers

Rich
Jeff Starr 2010/06/09 9:32 am • Post Author

@Helen: That’s okay — apparently I didn’t know what one looked like when I wrote the post, which has now been updated with a cleaner, more HTML5-specific template. We ripped out most of the attributes, but the tstuff is still there. I think I’ll add another template that is just an absolute basic, no-nonsense table. Thanks for the comment!

@Hugo: No it is not necessary. Just remove it if not needed.

@Rich: Updated the article with your suggestions. Also removed the border, width, id and just about everything else. Thanks for that list of absent values – I somehow missed it while scraping things together. Much appreciated.
H5N1 2010/06/13 1:42 am

Hi Jeff!
Long time no see ;)
When I switched to HTML5 I was very enthusiast and I’m still.
As many of us has just noticed (and is very evident in this example of yours) HTML5 is very degradable: you can obtain an understandable (for browsers) markup very easily using HTML or XML syntax.
More, I think HTML5 is very simplified for some aspects – just thnk about the DOCTYPE – and if one has just switched from HTML 4.01 to XHTML can easily learn HTML5.
Well, not so easily… :)
I love to separate presentation from content even it makes code reusable and more flexible to changes (think about CSS Zen Garden, e. g.).
Thanks for sharing this knowledge.
I’ve always said that “knowledge is nothing without sharing” :)
Jeff Starr 2010/06/14 12:41 pm • Post Author

H5N1, always a pleasure! ;)

Completely agree about your points, especially the practice of separating presentation from content (structure). I like to segregate things in terms of content, structure (markup), presentation (CSS), and behavior (JavaScript).

Tables have always been challenging to design for. I think there was such an incredible backlash against using them, that designers (such as myself) have become a bit ignorant of how they work and best-practice for design.

A few years ago, you needed the extra attributes and classes to get tables to look decent across browsers. Now we can get most of it done with CSS3 and its amazing powers of selection.

Great hearing from you, H5N1 – have an awesome Summer! :)
albert 2010/06/14 8:57 pm

no summary attribute on the table element?
just wondering what your thought(s) are on that guy.
nice write up, always great reads @ perishable press. u rule.
Marko Randjelovic 2010/06/15 8:19 am

Hi Jeff,

Great article and it came in very handy for me as I’m coding a web app right now and needed to display some prices… So, thanks very much! :)
Jeff Starr 2010/06/15 11:25 am • Post Author

albert, here is what i found on the summary attribute in the W3 Table spec:

This attribute provides a summary of the table’s purpose and structure for user agents rendering to non-visual media such as speech and Braille.

http://www.w3.org/TR/html401/struct/tables.html#adef-summary

I think it’s useful, so I updated the first template in the post to include summary. Thanks for the tip :)
Jeff Starr 2010/06/15 11:28 am • Post Author

@Marko: Thank you for the feedback – glad it is useful :)
Marko Randjelovic 2010/06/16 4:05 am

You’re welcome, Jeff. Your entire site is packed with information that has been valuable to me at certain points (the .htaccess stuff, for example) so thanks for all the great content, keep it coming. ;)
yuvacka 2010/06/25 4:51 am

Thank Jeff, good job. I jus came through your article, it really very useful for me. You mentioned here only for table concept, can u give some samples for tableless template. Thanks Again:)

12 • Newer Comments »