我在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>
答案 0 :(得分:0)
要解决此错误,我使用了 colspan =&#34; 1&#34; 而不是 colspan =&#34; 3&#34; 并更改了表头 colspan =&#34; 5&#34; 指向 colspan =&#34; 3&#34; 。这消除了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>
&#13;
/*
* 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%;
}
&#13;