As you may have noticed, the table align=”center” attribute has been deprecated. So how is one supposed to center a table in an HTML page? The answer is with CSS. However, this is not as straight forward as you would think. Basically we now need to inform the browser to put the same amount of empty space on either side of our tables. Here is how to do it:
The inline method
Or if you are using an attached stylesheet you can do it with either classes or the ID method, or by further defining the table tag.
Here are some lines from a CSS stylesheet showing all three methods (you only need to use one of them, so choose what works best for you)
/* this will define the table tag */
table { margin:auto }
/* this will define an ID to assign the style to */
# table_align { margin:auto }
/* and lastly this is a css class that can be used */
.table_align { margin:auto }
Now, here is the html to make use of these three methods
NOTE: Using “margin:auto” is a bit of overkill since it is basically affecting the margin on all 4 sides of the table in some way. You could center the table more precise by using the margin-left:auto and margin-right:auto and setting two properties in CSS. However, I usually find that the regular margin:auto generally does the job when the top and bottom are not a concern.
Unfortunately IE (Internet Explorer) once again is different and chooses not to recognize any of the methods above. So you will be forced to do one of two things.
Add the margin:auto style to your “body” tag OR
Resort to still using the align=”center” attribute for your tables to satisfy IE
Examples:
I do not like the previous two examples, but sometimes you gotta do what it takes to reach your entire audience.