HTML and CSS Reference
In-Depth Information
Formatting Tables with HTML Attributes
After specifying the content and structure of the program schedule, you and Kyle are
ready to format the table's appearance. There are two approaches to formatting Web
tables: using HTML attributes, and using CSS styles. Because you'll see both approaches
used on the Internet, you'll examine both techniques, starting with the HTML attribute
approach.
Setting Cell Spacing with HTML
Web tables are one of the older HTML page elements, predating the introduction of
Cascading Style Sheets. Because of this, HTML has long supported several attributes for
controlling the layout and appearance of a table. In the last session, you used one of
those attributes, the
border
attribute, to create a table border and display internal table
gridlines. The next attribute you'll consider controls the amount of space between table
cells. By default, most browsers separate cells by a 2-pixel space. To set a different spac-
ing value, you add the
cellspacing
attribute
<table cellspacing=”
value
”> ... </table>
to the
table
element, where
value
is the size of the cell spacing in pixels. If you have
applied a border to your table, changing the cell spacing value also impacts the size
of the internal gridlines. Figure 5-22 shows how different cell spacing values affect the
appearance of the table border and internal gridlines. Note that if the cell spacing is set
to 0 pixels, many browsers still display an internal gridline that results from the drop
shadow that those browsers apply to cell and table borders.
Figure 5-22
Cell spacing values
Cell spacing essentially sets the outside margins of table cells. Unlike the CSS
margin
style, you can specify cell spacing values only in pixels and not in other measuring units.
You also can't set different cell spacing values for the different sides of a cell. In addition,
the effect of setting the cell spacing value is limited by the width allotted to the entire table;
browsers ignore cell spacing values that would push a table beyond its defi ned width.
Setting Cell Padding with HTML
Related to cell spacing is the padding between cell contents and the cell border. In
HTML, you set the padding space using the
cellpadding
attribute
<table cellpadding=”
value
”> ... </table>
where
value
is the size of the cell padding. Like the
cellspacing
attribute, the
cellpadding
attribute applies to every cell in a table. Figure 5-23 shows the impact of
various cell padding values on a table's appearance. Cell padding is similar to the CSS
padding
style, though there is no option to defi ne padding values for different sides of
the cell. Also, as for the
cellspacing
attribute, values of the
cellpadding
attribute can
be expressed only in pixels and not in other units of measure.
