HTML 验证错误 - 由元素 th 建立的范围 4…5 中的表列没有以它们开头的单元格

Question

编辑：我使用了 W3 验证器。 当我尝试验证我的 html 代码时遇到问题。我试图用谷歌搜索答案，但似乎找不到解决方法。如果有人可以向我解释导致错误的原因以及如何解决它，我会很高兴。 错误消息：第 80 行，第 19 列：由元素 th 建立的范围 4…5 中的表列没有以它们开头的单元格。 th colspan="6"Köpt utrustning/th.
这是与该表相关的代码：

        <div id="tabell2Space">
    <div id="tabell2">
    <table>
        <tr>
            <th colspan="6">Köpt utrustning</th>
        </tr>

        <tr>
            <th rowspan="2">Artikelnummer#</th>
            <th rowspan="2">Artikelbild</th>
            <th colspan="3">Beskrivning</th>
            <th>Pris</th>
        </tr>

        <tr>
            <th colspan="3">Frakt, installation, etc</th>
            <th>Kostnad</th>
        </tr>

        <tr>
            <td rowspan="2">1.</td>
            <td rowspan="2"><img alt="Dator" src="Bilder/pryl2.jpg"></td>
            <td colspan="3">IMB Clone computer</td>
            <td>$ 400.00</td>
        </tr>

        <tr>
            <td colspan="3">Frakt, installation, etc</td>
            <td>$ 20.00</td>
        </tr>

        <tr>
            <td rowspan="2">2.</td>
            <td rowspan="2"><img alt="Datorkomponent" src="Bilder/pryl1.jpg"></td>
            <td colspan="3">1GB RAM Module</td>
            <td>$ 50.00</td>
        </tr>

        <tr>
            <td colspan="3">Frakt, installation, etc</td>
            <td>$ 14.00</td>
        </tr>

        <tr>
            <th colspan="6">Köpt utrustning</th>
        </tr>
</table>
</div>
</div>

感谢任何帮助！

Answer 1

表格结构违反了 HTML 表格模型，该模型现已在 HTML5 中正式化，W3C HTML5 验证器会对其进行检查。该模型在 HTML5 规范的第 4.9 章表格数据的第 4.9.12 节Processing model 中进行了描述。这有点技术性，但重点是表格由行和列组成，它们定义了一个槽网格，每个槽必须有一个单元格开始。

在您的情况下，真正的问题是您声明了六列，但第 4 列和第 5 列中的插槽没有从它们开始的单元格。换句话说，可能更有用的方式是，您的表格实际上只有四列（正如@PHJCJO 建议的那样，您可以看到是否在单元格周围添加边框），但是您已经声明了其他内容，就好像第三个真正的列由三列。

解决方法是删除所有执行此操作的colspan="3" 属性，并相应地将colspan="6" 更改为colspan="4"。下面的代码实现了这一点，验证并创建了相同的渲染，除了第三列的宽度，如果需要，应该在 CSS 中设置。为了清楚起见，此处包含边框。

 <div id="tabell2Space">
    <div id="tabell2">
    <table border>
        <tr>
            <th colspan="4">Köpt utrustning</th>
        </tr>

        <tr>
            <th rowspan="2">Artikelnummer#</th>
            <th rowspan="2">Artikelbild</th>
            <th>Beskrivning</th>
            <th>Pris</th>
        </tr>

        <tr>
            <th>Frakt, installation, etc</th>
            <th>Kostnad</th>
        </tr>

        <tr>
            <td rowspan="2">1.</td>
            <td rowspan="2"><img alt="Dator" src="Bilder/pryl2.jpg"></td>
            <td>IMB Clone computer</td>
            <td>$ 400.00</td>
        </tr>

        <tr>
            <td>Frakt, installation, etc</td>
            <td>$ 20.00</td>
        </tr>

        <tr>
            <td rowspan="2">2.</td>
            <td rowspan="2"><img alt="Datorkomponent" src="Bilder/pryl1.jpg"></td>
            <td>1GB RAM Module</td>
            <td>$ 50.00</td>
        </tr>

        <tr>
            <td>Frakt, installation, etc</td>
            <td>$ 14.00</td>
        </tr>

        <tr>
            <th colspan="4">Köpt utrustning</th>
        </tr>
</table>
</div>
</div>

Answer 2

在语义上，使用<th>（表示行/列标题）后应跟一个或多个<th>s，除非<th> 在<thead> 中。我会使用<td colspan="6">Köpt utrustning</td> 而不是<th>，如果你想要这样的效果，只需将其设置为粗体即可。