birdy birdy - 9 months ago 42
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:

I can't figure out how to make those


Answer Source

You need to use th with the attribute colspan.

        <th>Table header</th>
        <th colspan="5">Table header</th>
        <th>&nbsp; <!-- EMPTY --></th>
        <th>Lorem 1</th>
        <th>Lorem 2</th>
        <th>Lorem 3</th>
        <th>Lorem 4</th>
        <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>