Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS way to horizontally align table

I want to show a table of fixed width at the center of browser window. Now I use

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

But Visual Studio 2008 gives warning on this line:

Attribute 'align' is considered outdated. A newer construct is recommended.

What CSS style should I apply to the table to obtain the same layout?

like image 363
Alexander Prokofyev Avatar asked Nov 19 '08 06:11

Alexander Prokofyev


People also ask

How do you horizontally align a table?

Right-click anywhere inside the table and then choose the “Table Properties” command from the context menu that appears. In the Table Properties window that opens, you can choose left, center, or right alignment by clicking those options in the “Alignment” section.

How do I align a table to the right CSS?

You need to set the left margin to auto too. That will make the left margin push the table as far right as is allowed by the right margin.


1 Answers

Steven is right, in theory:

the “correct” way to center a table using CSS. Conforming browsers ought to center tables if the left and right margins are equal. The simplest way to accomplish this is to set the left and right margins to “auto.” Thus, one might write in a style sheet:

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

But the article mentioned in the beginning of this answer gives you all the other way to center a table.

An elegant css cross-browser solution: This works in both MSIE 6 (Quirks and Standards), Mozilla, Opera and even Netscape 4.x without setting any explicit widths:

div.centered  {     text-align: center; }  div.centered table  {     margin: 0 auto;      text-align: left; }   <div class="centered">     <table>     …     </table> </div> 
like image 71
VonC Avatar answered Sep 23 '22 15:09

VonC