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:
<col width=”50” />
<col width=”100” span=”5” />
<col width=”50” />
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
<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.
Search WWH ::

Custom Search