Question

我收到一条警告说：

警告：表格行宽1列，小于第1行（2）建立的列数。

当我验证我的HTML源页面时。我试图解决这个问题，但它似乎破坏了表格的外观。任何人都可以指出我如何修复此错误并保持表格图像完好无损？谢谢！

以下是目前的表格图片：

TABLE IMAGE

这是我的页面源代码：

<table class="tableStyle">
  <caption>Horizontal and Vertical Alignment</caption>
  <tr>
    <th colspan="5">Cell Alignment With CSS</th>

  </tr>
  <tr>
    <th class="alignCentre" rowspan="4">Examples</th>
    <th>Row</th>
    <th>Cell-1</th>
    <th>Cell-2</th>
    <th>Cell-3</th>
  </tr>
  <tr>
    <th class="cellHeight">3</th>
    <td class="cellHeight vat hol">CSS</td>
    <td class="cellHeight hol">CSS</td>
    <td class="cellHeight vab hol">CSS</td>
  </tr>
  <tr>
    <th class="cellHeight">4</th>
    <td class="cellHeight vat">CSS</td>
    <td class="cellHeight">CSS</td>
    <td class="cellHeight vab">CSS</td>
  </tr>
  <tr>
    <th class="cellHeight">5</th>
    <td class="cellHeight vat hor">CSS</td>
    <td class="cellHeight hor">CSS</td>
    <td class="cellHeight vab hor">CSS</td>
  </tr>
</table>
<hr>

<!-- This is the second table of the page which contains the nested   table -->

<table class="tableStyle">
  <caption>Horizontal and Vertical Alignment</caption>
  <tr>
    <th colspan="2">Cell Alignment With CSS</th>
  </tr>
  <tr>
    <th class="alignCentre" rowspan="2">Examples</th>
  </tr>
  <tr>
    <th>

      <!-- This is the nested table & note the new class -->
      <table class="tableStyle2">
        <caption class="captionBottom">Nested Table</caption>
        <tr>
          <td>Row</td>
          <td>Cell-1</td>
          <td>Cell-2</td>
          <td>Cell-3</td>
        </tr>

        <tr>
          <th class="cellHeight">3</th>
          <td class="cellHeight vat hol">CSS</td>
          <td class="cellHeight hol">CSS</td>
          <td class="cellHeight vab hol">CSS</td>
        </tr>
        <tr>
          <th class="cellHeight">4</th>
          <td class="cellHeight vat">CSS</td>
          <td class="cellHeight">CSS</td>
          <td class="cellHeight vab">CSS</td>
        </tr>
        <tr>
          <th class="cellHeight">5</th>
          <td class="cellHeight vat hor">CSS</td>
          <td class="cellHeight hor">CSS</td>
          <td class="cellHeight vab hor">CSS</td>
        </tr>
      </table>
</table>

Answer 1

您的第二个表格以一个跨越两列的单元格开头：

<!-- This is the second table of the page which contains the nested   table -->

<table class="tableStyle">
  <caption>Horizontal and Vertical Alignment</caption>
  <tr>
    <th colspan="2">Cell Alignment With CSS</th>
  </tr>

然后是两个单列行，其中一行包含嵌套表：

  <tr>
    <th class="alignCentre" rowspan="2">Examples</th>
  </tr>
  <tr>
    <th>

      <!-- This is the nested table & note the new class -->
      <table class="tableStyle2">

根据您的图像判断，您可能意味着将两个单列行合并为一个。您可能也不需要rowspan="2"，因为嵌套表位于其自己的单元格中，不会跨越多行。

以下是我将如何修复它：

<!-- This is the second table of the page which contains the nested   table -->

<table class="tableStyle">
  <caption>Horizontal and Vertical Alignment</caption>
  <tr>
    <th colspan="2">Cell Alignment With CSS</th>
  </tr>
  <tr>
    <th class="alignCentre">Examples</th>
    <th>

      <!-- This is the nested table & note the new class -->
      <table class="tableStyle2">

包含嵌套表的tr和th也缺少其结束标记。他们并不一定要在那里，但你可能想要添加它们以便它们与你所有其他表格元素保持一致，并且你不会对它们为什么丢失感到困惑：

      </table>
    </th>
  </tr>
</table>

HTML表格警告？

1 个答案: