View Full Version : semantically correct listings pages...

02-15-2005, 04:48 PM

I'm redesigning a music site where several sections consist of track listings like this one (http://www.derek.henderson.btinternet.co.uk/geneliv.html) :


I want to make sure the new version of the site adheres to standards, but these pages have got me going round in circles as to what would be the best way of doing it.

I would be grateful if people could have a look at this page (http://www.npugh.co.uk/listings_test.htm) and offer any feedback on whether this would be an elegant/semantic solution... or not!


02-15-2005, 05:28 PM
Because your data is supposed to be cross-referenced, it can be considered tabular and as such it's already semantically correct. :eek:

When people say not to use tables for layout, they mean not to use tables for non-tabular data. For an example of when not to use tables, look at this page's source code and notice how extensively tables are used for data that users won't be cross-referencing. The markup spit out by most forum software (vBulletin included) is not semantically correct.

02-15-2005, 06:20 PM
hey, if you want semantically incorrect check out what the real original source for the listings looks like

<p><b><font color="#990000">REF.No.
SOURCE</font></b> </p>
<p><b><font color="#000066">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Early August '56 Alan Freed's Radio Show USA</font></b> <br>
<font color="#000066">328&nbsp;&nbsp;&nbsp;
RH</font> <br>

<font color="#000066">329&nbsp;&nbsp;&nbsp;

I agree with you about the tabular data/ cross-referencing thing, but it's the date/location line across the top of each cluster of entries that bugs me.

I've tried putting this bit in a 4th column with the other data, but that doesn't make any sense to people reading it on screen - too much repetition or too many gaps depending on whether you enter it into each row.

But how to have the correct <th> and <td>'s with a cell than spans the three other columns?

I need this to make sense to people using conventional browsers, those floundering around in the dark with screenreaders AND (the most difficult) the guy who's going to have to update these pages at some stage! :rolleyes:

I'd rather avoid using display tricks to move headings out of sight if I can help it, but it might come to that... :(

02-15-2005, 07:23 PM
to increase the semantic structure of a table, theres a bunch of attributes you can specify, read up on them here:

02-16-2005, 09:18 AM

I think it'll take a while to digest that page...
The colspan section looks useful though.

I've also just come across this page (http://www.ampsoft.net/webdesign-l/tables-vs-definition-lists.html) that discusses the use of tables vs definition lists. I'd forgotten the thing about tables should still make sense when you've transposed them (flipped them so the columns become the rows and rows become the columns).