how to Centering a table with CSS

blue-sky · Post by **blue-sky** » Wed Jun 13, 2007 11:33 am

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:

Code: Select all

body /* IE */
{
text-align: center;
}

body /* FF */
{
text-align: -moz-center;
}

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.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<title>Moo</title>
</head>

<body>

<table border="1" width="267" height="202">
   <tr>
      <td height="202" width="267">Hello World!</td>
   </tr>
</table>

</body>

</html>

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)

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Moo</title>
</head>
<body style="text-align: center;">
<table style="width: 267px; height: 202px; margin-left: auto; margin-right: auto; border: 1;">
   <tr>
      <td height="202" width="267">Hello World!</td>
   </tr>
</table>
</body>
</html>

Try it...

csoftdev · Post by **csoftdev** » Fri Dec 07, 2007 5:14 pm

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

Tails5 · Post by **Tails5** » Fri Dec 07, 2007 8:28 pm

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

Gebbo · Post by **Gebbo** » Sat Dec 08, 2007 12:19 am

yeah thats the same for me as well.

Flipper3 · Post by **Flipper3** » Sat Dec 08, 2007 1:36 am

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

Tails5 · Post by **Tails5** » Tue Dec 11, 2007 2:20 am

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

TheCrymsonLegends · Post by **TheCrymsonLegends** » Tue Dec 11, 2007 5:23 am

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 style="hd" 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]

thetarget · Post by **thetarget** » Tue Dec 11, 2007 8:01 am

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'

jasondsouza · Post by **jasondsouza** » Wed Dec 12, 2007 5:45 am

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...

thetarget · Post by **thetarget** » Mon Dec 17, 2007 4:15 am

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