Как я могу охватить один столбец на 2 строки?

Question

У меня есть мой код:

       <table>
            <caption>Average salary</caption>
            <tr>
                <th colspan="2">Occupation</th>
                <th colspan="2">Salary (kr)</th>
            </tr>
            <tr>

                <th colspan="2"></th>
                <th>Men</th>
                <th>Women</th>
            </tr>
            <tr>
                <td colspan="2">Assistant nurse</th>
                <td>24 500</td>
                <td>24 800</td>

            </tr>
             <tr>
                <td colspan="2">Consultant system development</th>
                <td>43 000</td>
                <td>43 500</td>

            </tr>


        </table>

, и это выглядит так

как я могу сделать "занятие" "заголовок охватывает два первых ряда также? Просто добавление rowspan после colspan не работает.

Answer 1

Вы можете добавить rowspan="2" к первой ячейке, но затем вам нужно пропустить первую ячейку во второй строке:

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

 <table>
            <caption>Average salary</caption>
            <tr>
                <th colspan="2" rowspan="2">Occupation</th>
                <th colspan="2">Salary (kr)</th>
            </tr>
            <tr>
                <th>Men</th>
                <th>Women</th>
            </tr>
            <tr>
                <td colspan="2">Assistant nurse</th>
                <td>24 500</td>
                <td>24 800</td>

            </tr>
             <tr>
                <td colspan="2">Consultant system development</th>
                <td>43 000</td>
                <td>43 500</td>

            </tr>


        </table>

Answer 2

Сделайте это следующим образом: <th colspan="2" rowspan="2">Occupation</th>

Вы должны также указать размах строк, чтобы расширить до двух рядов.