HTML表格设计

Question

我需要以这种所需的格式显示我的表。

​

​

我不确定如何在超级列(8月18日)下的列(AA，MQ)中实现列。

Answer 1

你需要以另一种方式来思考它。

月份标题是两列的标题，它们不是包含多列的单列。

使用the colspan attribute使标题跨越多个列。

​

table,
th,
td {
  border-collapse: collapse;
  border: solid #aaa 1px;
  padding: 1ex;
}

<table>
    <thead>
        <tr>
            <td>
            <th scope=col colspan=2> Aug-18
            <th scope=col colspan=2> Sep-18
        <tr>
            <td>
            <th scope=col> AA <!-- These should probably have <abbr> elements -->
            <th scope=col> MQ
            <th scope=col> AA 
            <th scope=col> MQ
    <tbody>
        <tr>
            <th scope=row> Count1
            <td> 0
            <td> 0
            <td> 0
            <td> 0
        <tr>
            <th scope=row> Count2
            <td> 0
            <td> 0
            <td> 0
            <td> 0
        <tr>
            <th scope=row> Count3
            <td> 0
            <td> 0
            <td> 0
            <td> 0
    <tfoot>
        <tr>
            <th scope=row> Total
            <td> 0
            <td> 0
            <td> 0
            <td> 0
</table>

​

Answer 2

​

.this-tbl { width: 100%; }
th, td {
border: 1px solid #333;
padding: 4px;
border-collapse: collapse;
}

<table cellspacing="0" class="this-tbl">
    <tr>
	<th></th>
	<th colspan="2">Aug-18</th>
	<th colspan="2">Sep-18</th>
	<th colspan="2">Oct-18</th>
	<th colspan="2">Nov-18</th>
    </tr>
    <tr>
	<td></td>
	<td>AA</td>
	<td>MQ</td>
	<td>AA</td>
	<td>MQ</td>
	<td>AA</td>
	<td>MQ</td>
	<td>AA</td>
	<td>MQ</td>
    </tr>

    <tr>
	<td>Count1</td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
    </tr>
    <tr>
	<td>Count2</td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
    </tr>
    <tr>
	<td>Count3</td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
    </tr>
    <tr>
	<td>Total</td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
    </tr>
</table>

​