Web Development: Table Headers and Footers

During our last instalment of this series, we began talking about organizational tables. This time around, we’ll be discussing some of the more advanced portions on tables in HTML.

If you’re using a table to organize data, you’ll likely have column headers that identify the type of data contained within that column. Using what we’ve previously covered, you could simply use a tr at the beginning of the table and use CSS to stylize them. However, there is a better way.

HTML contains a method to specify a table header, footer and body. We can use this method by wrapping the appropriate rows in thead, tfoot and tbody tags, respectively. In the thead section, cells must use th instead of td. The order of these “groups” is also vital. The thead and tfoot groups must be before the tbody group (the footer will be still appear below the body).

This method has a number of advantages over simply ordering your rows to create a header and footer. For starters, these three tags provide semantic meaning to your table. Having the footer above the body, in the code, allows the browser to render the footer before the (potentially long) body has loaded. Additionally, when you’re generating your body via a programming language (such as PHP), having the (likely) static header and footer before your dynamic body code will be neater.

Example:

<table>
	<thead>
		<tr>
			<th>ID</th>
			<th>Surname</th>
			<th>First Name</th>
			<th>Email</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>ID</td>
			<td>Surname</td>
			<td>First Name</td>
			<td>Email</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>192<td>
			<td>Smith</td>
			<td>John</td>
			<td>john.smith@example.com</td>
		</tr>
		<tr>
			<td>193</td>
			<td>Doe</td>
			<td>Jane</td>
			<td>jdoe282@example.com</td>
		</tr>
	</tbody>
</table>

Last 5 posts by Matt Freedman

• Everything PHP: Selecting Table Specific Fields on Joins - November 23rd, 2009
• Moving Beyond SSH: CentOS 5.4 - October 26th, 2009
• WordPress Development: Development Copy - October 26th, 2009
• Everything PHP: Table JOIN - September 21st, 2009
• Web Development: Tables - September 17th, 2009

Posted in Development | 48 views | | Digg This | del.icio.us | Technorati

Related Topics:
Web Development: Tables
WordPress Development: WPDB Insert and Update
Everything PHP: Headers
WordPress Development: Database Calls
WordPress Development: Options Pages

RSS feed

2 Comments »

Comment by used tires

2009-11-08 12:51:41

That’s interesting, I’ve been coding tables and and HTML for a while, but I’ve never used the thread code nor the tfoot code, I guess mainly because I’ve never known about them =D I suppose it applies to many people.

Till then,

Jean

Reply to this comment

 

Comment by Biannka

2009-11-15 14:09:47

I first used thead at work during a redesign task for a client. tfoot is something I never used as well as many other table related tags that goes unnoticed.

Reply to this comment