HTML表警告？

Question

我收到警告说：

警告:表行宽1列，小于第一行(2)建立的列计数。

当我验证我的HTML源页面时。我试图修复这个问题，但它似乎破坏了这张桌子的外观。有人能告诉我如何修复这个错误并保持表格图像完整吗？谢谢!

下面是当前的表映像：

​

​

这是我的页面源代码：

<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>