HTML and CSS Reference
In-Depth Information
Ready? Start with the framework, just as you have for the other tables in this lesson:
<!DOCTYPE html>
<html>
<head>
<title>
Service Data
</title>
</head>
<body>
<table border=“1” summary=“drive belt deflection”>
<caption>
Drive Belt Deflection
</caption>
</table>
</body>
</html>
To enhance the appearance of the table, make all the cells light yellow (
#ffffcc
) by
using the
background-color
property. The border will be increased in size to 5 pixels,
and you'll color it deep gold (
#cc9900
) by using the
border
property. You'll make the
rules between cells appear solid by using a
cellspacing
setting of
0
and increase the
white space between the cell contents and the borders of the cells by specifying a
cell-
padding
setting of
5
. The new table definition now looks like the following:
10
<table summary=“drive belt deflection”
style=“background-color: #ffffcc; border: 5px solid #cc9900”
cellspacing=”0”cellpadding=“5”
>
Now create the first row. With the grid on your picture, you can see that the first cell is
empty and spans two rows and two columns (see Figure 10.26). Therefore, the HTML
for that cell would be as follows:
<tr>
<th rowspan=“2” colspan=“2”></th>
FIGURE 10.26
The first cell.
