Centering a table with CSS

With HTML 4, you could center a table using align="center".

<table align="center">
...
</table>

However, that method of centering a table is deprecated in HTML5. To center a table, which is a block-level element, in HTML5 using a Cascading Style Sheets method, you can use a style that includes margin-left: auto; margin-right: auto; as shown below.

<table style="margin-left: auto; margin-right: auto;">
...
</table>

E.g:

Months
NumberEnglishSpanishFrench
1Januaryenerojanvier
2Februaryfebrerofévrier
3Marchmarzomars
4Aprilabrilavril
5Maymayomai
6Junejuniojuin
7Julyjuliojuillet
8Augustagostoaoût
9Septemberseptiembreseptembre
10Octoberoctubreoctobre
11Novembernoviembrenovembre
12Decemberdiciembredécembre

Or you can include the following style information in the HEAD section of the webpage:

<style type="text/css">
  table.centered { margin-left: auto; margin-right: auto; }
</style>

You can then set the "class" for any tables that you wish to be centered on a webpage as shown below.

<table class="centered">
  ...
</table>

If you wish to have your table occupy a certain width on the page, but be centered, you can use code similar to the following:

<table style="width: 50%; margin-left: 25; margin-right: 25%;">   ...
</table>

E.g.:

Months
NumberEnglishSpanishFrench
1Januaryenerojanvier
2Februaryfebrerofévrier
3Marchmarzomars
4Aprilabrilavril
5Maymayomai
6Junejuniojuin
7Julyjuliojuillet
8Augustagostoaoût
9Septemberseptiembreseptembre
10Octoberoctubreoctobre
11Novembernoviembrenovembre
12Decemberdiciembredécembre

 

TechRabbit ad 300x250 newegg.com

Justdeals Daily Electronics Deals1x1 px