Left hand side table headers <th>

HTML & CSS
1

Hi there, if <th> is supposed to go inside the <thead> section.

What happens if you want to have left hand side headings as well?

Does this also have to go inside a <thead>?

2

Donā€™t worry about <thead>.
Enclose the table within the <table></table> tags.
For the first row (say with three cells) have
<tr>
<th scope=ā€œcolā€>Col 1</th>
<th scope=ā€œcolā€>Col 2</th>
<th scope=ā€œcolā€>Col 3</th>
</tr>

If you want headings down the side, set up each <tr> like this:
<tr>
<th scope=ā€œrowā€>Row 1</th>
<td>Some text</td>
<td>Some text</td>
</tr>

Does that help? The scope things are to healp screen readers understand the table layout.

1 Like
3

The thead just defines the column headings so that if you print the web page and it goes over several actual pages that the thead content can be printed at the top of every page instead of only at the top of the table. It also allows you to have a fixed heading section and scrollable table content.

At least thatā€™s what it is for - browsers still donā€™t support it all properly.

4

Then you use <th> in <tbody> as well.

Your first statement is a bit strange, because it sounds as if you think that <th> can only be used within <thead>. Perhaps you misunderstood someone saying that <thead> should only contain <th>?

Why not? If you have a table header (column headings), then you should mark it up with <thead>.

Sorry, but screen readers donā€™t support scope. You can use headers to explicitly match header cells and data cells, but in a simple column thatā€™s usually not necessary.

Those are merely presentational matters, and are not really a concern for HTML. The thead element type marks up a table header, thatā€™s all. What user agents choose to do with it is mainly up to them. The features you describe are what W3C seems to have had in mind, but thereā€™s no requirement that UAs do this.

5

@AutisticCuckoo: thanks for setting me straight. Jeesh, I gotta get back to studying tables. Have been ignoring them a bit.

I was put off <thead> &co. because they are said to be poorly supported. But has that changed now?

And now that Iā€™m trying to improve my understanding, I canā€™t find the point of using scope at all. I was told that it was for screen readers, but clearly not. So what use DOES it have?

6

That depends on what you mean by ā€˜supportā€™? :slight_smile:
All modern browsers support thead, tfoot and tbody to the extent that they will render them in the right order. They also support those element types in CSS selectors, so you can have different rules for column headings and row headings:

/* Column headings */
thead th {font-weight:bold; text-align:center}

/* Row headings */
tbody th {font-weight:normal; text-align:left}

They donā€™t support table headers and footers to the extent that they print them on each page of a multi-page table, though. Thatā€™s not a W3C requirement; only a suggestion.

It doesnā€™t seem to have any practical use right now. On the other hand, thereā€™s always the question whether we should design according to the standards or for broken applications. The scope attribute is far easier to use than the headers attribute. It shouldnā€™t be an insurmountable task for screen readers to support header scope.

7

Thanks for that informative reply. Much appreciated. :slight_smile: