Table with colgroup – HTML

Demo

Summary

The colgroup and col elements are used to style columns in a table.

Details

Here is an example of an HTML table with the colgroup and col elements:

<table>
  <caption>Caption for table</caption>

  <colgroup>
    <col span="1" class="table-col-1">
    <col span="2" class="table-col-2">
  </colgroup>

  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>Row Header</th>
      <td>Cell 1</td>
      <td> Cell 2</td>
    </tr>

    <tr>
      <th>Row Header</th>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </tbody>
</table>

The colgroup is used to wrap col elements.

The col element can have a span attribute and a class attribute. The span attribute takes a number as the value. The value determines how many columns the col element and its class attribute apply to. You will learn more about the class attribute in our CSS course.

Exercises

Recreate the embedded CodePen demo by typing out the HTML code in your index.html file.

References

colgroup – MDN

Lesson tags: Open Lesson

Back to: HTML Reference > HTML Tables