HTML and CSS Reference
In-Depth Information
CHAPTER 10
■ ■ ■
Styling Tables
W
hile the most familiar use of (X)HTML tables—the layout grid—is considered a no-no
in web standards-based development (as it is a
presentational
use of (X)HTML rather than
a
semantic
one), the humble
table
element does still provide an essential function, for which
it was intended when it was created all those many years ago: displaying tabular data.
Tabular data could be defined as two-dimensional information that benefits from being
laid out with rows and columns. Examples of this sort of information include charts, spread-
sheets, poll results, and file listings.
None of these things
have
to be laid out in rows and columns, but they make sense in
rows and columns, and this sort of display conveys the relationships between the various data
attributes. Anytime you have that sort of data, you have a candidate for a data table.
In this chapter we'll discuss how to use CSS to enhance the visual presentation of tables.
Table Markup
Before we get into CSS styling of tables, let's talk a bit about marking up tabular data with
(X)HTML. It turns out there are several more table-related elements available to us than most
web developers realize. Taking advantage of these provides several benefits, including enhanced
accessibility, greater semantic meaning, and more “hooks” upon which to hang your styling
information.
If you've used tables in the past—for data or for layout—you're probably familiar with the
(X)HTML elements for rows (
tr
) and cells (
td
). You've probably seen tables that look something
like this:
<table>
<tr>
<td>Name</td>
<td>Affiliation</td>
<td>Website URL</td>
</tr>
<tr>
<td>Jeff Croft</td>
<td>World Online</td>
<td>http://jeffcroft.com</td>
</tr>
219
