当分配为 width="#%" 时，表格 > td 宽度的 HTML 5 验证错误答案

【问题标题】：HTML 5 validation error for tables > td width when assigned as width="#%"当分配为 width="#%" 时，表格 > td 宽度的 HTML 5 验证错误
【发布时间】：2012-04-03 15:01:29
【问题描述】：

错误详情：

td 元素的 width 属性已过时。改用 CSS。从第 81 行第 15 列开始；到第 82 行第 50 列：

<tr><td width="6%" class="texalign_right">Name:</t..

详情：

我目前的网站，我有 20 多张桌子和许多不同数量和大小的内部 td。我相信通过班级为每张桌子分配宽度，然后在 td 内会让我生病.. 为了避免这种情况，我可以简单地在具有“样式”属性的表中硬编码表和相应的 td（仅用于第一行）的宽度。这有意义吗？

更重要的是，当前表 # (20) 可能会增加到 (30 或 40)。

真的，我根本不喜欢硬编码！！所以如果有任何其他方法来处理表格宽度，我非常感兴趣..请帮助我..

【问题讨论】：

您有两个选择：您可以替换width 属性，或者您可以忍受验证错误。但是从您使用的表的数量来看，无论如何可能是重写的时候了。 Using tables for layout is evil.：P
如果你想那样做，你为什么要关心验证器？
你可能需要给每个 td 一个类属性，然后使用 CSS 来设置它的样式。这就是验证器告诉你的。我希望它是您在表格中显示的表格数据。

标签： html css html-validation

【解决方案1】：

您可以使用 HTML 5 的 <colgroup> 元素。然后您可以定义可以重复使用的不同类，以便

对于所有带有width=6% 的列，定义一个类colWidth6
对于所有带有width=8% 的列，定义一个类colWidth8

您无需为表本身定义单独的类。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style type="text/css">
            .colWidth6{width:6%}
            .colWidth8{width:8%}
        </style>
    </head>
    <body>
        <table border="1">
            <colgroup>
                <col class="colWidth6">
                <col class="colWidth8">
            </colgroup>
            <tbody>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

【讨论】：

非常感谢..“colgroup”造型 td 简直就是天堂！现在如何为表格分配不同的宽度（现在差不多 30 个）？就像 td 一样，对于每个“表格宽度”定义类，是否有意义？（不要忘记我们已经为单个 td 使用了宽度类）。我不认为，我们可以通过这种方式实现优化的 CSS。表格只会在站点内使用一次，但庞大的 CSS 在站点中很常见！为了更好的标记，我们可能会通过增加一些额外的字节来损害用户体验？？