#30DaysofHTML Day 25: < col > and < colgroup > 🦄

Grouping columns of information

Happy April 25!

At the end of our table unit, we have one more table scenario to consider. Yesterday, we discussed grouping rows with <thead>, <tbody>, and <tfoot>. That's not too hard, as a <tr> itself groups cells into a row, and we wrap <thead>, <tbody>, or <tfoot> around a row or several rows of data.

Far more complicated, though is what happens when tables have a column grouping? That's where <col> and <colgroup> come in.

Grouping columns

Let's say we want to create another table, this time comparing some of the rocky inner planets with two of the outer gas giants.

    <table>
        <caption>
            Comparing rocky inner planets and outer gas giants
        </caption>
        <thead>
            <tr>
                <td></td>
                <th scope="col">Venus</th>
                <th scope="col">Earth</th>
                <th scope="col">Jupiter</th>
                <th scope="col">Saturn</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Diameter (km)</th>
                <td>12,104</td>
                <td>12,756</td>
                <td>142,984</td>
                <td>120,536</td>
            </tr>
            <tr>
                <th scope="row">Length of Day (hours)</th>
                <td>2802.0</td>
                <td>24.0</td>
                <td>9.9</td>
                <td>10.7</td>
            </tr>
        </tbody>
    </table>

While this table has done a great job of identifying headings and their scope, we should consider Venus and Earth as a unit, and Jupiter and Saturn as another unit.

First, we can provide some grouping to this table with <colgroup> and <col>. These are placed at the top of the table, just after <caption> and before <thead>, if any.

<colgroup>
    <col>
    <col span="2" class="rocks">
    <col span="2" class="gas">
</colgroup>

As you see in the first HTML example, there are 5 columns per row. Within <colgroup> in the above example, we've accounted for all of these. The first column, which is where we've listed "diameter" and "length of day," is not grouped with the others. We then have groupings specified for columns 2-3 (Venus and Earth) and 4-5 (Jupiter and Saturn) using the span attribute. The class attribute is, as you’d expect, for styling purposes and is not required.

The final HTML looks like this:

<table>
    <caption>
        Comparing rocky inner planets and outer gas giants
    </caption>
    <colgroup>
        <col>
        <col span="2" class="rocks">
        <col span="2" class="gas">
    </colgroup>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Venus</th>
            <th scope="col">Earth</th>
            <th scope="col">Jupiter</th>
            <th scope="col">Saturn</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Diameter (km)</th>
            <td>12,104</td>
            <td>12,756</td>
            <td>142,984</td>
            <td>120,536</td>
        </tr>
        <tr>
            <th scope="row">Length of Day (hours)</th>
            <td>2802.0</td>
            <td>24.0</td>
            <td>9.9</td>
            <td>10.7</td>
        </tr>
    </tbody>
</table>

Styling columns

We could apply some styling to make this pretty. Notably, let's set a background color on our "rocks" and "gas" classes to see what happens:

th:first-child,
td:first-child {
    background-color: #fed330;
}
.rocks {
    background-color: #26de81;
}
.gas {
    background-color: #45aaf2;
}

And the result, with a few extra styles for borders, fonts, and padding, looks like this:

Keeping crazy tables accessible

How accessible is this crazy table? Very, according to the Web Accessibility Initiative (WAI). While we've covered the basics of <colgroup> and <col>, they've got a few more edge cases that might be of interest in their tutorials on irregular headers and multi-level headers.

<col> and <colgroup> demo

🖥 View the <col> and <colgroup> demo on CodePen.

Challenge: Tables for Tabular Data unit challenge! 🦄

👩🏽‍💻 Try today’s CodePen Challenge about all of the table elements you’ve learned in this unit, with a My Little Pony theme. When you’ve completed it, post your answer in our discussion in Substack.

More information and examples

📚 MDN: <col> and <colgroup>

📚 WHATWG: <col> and <colgroup>

📚 CSS-Tricks: A Complete Guide to the Table Element

📚 Web Accessibility Initiative: Tables with Irregular Headers and Tables with Multi-Level Headers

🎥 Advanced CSS Layouts at Frontend Masters with Jen Kramer (subscription required) - Scroll down to the “Tables and Forms” chapter.

🎥 HTML: Tables at LinkedIn Learning with Jen Kramer (subscription required)
Chapter 1: HTML and tables
Chapter 2: Styling tables in general
Chapter 3: Creating responsive and accessible tables