HTML Table Column Group

HTML Table Column Group is used to specify a group of one or more columns to apply specific formatting to these column groups.

<colgroup> is the tag used to specify column group in HTML Table.

Examples

In the following example, we specify different background color for different columns using Column Group <colgroup> tag.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px solid;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="background:#facfd2">
        <col style="background:#f5e6ab">
        <col style="background:#b8e6bf">
      </colgroup>
      <thead>
        <th>Name</th>
        <th>Quantity</th> 
        <th>Available in (Months)</th> 
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>25</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
          <td>0.5</td>
        </tr>
        <tr>
          <td>Cherry</td>
          <td>36</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Conclusion

In this HTML Tutorial, we learned about HTML Table Column Group, and how to use it to format columns, with examples.