HTML and CSS Reference
In-Depth Information
Setting the
border
attribute to
1
puts a
1px
border around the whole table and each individual cell,
producing the effect of a raised double border around each cell. Because there's no
width
,
cellspacing
,
or
cellpadding
, the table collapses around the content, as shown in Figure
14-1
.
Figure 14-1.
A basic table with border
This minimalist layout not only looks ugly; it's difficult to read if there are more than a handful of data cells.
However, CSS gives you greater control over horizontal and vertical spacing than
cellpadding
and
cellspacing
.
It also offers better options for controlling the borders of table elements, so it's usually advisable to omit the
border
attribute from the opening
<table>
tag.
First, though, let's continue exploring how tables are structured and laid out.
Header Cells
In addition to
<td>
tags, you can use
<th>
tags to indicate that a cell is a row or column header. The table in
header_cells.html contains
<th>
tags in the first row and in the first cell of each subsequent row. By default,
browsers center the text in
<th>
tags and display it in a bold font, as shown in Figure
14-2
.
Figure 14-2.
Text in header cells is normally bold and centered
Table Captions
The
<caption>
tag displays a caption for the table. The tag must come immediately after the opening
<table>
tag
like this (the code is in caption.html):
<table>
<caption>Regional Sales Results</caption>
<tr>
By default, browsers display the caption above the table, as in Figure
14-3
, but you can use the CSS
caption-side
property to move it under the table, as described later in this chapter.