HTML таблица дизайна

Question

Мне нужно отобразить мою таблицу в этом желаемом формате.

Я не уверен, как получить столбец в столбце (AA, MQ) в супер колонке (18 августа)).

Answer 1

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

Answer 2

Вы должны подумать об этом с другой стороны.

Заголовки месяца - это заголовки для двух столбцов, они не являются одним столбцом с несколькими столбцами внутри.

Создайтезаголовки охватывают несколько столбцов с атрибутом colspan .

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>