由元素 th 建立的范围 3...4 中的表列没有以它们开头的单元格答案

【问题标题】：Table columns in range 3...4 established by element th have no cells beginning in them由元素 th 建立的范围 3...4 中的表列没有以它们开头的单元格
【发布时间】：2015-01-14 11:25:05
【问题描述】：

我正在用 HTML5 编写一个带有表头和表体的表。在使用 Sublime Text 3 W3C Validator 进行验证时，我收到错误消息：“由元素 th 建立的范围 3...4 中的表列没有以它们开头的单元格”。这可能是一个错误还是我表格编码不正确？ 请在下面找到表格代码：

<table>
    <thead>
        <tr>
        <th colspan="5"><a id="button01" href="#" title="Learn More">Learn More</a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="1">A</td>
            <td colspan="3">Item A</td>
            <td colspan="1"><span class="bullet">*</span></td>
        </tr>
        <tr>
            <td colspan="1">B</td>
            <td colspan="3">Item B</td>
            <td colspan="1"><span class="bullet">*</span></td>
        </tr>
        <tr>
            <td colspan="1">M</td>
            <td colspan="3">Traditional (DIN-compliant flange)</td>
            <td colspan="1"><span class="bullet">*</span></td>
        </tr>
    </tbody>
</table>

【问题讨论】：

标签： html html-table cells col

【解决方案1】：

为了解决这个错误，我使用 colspan="1" 而不是 colspan="3" 并更改了表头 colspan="5" 到 colspan="3"。这消除了 W3C HTML5 Validator 错误。我还包含了我用来根据自己的需要设置样式的 css。

代码如下：

<table>
  <thead>
    <tr>
      <th colspan="3"><a id="button01" href="#" title="Learn More">Learn More</a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1">A</td>
      <td colspan="1">Item A</td>
      <td colspan="1"><span class="bullet">*</span>
      </td>
    </tr>
    <tr>
      <td colspan="1">B</td>
      <td colspan="1">Item B</td>
      <td colspan="1"><span class="bullet">*</span>
      </td>
    </tr>
    <tr>
      <td colspan="1">M</td>
      <td colspan="1">Traditional (DIN-compliant flange)</td>
      <td colspan="1"><span class="bullet">*</span>
      </td>
    </tr>
  </tbody>
</table>

/*
 * Table Components
 */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 20px;
}
thead {
  background: #EEE;
  font-weight: bold;
}
td {
  border: 1px solid #222;
  padding: .35em;
  vertical-align: middle;
}
td:first-child {
  width: 10%;
}
td:last-child {
  width: 5%;
}

【讨论】：