101

我想在浏览器窗口的中心显示一个固定宽度的表格。现在我用

<table width="200" align="center">

但是 Visual Studio 2008 在这一行给出警告：

属性“对齐”被认为是过时的。建议使用较新的构造。

我应该对表格应用什么 CSS 样式以获得相同的布局？

4

10 回答 10

192

理论上，史蒂文是对的：

使用 CSS 使表格居中的“正确”方式。如果左右边距相等，符合标准的浏览器应该将表格居中。完成此操作的最简单方法是将左右边距设置为“自动”。因此，可以在样式表中写：

table
{ 
    margin-left: auto;
    margin-right: auto;
}

但是这个答案开头提到的文章为您提供了使表格居中的所有其他方式。

一个优雅的 css 跨浏览器解决方案：这适用于 MSIE 6（Quirks and Standards）、Mozilla、Opera 甚至 Netscape 4.x，而无需设置任何明确的宽度：

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>
于 2008-11-19T06:28:04.717 回答
19

试试这个：

<table width="200" style="margin-left:auto;margin-right:auto">
于 2008-11-19T06:27:05.203 回答
2

简单的。IE6 及更高版本会很乐意将您的表格与“margin: 0 auto;”居中 如果只有页面以“标准”模式呈现。要做到这一点，您需要一个有效的 doctype 声明，例如

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或者

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

诚然，IE5.5 及更低版本仍会拒绝将表格居中，但也许您可以忍受这一点，尤其是在表格左对齐的情况下页面仍然有效的情况下。我认为现在 IE5.5 及以下版本的用户已经习惯了一些看起来很奇怪的网站 - 但您仍然需要确保这些视觉故障不会导致您的网站无法使用。

快乐编码！

编辑：对不起，我也许应该指出，您不必有一个“严格”的文档类型就可以让 IE6 进入“标准”渲染模式。从我上面发布的 doctype 示例中，我意识到这似乎是这样的。例如，这个 doctype 声明当然同样有效：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
于 2008-11-19T21:05:22.763 回答
2

尽管在当今世界它可能是异端——在过去，您会执行以下非 css 代码。这适用于今天的浏览器，包括今天的浏览器，但是 - 正如我所说 - 它在当今世界是异端邪说：

<center>
<table>
   ...
</table>
</center>

您需要的是某种方式来告诉您想要使表格居中并且该人正在使用旧版浏览器。然后在表格周围插入“<center>”命令。否则 - 使用 css。

令人惊讶的是——如果你想把所有东西都放在身体区域的中心——你可以使用标准

text-align: center;

css 命令，在 IE8 中（至少）它会将页面上的所有内容居中，包括表格。

于 2015-11-22T19:57:47.200 回答
0 
style="text-align:center;"

（我想）

或者你可以忽略它，它仍然有效

于 2008-11-19T06:22:08.833 回答
0

这应该有效：

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>
于 2008-11-19T06:30:21.467 回答
0

我只是在学习这个，最终对我有用的是首先制作一个三行表。将左右行的边距设置为 50%。然后在中心“表格行”的“表格数据”内放置一个单行、固定宽度的表格。

于 2009-10-02T02:36:49.350 回答
0 
<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
于 2013-12-19T09:50:24.067 回答
0

添加到 div 样式：

width: fit-content;
于 2019-08-25T08:44:41.103 回答
0

基本上，它的工作原理是，

<table align="center">
...

但是，您可以使用 CSS 以更好的方式做到这一点，这将是使用 CSS 的更好方法，因为它为网页提供动态行为并且是响应式的。

  <table style="text-align:center;">

此外，如果您只需要在页面上显示表格，那么您可以只使用 body 标签对齐，如下所示，

 <body style="text-align:center;">
<table>
  ...
</table>

如果您需要任何其他建议，请告诉我。一定会在这方面为您提供帮助。同样使用引导功能，这将更加简单和互动。

于 2019-08-25T09:14:48.553 回答