Electronic Books

Note that our table markup now has a summary attribute,
a caption tag, and most importantly, table headings (th) that
differentiate the heading cells from the data cells, which by default
display bold. Each of these headings has a scope attribute that indicates
whether it relates to a column or a row.
Now that we have some better markup, we can remove the border="
1" attribute from the table tag, and replace it with a class that
we can use in our style sheet to target all the elements of our table.

For a more in-depth discussion of
the use of these table elements in
creating accessible markup, read Zoe
Gillianwater??™s article ???Using Tables
Appropriately??? at http://www.
communitymx.com/content/article.
cfm?cid=0BEA6.
DESIGNING INTERFACE COMPONENTS 179
Now we just see the data (see Figure 6.3).
FIGURE 6.3 Without any cell borders,
it??™s not so easy to see the relationships
in the data.
My objective when styling tables is to add the minimal amount of
visual elements to enable the user to make sense of the data. For
example, let??™s see if we can avoid using any vertical lines at all, like
this (see Figure 6.4):
table.basic_lines {
width:300px;
border-top:3px solid #069;
}
FIGURE 6.4 We start styling by putting
a thick border across the top of
the table.


Pages:
194195196197198199200201202203204205 206 207208209210211212213214215216217218