html表标题行跨到中心标题

Question

我有一个像桌子这样 ：

<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>

在表格的标题中，我想将标题Items ， Type和Date垂直居中。 我尝试在这些标题上使用rowspan="2" ，但这没有用。 有什么想法吗？

Answer 1

使用rowspan ，不必在下一行中添加列（或与rowspan号减一的行数一样多）。

您的演示已更新 ：

<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>

注意：如果删除Before和After colspan ，你的Values colspan可以只是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>