Tables with header row use td for header cells instead of th

[David Nebauer]

I noticed that tables created with header cells, i.e., using '!' notation, use th elements for header cells. For example,

|!Fruit|!Colour|

|Apple|Green|

|Mandarin|Orange|

results in:

<table>

    <tbody>

        <tr class="evenRow">

            <th>Fruit</th><th>Colour</th>

        </tr>

        <tr class="oddRow">

            <td>Apple</td><td>Green</td>

        </tr>

        <tr class="evenRow">

            <td>Mandarin</td><td>Orange</td>

        </tr>

    </tbody>

</table>

Tables created with header rows, i.e., using "||h" notation, use thead > td elements for header cells. For example,

|Fruit|Colour|h

|Apple|Green|

|Mandarin|Orange|

results in:

<table>

    <thead>

        <tr class="evenRow">

            <td>Fruit</td><td>Colour</td>

        </tr>

    </thead>

    <tbody>

        <tr class="oddRow">

            <td>Apple</td><td>Green</td>

        </tr>

        <tr class="evenRow">
            <td>Mandarin</td><td>Orange</td>

        </tr>

    </tbody>

</table>

I'd like to make a case for changing the generated html to use th for header cells in header rows. As far as I can determine from the html5 specification, both td and th elements can legally occur as part of tr elements -- see here. It is certainly the case that current table output of both types validates as correct using the w3c html validator. The table model, however, states:

Cells can either be data cells or header cells. Data cells correspond to td elements, and header cells correspond to th elements.

This seems fairly definitive, though the specification then goes on to state:

Cells of both types can have zero or more associated header cells.

which, frankly, I don't quite follow.

I checked the first few html table guides found by google and they all teach the use of th for header cells. Using th for header cells in header rows would also make the output of both table type more consistent.

In practice, using td elements in table header won't blow up any browsers. It is only relevant for those creating css styles for tables. I suspect a lot of folks naively creating css expect header cells to be th cells rather than td cells. There is the reverse problem where stylesheets written specifically for TW-created tables will not work with tables using th elements for header cells. (This is where I ran up against this issue: I wrote a macro that generates tables with th elements and found the Shiraz table stylesheets did not style the headers properly.)

That shows one problem that would be involved in changing the table html: existing css that handles only thead > td would "break". Still, I'd argue it is better to go through that experience once to have more intuitively correct html output.

Incidentally, although the output from using header cells validates as correct html, it looks odd to me since there is a single tbody element which includes th cells along with td cells. If the tbody element is removed the table output still validates as correct html.

Cheers,

David. 

[PMario]

Hi David,

That shows one problem that would be involved in changing the table html: existing css that handles only thead > td would "break". Still, I'd argue it is better to go through that experience once to have more intuitively correct html output.

That's "just" a problem of having the right CSS style definitions. eg:

table thead tr td, table th {
    background-color: #f0f0f0;
    font-weight: bold;
}

And you are good to go.

have fun!

mario

[David Nebauer]

Thanks, Mario. I presume html gurus routinely construct their stylesheets that way. The rest of us mere mortals, however, are not always that wise. Naive users of TW creating css may assume table header cells use th tags, and TW-specific stylesheets may not support tables that use th tags for header cells (as with the stylesheets in the Shiraz plugin). It leads to unnecessary troubleshooting and tweaking of macros and stylesheets.

This is not a huge problem in the great scheme of things, just annoying when you encounter it.

Cheers,

David.

[TonyM]

David,

Irrespective of the format generated by the WikiText table format the original html format also works well in TiddlyWiki, so it is trivial to use that method instead and you can use whatever standards you wish. Personally I find html easier to wrap the detail rows in a list widget, even the columns can be handled this way.

Regards

Tony