HTML and CSS Reference
In-Depth Information
sets the width of each of the seven columns in the column group to 100 pixels. To spec-
ify different column widths, you apply the
width
attribute to individual
col
elements as
in the following code:
<colgroup>
<col width=”50” />
<col width=”100” span=”5” />
<col width=”50” />
</colgroup>
This code sets the widths of the fi ve middle columns to 100 pixels, but sets the widths
of the fi rst and seventh columns to 50 pixels each. Column widths also can be expressed
as a percentage of the total width of a table. A column width of 50% causes a column to
occupy half of the table width. Column widths always are limited by the total width of
the table and by the content of each cell. For example, if you try to set the width of each
column in a fi ve-column table to 200 pixels, but only 800 pixels of space are available,
browsers will reduce the column widths to fi t the content.
In the code for many Web tables, you might see the
width
attribute applied to indi-
vidual table cells. This is another way to set the width of an entire column because the
remaining cells in a column where one cell has a
width
attribute also will adopt that
width to keep the column cells aligned. Even so, the width value for a single cell might
be overridden by browsers if other cells in the column require a larger width to display
their content. With the introduction of column groups, there is little need to apply the
width
attribute to individual table cells. Also, the W3C has deprecated the use of the
width
attribute with the
td
and
th
elements. As you might expect, however, you still
will see it supported by many of the current browsers.
Width and height values
always should be thought
of as minimum widths and
heights because they will
be overridden whenever
the content of the table
requires it.
Setting Row Heights with HTML
You can use HTML to set row heights by applying the
height
attribute
<tr height=”
value
”> ... </tr>
to the
tr
element, where
value
is the height of the row in pixels. Internet Explorer also
allows you to specify height values as a percentage of the height of the table. The
height
attribute is not part of the W3C specifi cations, but most browsers support it. Like setting
the column width by setting the width of an individual cell, you also can set row height
by applying the
height
attribute to an individual cell within a row. This approach also is
supported by most browsers even though it has been deprecated by the W3C.
Formatting Table Borders with HTML
In the last session, you used the
border
attribute to add a border around the table and
each of the table cells. You can modify the placement of the table borders using table
frames and table rules. A
table frame
specifi es which sides of the table (or which sides
of the table cells) will have borders. To apply a frame to a table, you apply the
frame
attribute
<table border=”
value
” frame=”
type
”> ... </table>
to the
table
element, where
value
is the width of the table border and
type
is
box
(the default),
above
,
border
,
below
,
hsides
,
vsides
,
lhs
,
rhs
, or
void
. Figure 5-26
displays the impact of each of these frame options.
