将表格居中放置在TD内

Question

我有一个非常简单的问题：我需要将一个表格居中放置在TD元素内。如果我使用HTML 4，我会这样做：

​<table style="border:solid;width: 100%">
    <tr>
        <td align="center">
            <table style="border:solid; width:50%">
                <tr>
                    <td >I must be in the center</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

但我尽量避免使用已弃用的属性，而是采用CSS方式进行。我已经尝试过这种方法：

<td style="text-align:center">

还有这个：

<td style="margin: 0 auto">

表格在单元格的左侧，有什么建议？

- Carlos Gavidia-Calderon

---

基于表格的布局，不要！ - Elliot B.

我知道，但是我没有选择 :( - Carlos Gavidia-Calderon

几乎总是有选择的，哈哈。 - Chris W.

@ChrisW. 不适用于HTML电子邮件 :( - Nikita Popov

为什么基于表格的布局不好？我发现它们比在 CSS 中摆弄到天荒地老要简单。 - Ekanshdeep Gupta

Answer 1

你的想法是对的，margin:auto 0;只需要去掉0即可。

工作示例：http://jsfiddle.net/cxnR8/

<table style="border:solid;width: 100%">
    <tr>
        <td>
            <table style="margin:auto;border:solid; width:50%">
                <tr>
                    <td >I must be in the center</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

但更重要的是，你真的需要使用表格和内联样式吗？

- Elliot B.

---

就这样，但 TD 的 align 属性完全没有必要，对吧？ - Carlos Gavidia-Calderon

没错，即使浏览器通过遗留/怪异模式选择支持它，但 align 属性并不是 HTML5 规范的一部分，你不应该使用它。 - Elliot B.

Answer 2

使用已过时的 align="" 属性来居中表格。

<table>
    <tr>
        <td>
            <table align="center">
                <tr>
                    <td>in the middle</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

- srikalki mangu

---

这个工作使用过时的CSS版本:D。感谢您，我不想使用边距。 - trungducng

Answer 3

你的第二个建议是正确的。查看此工作示例。

HTML：

<table class="outer">
    <tr>
        <td>
            <table class="inner">
                <tr>
                    <td>in the middle</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

CSS：

.outer
{
    width: 100%;
    border: solid 1px red;
}
.inner
{
    width: 25%;
    margin: auto;
    border: solid 1px blue;
}
​

- Paul Fleming