ptg16476052270 LESSON 10: Building Tables
There are actually five rows and columns in this table. Do you see them? Some of them
span columns and rows. Figure 10.23 shows the same table with callouts drawn over it so
that you can see where the rows and columns are.
With tables such as this one that use many spans, it’s helpful to draw this sort of grid to
figure out where the spans are and in which row they belong. Remember, spans start at
the topmost row and the leftmost column.Column 1Row 1Column 2Column 3
Column 4
Column 5Row 2 Row 3 Row 4 Row 5Ready? 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">
<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 whitespace between the cell contents and the borders of the cells by specifying a
cellpadding setting of 5. The new table definition now looks like the following:
<table border="1" style="background-color: #ffffcc; border: 5px solid #cc9900;
border-collapse: collapse;">FIGURE 10.23
Five columns, five
rows.▼▼