SmokyHosts Support Forums - Webhosting and Webdesigning Support!

how to Centering a table with CSS


The most annoying thing for a web designer is definitely the large difference between the two biggest browsers, Internet Explorer and FireFox. Simply adding text-align: center; to your bodys style tag centers a **** in Internet Explorer, but not in FireFox. This is not a bad thing for firefox as it was not added for a reason and thats because when adding text-align to your body tag, you are aligning cells and tables, not text so therefore Mozilla FireFox is right in a way.


There is a VERY easy solution to this problem, however it is not compliable with W3C CSS standards. Simply doing this will center your page in IE and FF:


Simple and does work, but it is not valid W3C HTML, which every website should be.

The Solution
There are absolutely no clear solutions on the internet, they are all very confusing and do not make sense at times, so I will try my best to explain.

Ok lets create a simple website first and put a table block in the center.

Ok, I am going to use internal CSS so I don't lose you.

Ok to center a table in both FF and IE you need to add the following to your table tag.

Code:
<table style="" border="1" width="267" height="202">


We have now added a style tag, this is what internal CSS is and you can use external CSS, which I recommended.

Ok now that you have added the style tag, you can now add the vital CSS in order for it to work.

To get it to work you need to take the width of your table, put it in the CSS style area and make both right and left margins auto, you also need to add a style tag to your body area with text-align in there, this is to satify IE.

Heres the final code (don't forget to add your doctype to every page you make Smile)

Try it...

how about
<table style=width:100%>
<tr>
<td style=text-align:center>
.... your table ....
</td>
</tr></table>

For me the [html]<table style="text-align: center"> ... </table>[/html] always works

yeah thats the same for me as well.

I have never included -moz- when declaring the text-align. Is it really necessary?

Never in my experience, I've always been able to just use "center"

I've never done it I normally just use the following code:
Depending on where you put it, it aligns both the tables and text. If you put it in the table then you align the table on the browser and if you put it in the table row then you align the text. I don't normally use css but there are easier ways to take out the major code section such as an example below:
When you use the table and style area you would put it in the table line with "hd" for the style.
Gives you more code with smaller text to allow you to make the code smaller per page to allow for less bandwidth usage per page, to get the most out of your bandwidth.

Hope this helps other people and also this could of been put into the How-To section for points, grantes SHAdmin feels it is good.[/b][/color]

TheCrymsonLegends wrote:I've never done it I normally just use the following code:

Code: Select all

align=center valign=center

Depending on where you put it, it aligns both the tables and text. If you put it in the table then you align the table on the browser and if you put it in the table row then you align the text. I don't normally use css but there are easier ways to take out the major code section such as an example below:

Code: Select all

table.hd      {
            color: #C68E17;
            background-color: #8A4117;
            border-width: 2px 2px 2px 2px;
            border-style: outset outset outset outset;
            border-color: #8A4117 #8A4117 #8A4117 #8A4117
            }

When you use the table and style area you would put it in the table line with "hd" for the style.

Code: Select all

 <table [b]style="hd"[/b] align="center" width="90%"> 

Gives you more code with smaller text to allow you to make the code smaller per page to allow for less bandwidth usage per page, to get the most out of your bandwidth.

Hope this helps other people and also this could of been put into the How-To section for points, grantes SHAdmin feels it is good.[/b][/color]

a little typo here? or am i wrong about class='hd' rather than style='hd'

Tails5 wrote:For me the [html]<table style="text-align: center"> ... </table>[/html] always works

this is more than enough to align the text in a table using css... or you can also use style id's and then link it to a external style sheet...

All in all. There are so many techniques, but do note that some parameters are inherited, planning takes a bigger role.