Targeting Columns in Tables

Tweet

Although tables are built by row, you can target columns with the colgroup and col elements, allowing you to apply attributes, such as a class, to all of the cells in a column or groups of columns. Previously, we have seen about grouping rows, which can also be done using classes with a bit additional work.

Using colgroup

Colgroup allows attributes to be applied to set of columns and can be used on its own, along with the span attribute(just like merging cells).

<table>
        <caption>Yuvraj Singh</caption>
        <colgroup span="4" class="alternative"></colgroup>
        <tr>
            <th>&nbsp;</th>
            <th>Mat</th>
            <th>Inns</th>
            <th>Runs</th>
            <th>HS</th>
            <th>Ave</th>
            <th>100</th>
            <th>50</th>
        </tr>
        <tr>
            <th>Tests</th>
            <td>37</td>
            <td>57</td>
            <td>1775</td>
            <td>169</td>
            <td>34.80</td>
            <td>3</td>
            <td>10</td>
        </tr>
        <tr>
            <th>ODIs</th>
            <td>274</td>
            <td>252</td>
            <td>8051</td>
            <td>139</td>
            <td>37.62</td>
            <td>13</td>
            <td>49</td>
        </tr>
        <tr>
            <th>T20Is</th>
            <td>29</td>
            <td>27</td>
            <td>667</td>
            <td>70</td>
            <td>30.31</td>
            <td>0</td>
            <td>5</td>
        </tr>
</table>

As the span attribute targets the first four columns, we can use some CSS to make a difference from the other columns.

Adding col elements

Colgroup can also be targeted with col elements to focus on individual columns.

<table>
        <caption>Yuvraj Singh</caption>
        <colgroup>
            <col />
            <col class="alternative" />
            <col />
            <col class="alternative" />
            <col />
            <col class="alternative" />
            <col />
            <col class="alternative" />
        </colgroup>
        <tr>
            <th>&nbsp;</th>
            <th>Mat</th>
            
            ...
            ... <!-- some texts missing here -->
            ...

            <td>70</td>
            <td>30.31</td>
            <td>0</td>
            <td>5</td>
        </tr>
</table>

Adding some CSS,

Adding span attribute to col element

By mixing the span attribute to col elements, it's now became much easier to target a big column table with little effort.

<table>
        <caption>Yuvraj Singh</caption>
        <colgroup>
            <col />
            <col span="7" class="alternative" />
        </colgroup>
        <tr>
            <th>&nbsp;</th>
            <th>Mat</th>
            
            ...
            ... <!-- some texts missing here -->
            ...

            <td>70</td>
            <td>30.31</td>
            <td>0</td>
            <td>5</td>
        </tr>
</table>

The above code and picture clarifies that the second col element targets the next seven columns using the span attribute.