CODEWITHSUNDEEP
htmlhtml-tableaccessibility
RioBrewster
RioBrewster

Reputation: 105

HTML accessible tables - does th have to be the first column in a row?

This is a government financial table so I can't reorder the columns. The first column is an account code, the second column is the name of the account. If I do:

<thead><tr><th scope="col">Account Code</th><th scope="col">Account Name</th></tr></thead>
<tbody><tr><td>12345</td><th scope="row">Fish and Wildlife</th></tr>
...
</tbody>

Will validation barf on that and will screen readers parse it correctly?

Upvotes: 3

Views: 1326

Answers (4)

Alohci
Alohci

Reputation: 82986

It's fine. The example in the HTML5 spec is just like that.

Note however, that the <th scope="row"> cell is only a header for those td cells to the right of it, and not for the td cell to the left of it (i.e. the account code).

You could add a headers attribute to each account code td to point to the account name th on the same row, but you'll need to assign a unique id for the account name th on each row.

Upvotes: 2

SidewaysGravity
SidewaysGravity

Reputation: 612

In the specifications they do not specify a need for the th to appear as the first column in a table row, and so you should be able to put the th wherever you want.

Table cells may either contain "header" information (see the TH element) or "data" (see the TD element).

HTML w3 specs

Upvotes: 3

Dai
Dai

Reputation: 155145

<th> just denotes a "header cell", they can exist in <thead>, <tbody> and <tfoot> as appropriate for the content.

You've got your column headers in <thead> and within <th> cells, so the markup you've provided is both schema-correct and in-line with accessibility guidelines. There is nothing wrong with your code.

Upvotes: 2

user1726343
user1726343

Reputation:

Ran this document through the w3 validator and it came up clean:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>I AM YOUR DOCUMENT TITLE REPLACE ME</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<div>
<table>
<thead><tr><th scope="col">Account Code</th><th scope="col">Account Name</th></tr></thead>
<tbody><tr><td>12345</td><th scope="row">Fish and Wildlife</th></tr>
</tbody>
</table>
</div>
</body>
</html>

other than char encoding, which can't be checked because I'm pasting into their document.

Upvotes: 0

Related Questions