HTML Colgroup Tag Tutorial

The colgroup tag can only be used with the table element.

Here's an example of usage:

  <table width="460" border="1">
<colgroup span="2" style="width: 140px;"></colgroup>
<colgroup style="background-color: #cdc;" width="60"></colgroup>
  <tr>
  <th>Product</th>
  <th>Description</th>
  <th>Price</th>
  </tr><tr>
  <td>CSS Made Easy</td>
  <td>Learn CSS the easy way.</td>
  <td>$27.00</td>
  </tr><tr>
  <td>Tables Made Easy</td>
  <td>All about HTML tables.</td>
  <td>$17.00</td>
  </tr>
  </table>

Notice the first colgroup shows span="2" as an attribute and value. This is how multiple columns are grouped together. Close one colgroup before opening another. Note that you should not place any content between the opening <colgroup> tag and the closing </colgroup> tag.

While the "colgroup" element is supported by all major browsers, Firefox doesn't recognize many HTML attributes or CSS styles you should be able to use with it, so you'll need to test what works and what doesn't in Firefox when you use this element.

Here's how that table looks on a web page:

Based on your interest in this tutorial you may also be interested in:

• HTML COL Tag Tutorial
• Tables Made Easy
• HTML Tables Tutorial
• HTML Table Tags Reference Chart