Writing semantic tables, thead, tbody and tfoot

Tables are great! Honestly! Try to display tabular data in divs, and you’ll see. So tables are good when you need to display, em, tables.

But if we certainly all know the <table><tr><td></td></tr></table> there are a few more tags you should use when working with tables

<th>

This tag encapsule an element with more weight like a header cell. It is used like a td:

<table>
	<tr>
		<th>header</th>
	</tr>
</table>

<thead>, <tbody>, <tfoot>

The thead defines the head of the table, where the headers should go. tfoot is the same for the footer of the table and the tbody is the content or data.

So with all this a basic semantic valid table would look like this:

<table>
	<thead>
		<tr>
			<th>header1</th>
			<th>header2</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>footer1</th>
			<th>footer2</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>data1</th>
			<th>data2</th>
		</tr>
	</tbody>
</table>

Notice that the tfoot goes before the tbody? That’s to get your table to validate the xhtml Strict Dtd. The browser will render it where it is meant to be of course (at least good browser do).

Related Items and Services:
Antique Dining Tables at great prices from Drisolls Antiques.
Boardroom Table available here
Pool Dining Tables available here
If your looking for Pool Tables come to us.
Massage table here

• 
• 
• 
• 
• 
•