Thead, tbody, tfoot?

What is the purpose of THEAD, TBODY, and TFOOT and do I really need them?

I am building an “Inbox” for Private Messages, and have decided that the tabular nature of the data warrants the use of an HTML Table. However, I am admittedly rusty on Tables, mainly because ever since starting to learn CSS I have basically heard that “Tables are evil!”

Here is what I have so far…


	<table border="1"  cellspacing="1">
		<thead>
		</thead>
		<tbody>
			<tr>
				<th width="50">Check</th>
				<th width="50">Flag</th>
				<th width="150">From</th>
				<th width="400">Subject</th>
				<th width="150">Date</th>
			</tr>
			<tr>
				<td>__</td>
				<td>__</td>
				<td>JohnDoe</td>
				<td>Re: Surprise Party this Saturday...</td>
				<td>2012-05-17 3:15pm</td>
			</tr>
			<tr>
				<td>__</td>
				<td>__</td>
				<td>JaneDoe</td>
				<td>Re: Surprise Party this Saturday...</td>
				<td>2012-05-17 4:07pm</td>
			</tr>
		</tbody>
	</table>

Feel free to share how I can improve the above “Inbox”…

Thanks,

Debbie

There are some bloated deprecated attributes like ‘width’ (presentational) in that TABLE that are basically redundant. That THEAD is ‘empty’ in that example, which obviously is illegal, which I suspected you, meant to have those TH contained as the sub-element (of the THEAD).

The THEAD element defines a group of header rows in a table. The TFOOT is optional and defines a group of footer rows in a table. The TFOOT must follow the optional THEAD and precede the required TBODY. The TFOOT must appear before TBODY within a TABLE. Personally for that table I’d probably just stick with TH, I doubt you’d need a footer, well you don’t have one at the moment as it so happens.

Those table elements are basically entered by the browser if you don’t do it yourself, but it’s better to put them in yourself to make the table complete.

Just about any table will have a heading row so you need a <thead> to contain it - that way when the table prints over multiple pages the headings should display at the top of each page (assuming the browser actually works properly).

The actual content of the table goes in a <tbody> tag. In some situations you might want to break the content up into sections and so would then use multiple <tbody> tags.

The <tfoot> is only needed if you actually have footer rows for the table - it must come directly after the thead and before the tbody because if the table is printed there could be a page break in the middle of the table and the footer would need to be displayed at the bottom of each page (again assuming that the browser actually works properly in handling tables).