Avoiding using a list when a table won’t do
The other day I neglected to mention how I had resolved the list/table dilemma on the site I’d been working on.
As I explained, the content fitted the semantics of a table more than that of a list, but Internet Explorer’s bugs in applying positioning to <tr> tags (up to and including ie8) prevented me from using a table to implement the design.
Or did it.
In the end I had two choices of mark-up for each item in the list:
<ul>
<li><h3><a title="Blue Reef Resort" href="duikhotel/Egypte/
... marsa_alam/Blue_Reef_Resort">Blue Reef Resort</a>
</h3>
<ul>
<li>All inclusive</li>
<li>8, 15 dagen</li>
<li>Marsa Alam</li>
...
</ul>
</li>
</ul>
or
<tr>
<th colspan="3" scope="row">
<a title="Blue Reef Resort" href="duikhotel/Egypte/
... marsa_alam/Blue_Reef_Resort">Blue Reef Resort</a>
</th>
<td class="rating">
<img alt="4 stars" src="/img/star4.png"/>
</td>
</tr>
<tr>
<td>All Inclusive</td>
<td>8, 15 dagen</td>
<td class="location">Marsa Alam</td>
<td class="price">vanaf €399</td>
</tr>
The second example, combined with appropriate column headings, I figured gave the closest approximation to the real table structure of the content. And the presence of a <th> every other row does suggest that rows are to be taken in pairs (though I’m not sure this is any help to screen reader users).
The above means, I think, that I am closer to web design zen. I have rejected the false grail of table based design, and only now that I have mastered CSS and semantic structure can I claim to understand the table and start to mold it to my enlightened purposes.
No related posts.