8.1 Using Tables on Web Pages^317Figure 8.8
Table with
bordercolorset
to a dark color
bordercolorattribute is not part of the official W3C Recommendations but is
included here because it is widely used and well supported by browsers. The table
shown in Figure 8.8 has a border set to 5 and bordercolorset to a dark color.The widthAttribute. This attribute specifies the width of the table in either pixels
or in a percentage of the Web page. The table will stretch to fit the entire width of the
page if 100% is used. If width is not specified, the browser determines the width of a
particular table by calculating the width of the elements and text it contains. Use the
widthattribute when you want more control over your Web page. The table shown in
Figure 8.6 is centered and has a width set to 75%. The XHTML code for the table tag
is <table border="1" align="center" width="75%">FAQ
Which is better, specifying width by pixels or by percentage?It depends. Keep in mind that visitors to your Web page will use monitors with different screen
resolutions. If you need your table to have a fixed width that you specify, use pixels. If you’d
like your table to be flexible and to resize with the browser window, use percentages. It’s a
good idea to test your Web pages using different screen resolutions.The cellspacingAttribute. This attribute specifies the distance between the cells
in pixels. If you omit the cellspacingattribute, the default value (usually around
2 pixels) is determined by the browser. The table shown in Figure 8.9 has cellspacing
set to 10. The XHTML code for the <table>tag follows:
<table border="1" cellspacing="10">Figure 8.9
Table with
cellspacingset
to 10
The cellpaddingAttribute. This attribute specifies the distance in pixels between
the cell contents and the edge of the cell. If you omit the cellpaddingattribute, the
default value is 1 pixel. An example with cellpaddingset to 10 is shown in Figure 8.10.
The XHTML code for the <table>tag follows:
<table border="1" cellpadding="10">