Question

我似乎无法弄清楚验证显示“表行为2列宽，并且超出了第一行建立的列数（1）”的问题，而表行为3列宽，超出了此问题还显示了一个错误：“由元素td建立的表第3列中没有任何单元格开始。” 这些警告和错误以</table>（嵌入式表）之后的最后五个代码为准。

我的桌子在互联网上发布时看起来不错，但不会经过验证。在我的HTML代码中找不到问题。

我尝试添加和删除<tr>和<td>，但似乎做得不好。

<table style="width:600px;">
  <tr>
    <td rowspan="2">A</td>
  </tr>
  <tr>
    <td>
      <table style="width:100%;">
        <tr>
          <td>A</td>
          <td>B</td>
        </tr>
        <tr>
          <td>C</td>
          <td>D</td>
        </tr>
      </table>
  <tr><!--this is where the first warning appears-->
    <td>C</td> 
    <td colspan="2">D</td>
  </tr>
</table>

警告：“表行宽2列，超过了第一行建立的列数（1）” “表行为3列宽，超过了第一行（1）确定的列数”。错误：“由元素td建立的表第3列中没有任何单元格。”

Answer 1

您的第二行（包含嵌套表）没有</td>和</tr>结束标记。

您始终可以打开表格边框来查看跨/嵌套单元格的外观。另外，请始终使用适当的缩进来了解元素的层次结构。

要使用CSS打开边框，请查看以下问题：Can I replace <table border=1>' with `<table>` + css: `table{...}`?。

<!-- turned on a deprecated border to attribute to make it clear where the table cells are -->
<table style="width:600px;" border="1">

    <tr>
        <td rowspan="2">A</td>
    </tr>
    <tr>
        <td>

            <!-- I've commented out the inner table for lesser complexity -->

<!--            <table style="width:100%;">-->
<!--                <tr>-->
<!--                    <td>A</td>-->
<!--                    <td>B</td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                    <td>C</td>-->
<!--                    <td>D</td>-->
<!--                </tr>-->
<!--            </table>-->

            B <!-- added to see where this cell is -->
        </td> <!-- this td was not closed! -->
    </tr> <!-- this tr was not closed! -->

    <tr><!--this is where the first warning appears -->
        <td>C</td>
        <td colspan="2">D</td>
    </tr>
</table>

如何解决警告“表行为2列宽，超过了第一行（1）建立的列数。”

1 个答案: