Correct use of <THEAD>, <TBODY> & <TH>

[requested89]

I am designing my table and I want to use the <THEAD>, <TBODY> & <TH> tags correctly.

My page is set out as follows:

ContentTitle1
    SubHeader1-1
    SubHeader1-2
        SubContent1-1
        SubContent1-2

ContentTitle2-2
    SubHeader2-1
    SubHeader2-2
        SubContent2-1
        SubContent2-2

What is the correct way to group all this? Can I have more than one <TBODY> section per page?
Also as you will notice from the code below I have 2 mainHeaders which hierarchically are at the same level within the page. Is it therefore ok to have 2 <THEAD> tags on the same page?

Its a questionnaire which explains the names used BTW.

<thead>
    <th axis='mainHeader'>Section1</th>
</thead>
    <th axis='subHeader'>SubSection1</th>
        <tbody>
            <td>Question1</td>
            <td>Question2</td>
        </tbody>
    <th axis='subHeader'>SubSection2</th>
        <tbody>
            <td>Question1</td>
            <td>Question2</td>
        </tbody>

<thead>
    <th axis='mainHeader'>Section2</th>
</thead>
    <th axis='subHeader'>SubSection1</th>
        <tbody>
            <td>Question1</td>
            <td>Question2</td>
        </tbody>
    <th axis='subHeader'>SubSection2</th>
        <tbody>
            <td>Question1</td>
            <td>Question2</td>
        </tbody>

I kinda get the impression that there is no 100% correct way of doing this but at the same time doing it incorrectly may cause confusion from an accessibility point of view.

Thanks in advance,

Chris

 

[BillyRayPreachersSon]

The first question to ask yourself: Do you actually need to use tables at all?

Is the data really tabular? If not, you might want to avoid tables altogether - therefore making your page even more accessible than if you had.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[requested89]

Unfortunately I do need to use tables yes. If I had done the layout myself I wouldn't have used tables, I would have used CSS.

Aside from the Tables verus CSS argument (of which I side with the CSS gang by the way) does anyone know the correct way to use these tags?

Thanks in advance,

Chris

 

[BillyRayPreachersSon]

TH elements need to be in a row, just as TD elements do. AFAIK, you can also only have 1 THEAD section per table - you seem to have more than one.

You also have no TR elements around your TDs - this also needs correcting.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3

You can have many <tbody> elements, but only one <thead> and <tfoot> per table. I suppose you would then have nothing in <thead>, while the two content titles would denote two tbodies. For subheaders you would use th and for content td. That's the only way you can do it with tables. Though I would still try to convince the powers that be to let you do it with a definition list.

 

[BabyJeffy]

Here is an example bit of code that uses all those tags you have discussed - in the correct way:

<table>
	<thead>
		<tr>
			<th>A heading</th>
			<td>This text is in the THEAD</td>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>This text is in the TFOOT</td>
			<td>This text is in the TFOOT</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>This text is in the TBODY</td> 
			<td>This text is in the TBODY</td> 
		</tr>
	</tbody>
</table>

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[BillyRayPreachersSon]

Jeff - I would have thought it usual to have the table footer after the table body?

 

[BabyJeffy]

Usually you would... since the whole idea is to allow you to scroll the tbody section independantly of the thead and tfoot. I ripped the code sample off of w3schools and modified it... it appears their original source suffers the same indignity.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[BabyJeffy]

Let me just retract what I just posted:

If you use the thead, tfoot and tbody elements, you must use every element. They should appear in this order: <thead>, <tfoot> and <tbody>, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.[/code]

So: thead, tfoot, tbody

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[BabyJeffy]

Sorry for the poor posting technique:

If you use the thead, tfoot and tbody elements, you must use every element. They should appear in this order: <thead>, <tfoot> and <tbody>, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094