birdy birdy - 1 month ago 7
CSS Question

How to create an html table with captions for column and row sections

I'm trying to make an html table similar to this:

enter image description here

I'm not interested in the data for the table but just the barebones: Likelihood, Consequence, column names (minor, moderate, etc) and rows (almost certain, likely, etc).

This is what I have so far: http://jsfiddle.net/PQHR6/

I can't figure out how to make those

Likelihood
and
Consequence
headers

Answer

You need to use th with the attribute colspan.

    <tr>
        <th>Table header</th>
        <th colspan="5">Table header</th>
    </tr>
    <tr>
        <th>&nbsp; <!-- EMPTY --></th>
        <th>Minor</th>
        <th>Lorem 1</th>
        <th>Lorem 2</th>
        <th>Lorem 3</th>
        <th>Lorem 4</th>
    </tr>
    <tr>
        <th>Almost Certain</th>
        <td>Table cell 1</td>
        <td>Table cell 2</td>
        <td>Table cell 3</td>
        <td>Table cell 4</td>
        <td>Table cell 5</td>
    </tr>

jsfiddle: http://jsfiddle.net/nPQfz/