HTML and CSS Reference
In-Depth Information
How to tell cells to span more than one row
What does it mean for a cell to span more than one row? Let's look at the entries
for Truth or Consequences, NM, in Tony's table again. The data cells for city,
altitude, and population span two rows , not one, while the date, temp, and diner
rating span one row, which is the normal, default behavior for data cells.
Diner
Rating
City
Date
Temp
Altitude
Population
Walla Walla, WA
June 15th
75
1,204 ft
29,686
4/5
Magic City, ID
June 25th
74
5,312 ft
50
3/5
Bountiful, UT
July 10th
91
4,226 ft
41,173
4/5
Last Chance, CO
July 23rd
102
4,780 ft
265
3/5
Truth or
Consequences,
NM
August 9th
93
4,242 ft
7,289
5/5
August 27th
98
4/5
Why, AZ
August 18th
104
860 ft
480
3/5
These c ells span t wo rows.
So, how do you do that in HTML? It's easier than you might think: you use the
rowspan attribute to specify how many rows a table data cell should take up, and
then remove the corresponding table data elements from the other rows that the cell
spans over. Have a look—it's easier to see than describe:
He re are the two ta ble
ro ws that have the New
Me xico data.
<tr>
<td rowspan="2">Truth or Consequences, NM</td>
<td class="center">August 9th</td>
<td class="center">93</td>
<td rowspan="2" class="right">4,242 ft</td>
<td rowspan="2" class="right">7,289</td>
<td class="center">5/5</td>
</tr>
<tr>
<td class="center">August 27th</td>
<td class="center">98</td>
<td class="center">4/5</td>
</tr>
The city is not
needed because
of the rowspan.
Then in the second row, we
specify just the columns we need
(date, temp, and a new rating).
Same with
altitude and
population
 
 
Search WWH ::




Custom Search