This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

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.

return to topA 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>

return to topA 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>
Excellence. Our Measure. Our Motto. Our Goal.