Forum Moderators: open
So I think I'd like the table to look something like this (without the dots obviously)..
Position...........................Salary ($AUD)
Intern....................................34,624
Resident Medical Officers
....2nd year of relevant experience.......37,315
....3rd year of relevant experience.......39,908
....4th year of relevant experience.......42,599
Registrar
....1st year of service...................44,425
....2nd year of service...................47,121
....3rd year of service...................49,811
....4th year of service...................52,501
Senior Registrar
....1st year of service...................55,828
....2nd year of service and thereafter....58,278
So whats the best way to mark this up in HTML?
I presume I need to do something with the axis="" attribute (as indicated in [w3.org...] ) but it all seems very clumsy.
Is there a better way?
I'd try something like this, using CSS to add padding wherever you need it:
<style type="text/css">
td.header { font-weight: bold }
td.indent { padding-left: 40px }
td + td { text-align: right }
</style>
</head>
<body>
<table width="400">
<col><col style="text-align: right">
<tr>
<td colspan=2 class="header">Resident medical officers</td>
</tr>
<tr>
<td class="indent">2nd year of relevant experience</td>
<td>37,315</td>
</tr>
<tr>
<td class="indent">3rd year of relevant experience</td>
<td>39,908</td>
</tr>
</table>
<table>
<tbody>
<tr>
<th width="85%" align="left">Position</th>
<th width="15%" nowrap="">Salary ($AUD)</th>
</tr>
<tr>
<td width="85%">Intern</td>
<td width="15%" align="right">$34,624</td>
</tr>
<tr>
<th width="100%" colspan="2" align="left">Resident Medical Officers</th>
</tr>
<tr>
<td width="85%">2nd year of relevant experience</td>
<td width="15%" align="right">$37,315</td>
</tr>
<tr>
<td width="85%">3rd year of relevant experience</td>
<td width="15%" align="right">$39,908</td>
</tr>
<tr>
<td width="85%">4th year of relevant experience</td>
<td width="15%" align="right">$42,599</td>
</tr>
</tbody>
</table>I believe the default appearance of a th tag is centered and bold. I've applied the align="left" here just to verify. I also align="right" the currency column. Based on your level of CSS experience, I'm sure you will be able to strip all attributes and have clean tags.
th{text-align:left;}
.currency{text-align:right;}
Note, there will be a few attributes you need to add based on accessibility specifcations.
<head>
<style type="text/css">
table, td, th{padding:.2em;border-collapse:collapse;border:.05em solid #999;}
th{text-align:left;color:#000;background:#eee;}
.cur{text-align:right;}
.con{padding:0 1em;}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>Position</th>
<th>Salary ($AUD)</th>
</tr>
<tr>
<td class="con">Intern</td>
<td class="cur">34,624</td>
</tr>
<tr>
<th colspan="2">Resident Medical Officers</th>
</tr>
<tr>
<td class="con">2nd year of relevant experience</td>
<td class="cur">37,315</td>
</tr>
<tr>
<td class="con">3rd year of relevant experience</td>
<td class="cur">39,908</td>
</tr>
<tr>
<td class="con">4th year of relevant experience</td>
<td class="cur">42,599</td>
</tr>
</tbody>
</table>Styles definitely need to be applied. ;)
<added>This gets really deep graham...
19. XHTML Tables Module [w3.org]
I prefer to use "scope" which the W3C recommend as an alternative to axis. Again, it's only there for the speech readers.
Scope works like TH but tells the browser which row or column the table cell relates to.
Example:
<tr>
<td scope="row">Pies eaten</td>
<td>3</td>
<td>9</td>
<td>2</td>
</tr>Although looking at your example I would suggest using separate tables for each group so you could simply use TH, then scope for the remaining rows.
