HTML HTML colgroup Span Rules and Examples

Colgroup can contain col elements and may use span to describe several adjacent columns. Col itself can also use span for a group of columns. Before writing the code, picture the information as a small grid. Each label should help a reader understand the value next to it.

What You Need to Know

A colgroup with child col elements should not also use span to define its columns in the same way. These elements describe columns; they do not replace cells.

Browsers often insert tbody into the DOM for rows written directly under table, even if the source omits tbody.

Example: See It in Action

Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<table>
    <colgroup><col span="1"><col span="2" class="scores"></colgroup>
    <tr>
        <th>Student</th>
        <th>Math</th>
        <th>English</th>
    </tr>
    <tr>
        <td>Alex</td>
        <td>91</td>
        <td>88</td>
    </tr>
</table>

Let’s Understand the Example

• Table represents information whose row and column relationships matter.
• Th is a header cell. Its text explains what nearby data cells mean.
• Class is a reusable label for styling or scripts; several elements may share the same class.

Look at a data cell and ask: “What row and column does this value belong to?” The header elements help answer that question, including for people who navigate the table with a screen reader.

What Should You See?

You should see a grid for the data table, with headers such as “Student”, “Math”, “English”. The browser displays cells, but meaningful table markup also helps readers connect each cell to its labels.

Read the first data row aloud together with its column labels. If you cannot explain a value without pointing to its position on screen, strengthen the headers.

Try It Yourself

1. Identify exactly which columns the second col element represents.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Using colgroup span and child cols together without understanding which columns are covered.
• Do not replace actual header cells with bold ordinary cells. Header markup is part of the meaning, not just the appearance.

Key Takeaways

• Colgroup can contain col elements and may use span to describe several adjacent columns.
• Table represents information whose row and column relationships matter.
• Browsers often insert tbody into the DOM for rows written directly under table, even if the source omits tbody.