Need advice on tables

[J.Karlsson]

Here's a question on use of tables for TABULAR data for once...

Below are the first three rows of a table I've got. The first two rows are supposed to be headers, and that's where I needs some advice. Should I use the <th> tag instead of <td> in the two top rows? Or am I only allowed to use <th> in the first row?

<table class="text" cellspacing="1" cellpadding="3">
<tr class="fet">
<td colspan="3">&amp;nbsp;</td>
<td valign="bottom" colspan="2"><abbr title="FA Premier League">League</abbr></td>
<td valign="bottom" colspan="2">FA Cup</td>
<td valign="bottom" colspan="2"><abbr title="Worthington (League) Cup">FL Cup</abbr></td>
<td valign="bottom" colspan="2"><abbr title="European competitions">Europe</abbr></td>
<td valign="bottom" colspan="2"><abbr title="FA Community Shield">Com.Shld</abbr></td>
<td valign="bottom" colspan="2">Total</td>
</tr>
<tr class="svartbgtext">
<td valign="top"><abbr title="Shirt number">No</abbr></td>
<td valign="top">Player</td>
<td valign="top">Position</td>
<td valign="top"><abbr title="Appearances">App</abbr></td>
<td valign="top"><abbr title="Goals">Gls</abbr></td>
<td valign="top"><abbr title="Appearances">App</abbr></td>
<td valign="top"><abbr title="Goals">Gls</abbr></td>
<td valign="top"><abbr title="Appearances">App</abbr></td>
<td valign="top"><abbr title="Goals">Gls</abbr></td>
<td valign="top"><abbr title="Appearances">App</abbr></td>
<td valign="top"><abbr title="Goals">Gls</abbr></td>
<td valign="top"><abbr title="Appearances">App</abbr></td>
<td valign="top"><abbr title="Goals">Gls</abbr></td>
<td valign="top"><abbr title="Appearances">App</abbr></td>
<td valign="top"><abbr title="Goals">Gls</abbr></td>
</tr>
<tr class="gulbgtext">
<td valign="top" align="right">1</td>
<td valign="top"><a href="/players/s/seaman_da/" class="gulbglank">David Seaman</a></td>
<td valign="top"><abbr title="Goalkeeper">G</abbr></td>
<td valign="top" align="right">24</td>
<td valign="top" align="right">-</td>
<td valign="top" align="right">2</td>
<td valign="top" align="right">-</td>
<td valign="top" align="right">-</td>
<td valign="top" align="right">-</td>
<td valign="top" align="right">7</td>
<td valign="top" align="right">-</td>
<td valign="top" align="right">1</td>
<td valign="top" align="right">-</td>
<td valign="top" align="right">34</td>
<td valign="top" align="right">-</td>
</tr>

[Charles]

Anything that's a table header needs to be marked up as a TH element, but with multi-dimensional tables you need to add some attributes to the TH and TD elements to make it clear which headers go with which data cells. You will need to use the "abbr", "axis", "class" and "id" attributes with the TH elements and the "headers" attribute with the TD element. Read carefully the section on tables in the HTML 4.01 Specification (http://www.w3.org/TR/html4/struct/tables.html).

[J.Karlsson]

Thanks Charles! I think I've got some ideas how to solve this.

Cheers! :)

[J.Karlsson]

Below is what I came up with after studying the link that Charles provided. Now I'd like some feedback! Should I add or remove anything from the code or is it good the way I've done it?

<table summary="List of players with appearances and goals statistics in each competition" class="text" cellspacing="1" cellpadding="3">
<tr>
<th colspan="3">&amp;nbsp;</th>
<th colspan="2" id="c1" axis="competition"><abbr title="FA Premier League">League</abbr></th>
<th colspan="2" id="c2" axis="competition">FA Cup</th>
<th colspan="2" id="c3" axis="competition"><abbr title="Worthington (League) Cup">FL Cup</abbr></th>
<th colspan="2" id="c4" axis="competition"><abbr title="European competitions">Europe</abbr></th>
<th colspan="2" id="c5" axis="competition"><abbr title="FA Community Shield">Com.Shld</abbr></th>
<th colspan="2" id="c6" axis="competition">Total</th>
</tr>
<tr class="svartbgtext">
<th id="h1"><abbr title="Shirt number">No</abbr></th>
<th id="h2" align="left">Player</th>
<th id="h3">Position</th>
<th id="a1" headers="c1"><abbr title="Appearances">App</abbr></th>
<th id="g1" headers="c1"><abbr title="Goals">Gls</abbr></th>
<th id="a2" headers="c2"><abbr title="Appearances">App</abbr></th>
<th id="g2" headers="c2"><abbr title="Goals">Gls</abbr></th>
<th id="a3" headers="c3"><abbr title="Appearances">App</abbr></th>
<th id="g3" headers="c3"><abbr title="Goals">Gls</abbr></th>
<th id="a4" headers="c4"><abbr title="Appearances">App</abbr></th>
<th id="g4" headers="c4"><abbr title="Goals">Gls</abbr></th>
<th id="a5" headers="c5"><abbr title="Appearances">App</abbr></th>
<th id="g5" headers="c5"><abbr title="Goals">Gls</abbr></th>
<th id="a6" headers="c6"><abbr title="Appearances">App</abbr></th>
<th id="g6" headers="c6"><abbr title="Goals">Gls</abbr></th>
</tr>
<tr class="gulbgtext">
<td headers="h1" align="right">1</td>
<td id="pla1" headers="h2"><a href="/players/s/seaman_da/" class="gulbglank">David Seaman</a></td>
<td headers="h3"><abbr title="Goalkeeper">G</abbr></td>
<td headers="pla1 c1 a1" align="right">24</td>
<td headers="pla1 c1 g1" align="right">-</td>
<td headers="pla1 c2 a2" align="right">2</td>
<td headers="pla1 c2 g2" align="right">-</td>
<td headers="pla1 c3 a3" align="right">-</td>
<td headers="pla1 c3 g3" align="right">-</td>
<td headers="pla1 c4 a4" align="right">7</td>
<td headers="pla1 c4 g4" align="right">-</td>
<td headers="pla1 c5 a5" align="right">1</td>
<td headers="pla1 c5 g5" align="right">-</td>
<td headers="pla1 c6 a6" align="right">34</td>
<td headers="pla1 c6 g6" align="right">-</td>
</tr>

[Robert Wellock]

Perhaps you might want to use CSS to for the "align right" alignment.

[Charles]

Other than that, it looks great.

[J.Karlsson]

Originally posted by Robert Wellock
Perhaps you might want to use CSS to for the "align right" alignment.

What would the benefits be of doing that? Of course if all cells had right alignment, I could add
td { text-align: right; }
to my CSS document, but that's not the case. The other option would be
<td class="right_alignment"> and then add a class called "right_alignment" to my CSS document -- but this wouldn't mean less code, so once again: What are the benefits?

Cheers! :)

[Stefan]

Originally posted by J.Karlsson
<td class="right_alignment"> and then add a class called "right_alignment" to my CSS document -- but this wouldn't mean less code, so once again: What are the benefits?

Cheers! :)

If you one day want to change the layout ypu don't need to manually edit eg 20 pages but can change 1 value in your 1 externnal CSS file and have the entire site updated at once.

[J.Karlsson]

Originally posted by Stefan
If you one day want to change the layout ypu don't need to manually edit eg 20 pages but can change 1 value in your 1 externnal CSS file and have the entire site updated at once.

Ok, fair enough! ;)

Thanks a lot for the help, Charles, Robert and Stefan! :)