HTML <colgroup> and <col>: Column Metadata

Colgroup and col let you describe or style table columns. They belong inside table, before the main row groups. 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

These elements do not create data cells or merge visible grid cells. Use CSS for column styling and colspan on cells for spanning content.

Example: See It in Action

Take a look at this small piece of HTML. You can use it in a practice document and change the text to make it your own.

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 class="names"><col span="2" class="numbers"></colgroup>
    <tr>
        <th>Player</th>
        <th>Wins</th>
        <th>Losses</th>
    </tr>
    <tr>
        <td>Alex</td>
        <td>3</td>
        <td>1</td>
    </tr>
</table>

Let’s Understand the Example

• Colgroup groups columns for shared metadata or styling.
• Col describes one or more columns, usually for styling.
• 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 “Player”, “Wins”, “Losses”. 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. Change the number of columns in the grouped style and check the layout.
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

• Putting an entire table row inside colgroup.
• Do not replace actual header cells with bold ordinary cells. Header markup is part of the meaning, not just the appearance.

Key Takeaways

• Colgroup and col let you describe or style table columns.
• Colgroup groups columns for shared metadata or styling.
• These elements do not create data cells or merge visible grid cells. Use CSS for column styling and colspan on cells for spanning content.