什么替代了 HTML5 表格中的 cellpadding、cellspacing、valign 和 align？答案

【问题标题】：What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?什么替代了 HTML5 表格中的 cellpadding、cellspacing、valign 和 align？
【发布时间】：2011-08-28 06:44:24
【问题描述】：

在 Visual Studio 中，我看到了以下警告：

验证 (HTML 5)：属性“cellpadding”不是元素“table”的有效属性。

验证 (HTML 5)：属性“cellspacing”不是元素“table”的有效属性。

验证 (HTML 5)：属性“valign”不是元素“td”的有效属性。

验证 (HTML 5)：属性“align”不是元素“td”的有效属性。

如果它们在 HTML5 中不是有效的属性，那么在 CSS 中用什么替换它们？

【问题讨论】：

我发现即使使用 HTML5，仍需要 cellpadding 和 cellspacing 属性。也就是说，在没有显式声明这些属性的情况下，将应用默认的填充和间距。因此，我发现我必须始终将它们设置为“0”的值才能使默认值无效。它们可能已被弃用，但浏览器尚未接受它们。默认值仍适用于 Chrome 版本 37。

标签： html css visual-studio css-tables

【解决方案1】：

/* cellpadding */
th, td { padding: 5px; }

/* cellspacing */
table { border-collapse: separate; border-spacing: 5px; } /* cellspacing="5" */
table { border-collapse: collapse; border-spacing: 0; }   /* cellspacing="0" */

/* valign */
th, td { vertical-align: top; }

/* align (center) */
table { margin: 0 auto; }

【讨论】：

值得注意的是，border-spacing 似乎只在在 table 上使用此属性时才起作用 "border-collapse:separate;"
@Samir -- 似乎float:right; 可以解决问题。 jsfiddle.net/HGFH7

【解决方案2】：

这应该可以解决您的问题：

td {
    /* <http://www.w3.org/wiki/CSS/Properties/text-align>
     * left, right, center, justify, inherit
     */
    text-align: center;
    /* <http://www.w3.org/wiki/CSS/Properties/vertical-align>
     * baseline, sub, super, top, text-top, middle,
     * bottom, text-bottom, length, or a value in percentage
     */
    vertical-align: top;
}

【讨论】：

仅供参考：从stackoverflow.com/questions/10367387/…移动

【解决方案3】：

或者，可以用于特定的表

 <table style="width:1000px; height:100px;">
    <tr>
        <td align="center" valign="top">Text</td> //Remove it
        <td class="tableFormatter">Text></td>
    </tr>
</table>

在外部文件中添加这个 css

.tableFormatter
{
width:100%;
vertical-align:top;
text-align:center;
}

【讨论】：

仅供参考：从stackoverflow.com/questions/10367387/…移动
不推荐内联css。
是的，你是对的。我不推荐。我们选择外部 css 文件 .ClassName{ width: 100%;文本对齐：居中；垂直对齐：顶部;}谢谢

【解决方案4】：

在特定的桌子上

<table style="border-collapse: separate; border-spacing: 10px;" >
    <tr>
      <td>Hi</td>
      <td>Hello</td>
    <tr/>
    <tr>
      <td>Hola</td>
      <td>Oi!</td>
    <tr/>
</table>

【讨论】：