Валидатор выдает ошибки таблицы

Question

Я должен сделать стол, как

и у меня есть этот код:

    table, td, tr {
        border: 1px solid black;
    }
    td {
        width: 50px;
        height: 50px;
    }
    td[rowspan="2"] {
        height: 100px;
    }
    td[colspan="2"] {
        width: 100px;
    }

<div>
    <table>
        <tr>
            <td>a</td>
            <td colspan="2">b</td>
        </tr>
        <tr>
            <td rowspan="2">c</td>
            <td colspan="2" rowspan="2">
                <table>
                    <tr>
                        <td colspan="2" rowspan="2">d</td>
                    </tr>
                    <tr></tr>
                </table>
            </td>
        </tr>
        <tr></tr>
    </table>
</div>

Валидатор дает мне

и я не знаю, как их исправить.

Мне не нужны ошибки от валидатора, так как оно должно быть приемлемым по спецификации.

Answer 1

rowspans и colspans используются, только если ячейка должна охватывать 2 другие ячейки по горизонтали или вертикали, что не имеет место в вашем примере. Они не для определения ширины или высоты.

Удалите их и используйте классы, чтобы определить нужные свойства:

Кроме того, удалите те пустые tr элементы, которые у вас есть - они не имеют смысла без td s в них. ТАКЖЕ вложенная таблица с одной ячейкой довольно странная (вы могли бы просто заполнить эту ячейку содержимым), но, возможно, есть причина, о которой вы нам не сказали.

table, td, tr {
        border: 1px solid black;
    }
    td {
        width: 50px;
        height: 50px;
    }
    td.b {
        height: 100px;
    }
    td.a {
        width: 100px;
    }

<div>
    <table>
        <tr>
            <td>a</td>
            <td class="a">b</td>
        </tr>
        <tr>
            <td class="b">c</td>
            <td class="a b" >
                <table>
                    <tr>
                        <td class="a b">d</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>