TABLES - CSS: Professional Techniques for Modern Layout - page 208

By adding the appropriately valued scope attribute to your th elements, you've told the
browser exactly how the th elements relate to the cells around them (see Figure 6-4).

In visual browsers, this isn't such a big deal, though you can use attribute selectors to style the
two types uniquely.

th[scope="col"] { border-bottom : 1px solid gray ;}
th[scope="row"] { border-right : 1px solid gray ;}

h is can be a handy hook on which to hang your styles. In this particular case, the same result
could be achieved just using thead th and tbody th but there may sometimes be cases
where there are row headers in the thead or column headers in the tbody . So it's good to
have both techniques handy.

Figure 6-4: Styling header cells based on their scope.

In speaking browsers, the scope value can theoretically be used to make tables easier to
comprehend by associating column and row header content with the content of each cell.
h us, as a speaking browser moved through the table shown previously, it could say
“Pageviews January two thousand ten one million three hundred sixty seven thousand two
hundred thirty four—visitors January two thousand ten three hundred twenty six thousand
i ve hundred seventy eight” for the i rst row. (Where I put in a dash it would probably
announce “data cell” or something similar, but you get the idea.)

210

Again, note the word theoretically. In this case, at least some speaking browsers support the
use of scope to make these sorts of determinations, but that capability is generally not
enabled by default.

COLUMN-ORIENTED STYLING
You likely are used to table rows, but there are times you want to set up and style table
columns. h is turns out to be hard to do simply and (relatively) easy to do with some ugly
complexity (did you follow that?).

h e simple markup route is to use col elements. Take this simple table as an example.

< table>
< col span="2" / >
< col / >
< col / >