Question

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

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

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

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

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

Answer 1

史蒂文是对的，在theory：

使用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>

Answer 2

试试这个：

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

Answer 3

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

快乐的编码！

编辑：对不起，我或许应该指出，您不必拥有“严格”的doctype来获得IE6并进入“标准”渲染模式。我从上面发布的doctype示例中看到了这种方式。例如，这个doctype声明当然会同样有效：

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

Answer 4

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

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

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

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

text-align: center;

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

Answer 5

style="text-align:center;"

（我认为）

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

Answer 6

这应该有效：

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

Answer 7

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

Answer 8

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

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>

Answer 9

添加到div样式：

width: fit-content;

Answer 10

基本上，它的工作原理是

$("#search-result").on("click", "#user_id", function(event)  {
    // magic happens here
});

但是，您可以使用CSS更好地完成此操作，这将是使用CSS的更好方法，因为它可以为网页提供动态行为并且具有响应性。

<table align="center">
...

此外，如果您只需要在页面上显示表格，则只能使用如下所示的body标签对齐方式，

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

如果您还有其他建议，请告诉我。一定会对您有所帮助。还可以使用引导功能，这将更加轻松和互动。

CSS方式水平对齐表

10 个答案: