html table header rowspan to center headers

Question

I have a table like this :

<table border="1">
<thead>        
    <tr>
        <th colspan="2">Items</th>
        <th colspan="2">Type</th>
        <th colspan="4">Values</th>
        <th colspan="2">Date</th>
    </tr>        
    <tr>
        <th colspan="2"></th>
        <th colspan="2"></th>
        <th colspan="2">Before</th>
        <th colspan="2">After</th>
        <th colspan="2"></th>
    </tr>
</thead>
<tbody></tbody>

In the header of the table, I would like to have the headers Items , Type and Date to be centered vertically. I tried using rowspan="2" on these headers, but that didn't work. Any idea please?

Answer 1

When using rowspan , you have to not add the columns in the next rows (or as much rows as the rowspan number minus one ).

Your demo, updated :

<table border="1">
    <thead>
        <tr>
            <th rowspan="2">Items</th>
            <th rowspan="2">Type</th>
            <th colspan="4">Values</th>
            <th rowspan="2">Date</th>
        </tr>
        <tr>
            <th colspan="2">Before</th>
            <th colspan="2">After</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Note: If you remove the Before and After colspan , your Values colspan can be just 2 .

Answer 2

<table border="1">
<thead>        
    <tr>
        <th colspan="2" rowspan="2">Items</th>
        <th colspan="2" rowspan="2">Type</th>
        <th colspan="4">Values</th>
        <th colspan="2" rowspan="2">Date</th>
    </tr>        
    <tr>
        <th colspan="2">Before</th>
        <th colspan="2">After</th>
    </tr>
</thead>
<tbody></tbody>

Answer 3

<table border="1">
<thead>        
    <tr>
        <th rowspan="2">Items</th>
        <th rowspan="2">Type</th>
        <th colspan="2">Values</th>
        <th rowspan="2">Date</th>
    </tr>        
    <tr>
        <th>Before</th>
        <th>After</th>
    </tr>
</thead>
<tbody></tbody>