HTML Coding

Tables: Column Span

Note: The HTML pages are out-of-date and will not be updated.

Varying the span of columns 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 next to "green" in the third column, as there is no data to fill in; adjusting the column span makes it clear that "green" is the only entry. In the second example, adding the COLSPAN attribute to the <TD> code allows the titles to span two columns. In order to adjust the column span of one cell, place the column span attribute before the data within the <TD> or <TH> code for that cell.

A Table With Column Span

Red	Green
Blue	Orange	Purple

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

A Table With Header Column Span

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

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