Column Groups

Welcome to our HTML help page!

Home | HTML-Index | Basic HTML | HTML Structure

Create Column Groups

The <COLGROUP> and <COL> tags allow you to create column groups in a table. Column groups divide a table into vertical sections,allowing you to format one or more columns of cells at the same time.

Use the <COLGROUP> tag to create structural column groups that divide your table into logical sections. For example, you may want to use one structural column group for a column containing headings and another structural column group for the rest of the columns in your table.

The <COL> tag allows you to create non-structural column groups that divide your table into sections without defining a structure for your table. This is useful when all of your columns contain the same type of information.

Type this:
down

<TABLE BORDER=10 WIDTH="75%" ALIGN=CENTER>
<COLGROUP SPAN="1"></COLGROUP>
<COLGROUP SPAN="3"></COLGROUP>
<TR VALIGN=TOP>
      <TH ROWSPAN=3>George's Products</TH>       <TH>Product Name</TH>       <TH>Price per unit</TH>       <TH>Units Available
</TH>
</TR>
<TR>
      <TD>Art Print</TD>
      <TD>$9.99</TD>
      <TD>40</TD>
</TR>
<TR>
      <TD>Books</TD>
      <TD>$3.99</TD>
      <TD>75</TD>
</TR>
</TABLE>

And you get the following:
down

George's Products	Product Name	Price per unit	Units Available
	Art Print	$9.99	40
	Books	$3.99	75

Once you have created column groups in a table you can format the column groups. For example, use the BGCOLOR with a COLGROUP or COL tag to add color to all the cells in a column group.

Type this:
down

<TABLE BORDER=10 BORDERCOLORDARK=DARKBLUE BORDERCOLORLIGHT=BLUE WIDTH="75%" ALIGN=CENTER>
<COLGROUP SPAN="1" BGCOLOR=moccasin></COLGROUP >
<COLGROUP SPAN="3" BGCOLOR=tan></COLGROUP >
<TR VALIGN=TOP>
        <TH ROWSPAN=3>George's Products</TH>
        <TH>Product Name</TH>
        <TH>Price per unit</TH>
        <TH>Units Available</TH>
</TR>
<TR>         <TD>Art Print</TD>
        <TD>$9.99</TD>
        <TD>40</TD>
</TR>
<TR>
        <TD>Books</TD>
        <TD>$3.99</TD>
        <TD>75</TD>
</TR>
</TABLE>

And you get the following:
down

George's Products	Product Name	Price per unit	Units Available
	Art Print	$9.99	40
	Books	$3.99	75

A table can contain both structural an non-structural column groups. This allows you to divide structural column groups (<COLGROUP>) into sections using non-structural column groups (<COL>). You do not need to include the SPAN attribute in a <COLGROUP> tag that is divided into non-structural column groups, since the <COL> tag define the number of columns in the structural column groups.

Type this:
down

<TABLE BORDER=2 ALIGN=CENTER>
<COLGROUP>
<COL SPAN="1" BGCOLOR=WHEAT>
<COL SPAN="1" BGCOLOR=SALMON>
<COL SPAN="1" BGCOLOR=PINK>
</COLGROUP>
<TR>
<TH>Score 1</TH>
<TH>Score 2</TH>
<TH>Average</TH>
</TR>
<TR>
<TD>50</TD>
<TD>75</TD>
<TD>62.5</TD>
</TR>
<TR>
<TD>45</TD>
<TD>72</TD>
<TD>58.5</TD>
</TR>
</TABLE>

And you get the following:
down

Score 1	Score 2	Average
50	75	62.5
45	72	58.5

My home page
Back to Top