Advanced Tables

The <colgroup> and <col> elements let you apply styles to entire columns without repeating the style on every cell. Place <colgroup> right after the opening <table> tag (and the optional <caption>).

Column Groups and Styling

Each <col> inside a <colgroup> represents one column, left to right. The span attribute lets a single <col> represent multiple consecutive columns. You can style the column background, width, and border — though only a limited set of CSS properties work on <col>. For accessible, sortable, data-rich tables consider adding aria-sort on sortable headers.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Advanced Tables</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #bbb; padding: 8px 12px; }
    col.highlight { background: #fff9c4; }
  </style>
</head>
<body>
  <table>
    <caption>Product Comparison</caption>
    <colgroup>
      <col>                        <!-- Product column -->
      <col class="highlight">      <!-- Price column highlighted -->
      <col span="2">              <!-- Rating and Stock -->
    </colgroup>
    <thead>
      <tr>
        <th scope="col">Product</th>
        <th scope="col">Price</th>
        <th scope="col">Rating</th>
        <th scope="col">In Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Widget Pro</td><td>$49</td><td>4.5★</td><td>Yes</td></tr>
      <tr><td>Widget Lite</td><td>$19</td><td>4.0★</td><td>Yes</td></tr>
      <tr><td>Widget Max</td><td>$99</td><td>4.8★</td><td>No</td></tr>
    </tbody>
  </table>
</body>
</html>

HTML

Full Editor

Pro Tip

Never use HTML tables for page layout — use CSS Flexbox or Grid instead. Tables are semantically meant for tabular data; using them for layout confuses screen readers and makes responsive design very difficult.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned