HTML and CSS Reference
In-Depth Information
HTML was both the victor and the victim of this war. In some sense, the Web greatly benefited from the
rapid development sparked by fierce competition. Exciting new features meant web developers had more
tools at their disposal. On the other hand, developing the Web at such a rapid, haphazard place left web
developers with a difficult choice: to which browser do they cater? With the glut of non-standard features
and elements, HTML support was fragmented to such a degree that building effective websites often
meant choosing a side.
At the time, the newly formed W3C struggled to keep pace with the rapidly changing markup language. It
wasn't until long after the dust settled on the Browser Wars that the W3C caught up, made sense of the
situation, and codified some of the non-standard elements created by browser makers. The early W3C
was a reactive organization in this regard, folding features into new versions of the specification as those
features gained traction. Some features survived the war while others died on the battlefield.
The
table
element just happens to be one of the notable survivors of the Browser Wars.
table
Originally introduced by Netscape in early 1994, the
table
element provides a markup-based structure for
tabular data. "Tabular data" is the fancy way of referring to content that you might find in a spreadsheet,
calendar, quarterly sales report, or train schedule. Not just any data thrown into a table is tabular data,
though. Tabular data is data that
belongs
in a table so that it may be accurately understood.
HTML tables, like spreadsheets, are made up of cells organized into columns and rows. Based on the
elements outlined in the spec, HTML takes a row-centric approach to tabular data. There are, however, a
few elements that give you some degree of columnar control.
Earlier versions allowed for tables to be used for page layout. Before widespread support for CSS-based
layout, web developers had few options other than tables for creating complex visual designs. This led to
all manner of bad practices, less-than-accessible web pages, and bloated, hard-to-maintain code.
Thankfully, those days are behind us. The HTML5 specification explicitly states that the
table
element
represents tabular data.
Listing 7-1 shows the simplest possible data table.
Listing 7-1.
A basic table with a single row
<table>
<tr>
<td>Utility Belts</td>
</tr>
</table>
Nothing too crazy, right? The
table
element, which must have both a start and an end tag, may be a child
of any element that can contain flow elements.
The
table
element acts as a container for a number of elements that organize the data within. We'll be
covering each of these elements and the rules surrounding their usage in the rest of this chapter.
