HTML and CSS Reference
In-Depth Information
Adding a Link, Border Spacing, Padding,
and Row Color
The table of information on the Golf Web page did not use any additional spacing or
padding styles. The size of each data cell, therefore, automatically was set to the mini-
mum size needed for the text inserted in the data cell. The tennis.html Web page, how-
ever, should be modified to use border spacing and padding by adding an inline style to
the <table> tag.
Border spacing
specifies the distance between the borders of adjacent
cells in a table. (See Table Properties in Appendix D for more information about border
spacing.) Additional spacing makes the borders around each cell look thicker (see the
thickness of the borders in Figure 4-33b versus Figure 4-33a).
Padding
is shorthand to
set the top, right, bottom, and left padding around an element (see Margin and Padding
Properties in Appendix D for more information). In other words, if you add padding,
you give more space around the content within that cell. Figures 4-33a and 4-33b illus-
trate how adding an inline style with border spacing and padding in the <table> tag can
affect a table's appearance. Adding the class, stripe, to certain rows also helps to differ-
entiate one row from another using color and gives the table a unique style.
no padding or border
spacing added to this table
(a) Tables without
border spacing
and padding.
padding and border
spacing of 5 pixels each
added to this table
(b) Tables with border
spacing and padding.
Figure 4-33
