验证器给出表错误

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仅在一个单元格应在水平或垂直方向上跨两个其他单元格时才使用，在您的示例中不是这种情况。它们不是用来定义宽度或高度的。

因此，删除它们并使用类来定义所需的属性：

除此之外，删除其中存在的空tr元素-如果没有td，则没有意义。同样，嵌套表中只有一个单元格是很奇怪的（您可以只用内容填充该单元格），但是也许有一个原因您没有告诉我们。

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>