HTML and CSS Reference
Data tables may seem like boring spreadsheets of mind-numbing information—and often they
are. But that is, if anything, a really good reason to give them special attention when it comes to
visual and information design. With a bit of CSS work, we can take the mundane, ordinary table
and transform it into a fascinating resource that is a pleasure to browse. In this section, we'll
cover some of the common styles and features you can add to your table to increase readability,
findability, and aesthetic value.
First, take a look at Figure 10-2, which shows our finished example table as it appears in
a browser with no CSS styling.
Figure 10-2. Our sample table, completely unstyled
Most folks will agree this isn't ideal. Let's add some basic table styles, as well as some type
styling (see the previous chapter), to enhance its presentation. We'll start with this CSS:
margin: 0 auto;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
By simply making the table 90 percent wide, centering it on the page (by giving it auto left
and right margins), and tweaking the type a bit, we get a good start toward a cleaner presenta-
tion, as shown in Figure 10-3.