HTML and CSS Reference
In-Depth Information
■ ■ ■
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
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:
<td>Website URL</td>
<td>Jeff Croft</td>
<td>World Online</td>
Search WWH ::

Custom Search