Forum Moderators: not2easy
I got started in web design with FrontPage, so at first I never really learned how to use tables effectively (so to speak) for layout. Then, right around the time I moved away from FP, I discovered CSS and haven't looked back since.
So the question is: should I go back and learn an outdated way of doing things for redundancy's sake? (or for some other reason?) Hypothetically speaking of course.
That said, I studied Medieval Welsh in college and loved it more than the far more useful Spanish I learned. There's something to be said for knowledge for its own sake. Even outdated, impractical knowledge.
However, as a fairly crude user of tables myself, I have to say that you're not really missing much. Medieval Welsh is at least pretty. And funny. (Search Google for "badger in the bag" and look at the second or third result. Hee.)
Personal choice more or less :) (I use em, and like em)
So yes, learning tables is essential as they're needed not for layout, but for tabular data such as train time-tables.
However, intelligent use of tables are not as striaghtforward as most tutorials suggest. Don't forget, data displayed within tables can have various meanings and associations dependant on the information - or expressions, if used for displaying mathematical totals and sub-totals.
Columns normally have relationships with rows and although we have the <th> tag to nominate a column header, we may also want to tell a user agent - which these days, and in days to come, encompasses speech-based, PDA's and other assistive technologies - that the 1st cell of a row is also a header(Which is often the 1st left cell in the row but equally the table may be used for displaying different, but related groups of data.
A simple example is
<table border="1" align="center">
<caption>Car Details</caption>
<tr>
<th scope="col">Model</th>
<th scope="col">Age</th>
<th scope="col">Insurance Due</th>
</tr>
<tr>
<th scope="row">BMW</th>
<td>5</td>
<td>Jan 5</td>
</tr>
<tr>
<th scope="row">Boxster</th>
<td>8</td>
<td>April 14</td>
</tr>
</table>
Which would display (something) like thus:
________________________________________________
CAR DETAILS
________________________________________________
Model ¦ Age ¦ Insurance Due ¦
________________________________________________
BMW ¦ 5 ¦ Jan 5 ¦
_______________________________________________¦
Boxster ¦ 8 ¦ April 14 ¦
_______________________________________________¦
Using "scope" we can make direct relationships with data that various assistive technologies can assist us with logically interpreting the way the author intended - not least the ones used for accesibility purposes such as speech and braille.
In the table above we "say" that the columnn headed "Model" relates to all data underneath it...simple enough!
The tag and attributes marked
<th scope="row">BMW</th>
1st of all you'll notice that it's not wrapped within a <td> tag because that would mean it contains "tabular data", which it doesn't; it's a header tag and the attribute 'scope="row"' tells the user agent that everything to the right of it (In western culture - some cultures read right to left), relates to the car model, BMW or Boxster if on the 2nd row.
Now that's a very simple example but to give you an idea in your minds-eye of why this may be important, imagine if you had a much larger table on a small screen which meant you had to scroll extensively to find data. It wouldn't take long to become confused in determing what data belonged to which car or column header.
Assistive browsers such as speech, braille etal can make that relation and point it out without you having the labourious task scrolling left, right and up to make the connection.
The "scope" attribute is but one such method for marking up a table for data, there is also "axis" which goes a step further again but I'll leave that as an exercise ;¬)
(It's all those transparent gifs keeping cells from collapsing and the like that confuse me).Yeah, I know what you mean, tables for layout are a pain and is why CSS is defo better but if ever there was a good use of a WYSIWYG tool, it's for making tables for layout!
