题

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

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

但Visual Studio 2008会在此行上发出警告：

属性'align'被认为是过时的。建议使用较新的结构。

我应该将哪种CSS样式应用于表格以获得相同的布局？

有帮助吗？

解决方案

史蒂文是对的，在理论中：

  

<！>＃8220;正确<！>＃8221;使用CSS使表格居中的方法。如果左边距和右边距相等，则符合标准的浏览器应该居中。最简单的方法是将左右边距设置为<！>＃8220; auto。<！>＃8221;因此，可以写一个样式表：

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>

其他提示

试试这个：

<table width="200" style="margin-left:auto;margin-right:auto">

简单。 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及以下版本的用户已经习惯了一些奇怪的网站 - 但你仍然需要确保这些视觉故障不会使你的网站无法使用。

快乐的编码！

编辑：对不起，我或许应该指出你不必有<！> quot; strict <！> quot; doctype获取IE6并进入<！> quot; standards <！> quot;渲染模式。我从上面发布的doctype示例中看到了这种方式。例如，这个doctype声明当然会同样有效：

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

虽然在今天的世界里它可能是异端 - 过去你会做以下非css代码。这适用于今天的浏览器，包括今天的浏览器，但正如我所说的那样，它在今天的世界中是异端邪说：

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

您需要的是告诉您要将桌子居中并且该人使用较旧的浏览器的某种方式。然后插入<！> quot; <！> lt; center <！> gt; <！> quot;围绕桌子的命令。否则 - 使用css。

令人惊讶的是 - 如果您想将所有内容集中在BODY区域 - 您可以使用标准

text-align: center;

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

style="text-align:center;"

（我认为）

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

这应该有效：

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

我只是在学习这个，最终对我有用的是先制作一个有三排的桌子。将左右行的边距设置为50％。然后在<！> quot; table data <！>中放入一行固定宽度表;中心<！>“;表格行<！>”; 

<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top