Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2020

## Using "col" and "colgroup"

`col` and `colgroup` elements can be used to as a way to apply styles (style or class attribute) to columns.

Example 3.26 - 'colgroup' element - Example 3.26 | Example 3.26 JSFiddle

- Markup
- Display

    <table>
    <caption>United States Urban and Rural Populations</caption>
    <colgroup span="1">
    <col span="1" style="background-color: lightsalmon;"/>
    <col span="2" style="background-color: wheat;"/>
    </colgroup>
    <thead>
    <tr>
    <th scope="col">Year</th>
    <th scope="col">Percent Urban</th>
    <th scope="col">Percent Rural</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th scope="row">2010</th>
    <td>80.3</td>
    <td>19.7</td>
    </tr>
    <tr>
    <th scope="row">2000</th>
    <td>79.2</td>
    <td>20.8</td>
    </tr>
    <tr>
    <th scope="row">1950</th>
    <td>64.0</td>
    <td>36.0</td>
    </tr>
    <tr>
    <th scope="row">1900</th>
    <td>39.6</td>
    <td>60.4</td>
    </tr>
    <tr>
    <th scope="row">1850</th>
    <td>15.4</td>
    <td>84.6</td>
    </tr>
    <tr>
    <th scope="row">1800</th>
    <td>6.1</td>
    <td>93.9</td>
    </tr>
    </tbody>
    </table>

United States Urban and Rural Populations
Year | Percent Urban | Percent Rural
--- | --- | ---
2010 | 80.3 | 19.7
2000 | 79.2 | 20.8
1950 | 64.0 | 36.0
1900 | 39.6 | 60.4
1850 | 15.4 | 84.6
1800 | 6.1 | 93.9

Copyright © David Heitmeyer