CSS方式来水平alignment表格

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

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

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

属性“alignment”被认为是过时的。 推荐一个更新的构造。

我应该使用什么样式的CSS来获得相同的布局?

8 Solutions collect form web for “CSS方式来水平alignment表格”

史蒂文理论上是正确的:

使用CSS居中表的“正确”方法。 如果左右边距相同,则合适的浏览器应该将表格居中。 最简单的方法是将左右边距设置为“自动”。因此,可以在样式表中写入:

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

但在这个答案的开头提到的文章给你所有其他的方式来中心表。

一个优雅的CSS跨浏览器的解决scheme:这适用于MSIE 6(怪癖和标准),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”为中心, 如果只有页面呈现在“标准”模式下。 要做到这一点,你需要一个有效的文档types声明,如

 <!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及以下版本仍然会拒绝将表格居中,但是也许你可以忍受,特别是如果页面仍然function正常,表格左alignment。 我认为到目前为止,IE5.5及以下版本的用户已经相当习惯了一些奇怪的网站 – 但你仍然需要确保这些可视化的故障不会导致你的网站无法使用。

快乐的编码!

编辑:对不起,我应该指出,你不必有一个“严格的”文档types来获得IE6和“标准”渲染模式。 我意识到这似乎从我上面发布的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> 

你需要的是某种方式来告诉你想要放置一张桌子,而这个人正在使用一个旧的浏览器。 然后在表格周围插入“<center>”命令。 否则 – 使用CSS。

令人惊讶的是,如果你想把所有东西都放在身体区域,那么你就可以使用这个标准

 text-align: center; 

CSS命令和在IE8(至less)它将中心的一切包括表在页面上。

 style="text-align:center;" 

(我认为)

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

这应该工作:

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

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

 <style> .abc { text-align: center; } </style> <table class="abc"> <tr> <td>Item1</td> <td>Item2</td> </tr> </table> 
  • 为什么HTML认为“chucknorris”是一种颜色?
  • 错误与Firefox - 禁用input的属性刷新时不重置
  • 高度等于dynamic宽度(CSSstream体布局)
  • embedded谷歌地图是错误的显示,直到resize的网页
  • HTML5是否禁止tbody的细胞?
  • findHTML元素和浏览器(或窗口)边之间的距离
  • :触摸CSS伪类或类似的东西?
  • 嵌套和多个<marquee>烦恼