HTML and CSS Reference
In-Depth Information
Figure 2.20 has additional padding in the table cells because the width attri-
bute sets a minimum width of 80 percent of the available space for the table,
causing the cells to be stretched horizontally.
To make even fancier tables, web developers use the
rowspan
and
colspan
attributes. Example 2.21 illustrates these techniques.
Example 2.21: A table with spanned rows and columns
<!DOCTYPE html>
<html>
<head>
<title>Example 2.21</title>
<style type="text/css">
body { padding: 36px; }
th, td { padding: 3px 6px; }
th { text-align: left; }
td { text-align: right; }
caption { font-style: italic; }
</style>
</head>
<body>
<table border="2">
<caption align="bottom">
The Inner Planets
</caption>
<tr>
<th rowspan="2"></th>
<th colspan="2">
Distance from sun
</th>
<th rowspan="2">
Year
<br/>
Length
</th>
<th rowspan="2">
Day
<br/>
Length
</th>
</tr>
<tr>
<th>
Kilometers
</th><th>
AUs
</th>
</tr>
<tr>
<th>
Mercury
</th>
<td>
57,900,000
</td><td>
.38
</td><td>
88 days
</td><td>
59 days
</td>
</tr>
<tr>
continues
