Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

(singke) #1
ptg16476052

268 LESSON 10: Building Tables


Output ▼


Note that if a cell spans multiple rows, you don’t have to redefine it as empty in the next
row or rows. Just ignore it and move to the next cell in the row. The span fills in the spot
for you.
Cells always span downward and to the right. To create a cell that spans several columns,
you add the colspan attribute to the leftmost cell in the span. For cells that span rows,
you add rowspan to the topmost cell.
The following input and output example shows a cell that spans multiple rows (the cell
with the word Piston in it). Figure 10.21 shows the result.

Input ▼
<!DOCTYPE html>
<html>
<head>
<title>Ring Clearance</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2"> </th>
<th>Ring<br />
Clearance</th>
</tr>

<tr style="text-align: center;">
<th rowspan="2">Piston</th>
<th>Upper</th>
<td>3mm</td>
</tr>

<tr style="text-align: center;">
<th>Lower</th>

FIGURE 10.20
Using span set-
tings to widen a
column.
Free download pdf