Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Table with colgroup – HTML



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


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

  <caption>Caption for table</caption>

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

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

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

      <th>Row Header</th>
      <td>Cell 3</td>
      <td>Cell 4</td>

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.


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


colgroup – MDN

Lesson tags: Open Lesson
Back to: HTML Reference > HTML Tables