HTML Coding

Tables: Row Span

NOTE: These pages will remain available for your reference, but will not actively be maintained due to UW-Eau Claire's adoption of FrontPage for web publishing.

Varying the span of rows in a table can be helpful for grouping information, adding emphasis, or eliminating empty cells. In the first example below, an empty cell would have occurred below "green" in the second row, as there is no data to fill in; adjusting the row span makes it clear that "green" is the only entry. In the second example, adding the ROWSPAN attribute to the <TD> code allowed using one cell for two rows. In order to adjust the row span of one cell, place the ROWSPAN attribute before the data within the <TD> code for that cell.

A Table With Row Span

Red	Green	Blue
Orange	Green	Purple

<TABLE BORDER=1>
<TR>
<TD>Red</TD>
<TD ROWSPAN=2>Green</TD>
<TD>Blue</TD>
</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Purple</TD>
</TR>
</TABLE>

A Table With Side Header Row Span

Colors 1	Red	Green	Blue
Colors 1	Orange	Yellow	Purple
Colors 2	Pink	Gray	White
Colors 2	Black	Tan	Cream

<TABLE BORDER=1>
<TR>
<TH ROWSPAN=2>Colors 1</TH>
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD> <TD>Purple</TD> </TR> <TR>
<TH ROWSPAN=2>Colors 2</TH>
<TD>Pink</TD>
<TD>Gray</TD>
<TD>White</TD>
</TR>
<TR>
<TD>Black</TD>
<TD>Tan</TD>
<TD>Cream</TD>
</TR>
</TABLE>