This is a snap for a table, how difficult in CSS?

The more CSS tutorials I read, the more confused I get and the more cumbersome my markup becomes.

Here is an example of how I would handle a list of games and their characterstics in a table.

<table>
    <tr>
        <th>Game Title</th>
        <th>Age</th>
        <th>Ability</th>
        <th>Venue</th>
        <th>Activity</th>
        <th>Equipment</th>
        <th>Consraints</th>
    </tr>
    <tr>
        <td><a href="#">Make a sandwich game</a></td>
        <td>under 12<br />13 to 18</td>
        <td>All</td>
        <td>Inside</td>
        <td>All</td>
        <td>Melissa &amp; Doug product</td>
        <td>None</td>
    </tr>
    <!-- and so on -->
</table>

In CSS3 I would think to use an unordered list(s) instead. BUT then I would have to manually calculate column widths wouldn’t I? What about column headings? And how about that imbedded break in the age column?

How would you handle it?

If what you posted was it, I would probably consider using a definition list.
But as you have “and so on” what you have is tabular data so I would use a table.
I would use a few more tags and maybe attributes - th tags, caption, grouping etc. - but a table would be what I would use.
http://www.w3.org/TR/html401/struct/tables.html

Don’t get misled by the “tables are bad” rants. Tables should not be used for layout, but showing tabular data in a table is what they’ve always been meant to be used for.

Hi,

You could re-create that table example in CSS for IE8+ simply by using display:table and display:table-cell attributes and it would look exactly the same and use about the same amount (or slightly less) html.

However, as Mittineague quite rightly said above what you have is tabular data and a table is the most semantic element to use. (Also as mentioned you should of course be using th tags for the table headers along with the scope attribute).

Here is some HTML to do it that is more semantically correct than what you currently have. It is also more semantically corrrect than any alternative that doesn’t use a table as what you have is tabular data and so regardless of how you want the data to be displayed the content should be marked up in the HTML as tabular data…

<table>
<thead>
    <tr>
        <th scope="col">Game Title</th>
        <th scope="col">Age</th>
        <th scope="col">Ability</th>
        <th scope="col">Venue</th>
        <th scope="col">Activity</th>
        <th scope="col">Equipment</th>
        <th scope="col">Constraints</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><a href="#">Make a sandwich game</a></td>
        <td>under 12<br />13 to 18</td>
        <td>All</td>
        <td>Inside</td>
        <td>All</td>
        <td>Melissa & Doug product</td>
        <td>None</td>
    </tr>
    <!-- and so on -->
</tbody>
</table>