HTML表格验证colspan问题答案

【问题标题】：HTML table validation colspan issueHTML表格验证colspan问题
【发布时间】：2018-06-24 15:59:19
【问题描述】：

我有这个 html 表格：

<fieldset class="form login">
    <legend>Authorization</legend>
    <table>
      <tbody>
        <tr>
          <td colspan="1">
            <label class="form__label" for="login">Login</label>
          </td>
          <td colspan="3">
            <input id="login" type="email" required="required">
          </td>
        </tr>
        <tr>
          <td colspan="1">
            <label class="form__label" for="password">Password</label>
          </td>
          <td colspan="3">
            <input id="password" type="password" required="required">
          </td>
        </tr>
        <tr>
          <td class="text-center" colspan="4"><input type="submit"></td>
        </tr>
      </tbody>
    </table>
  </fieldset>

当我通过验证器 (validator.w3.org) 运行它时，我得到一个错误：

Error: Table columns in range 3…4 established by element td have no cells beginning in them.

From line 21, column 16; to line 22, column 26

     </td>↩          <td colspan="3">↩

这是什么意思？我找到了这个答案：
Help with HTML validation error: Table column has no cells beginning in it

但仍然不明白我必须做什么才能使其有效？

【问题讨论】：

可能是因为您想要跨越的列数少于表中的列数。尝试扩大减少colspan值的表格
将 colspan 3 减少到 2 - 不起作用，事实上，会出现更多错误：表格行宽 4 列，超过了第一行 (3) 建立的列数。

标签： html html-table w3c-validation

【解决方案1】：

您的表格有三行：
```
Row 1:
Row 2:
Row 3:
```
在第 1 行和第 2 行中，您在第 1 列中有一个单元格，而在第 2 列到第 4 列中有一个单元格

在第 3 行中，您有一个跨列 1 到 4 列的单元格

Row 1: | cell 1,1 | cell 1,2-4 |
Row 2: | cell 1,1 | cell 1,2-4 |
Row 3: | cell 1,1-4            |

验证器查看此表并抱怨说，尽管标记说实际上有 4 列，但实际上只有 2 列。

因此解决方案是将第 1 行和第 2 行中的 colspan="3" 替换为 colspan="1"（或完全放弃，因为 colspan="1" 没有意义），并在第 3 行中将 colspan="4" 替换为 colspan="2"。通过这种方式，标记与表格的实际方面对齐。

【讨论】：