Cannot get a table to be centered on...
I am trying to get a table to be centered on a web page using CSS. The table is on the left side but when I try marging-left or right set to auto the table is still at the left.
CSS code...
table.first { width:722; margin-left:auto; margin-right: auto; background-color:#808080; border-collapse: collapse; cellspacing: 0; }
tr.first{ height:25; }
td.first { text-align:center; font-family: arial narrow; font-weight:bolder; }
HTML code....
<table class="first">
<tr class="first">
<td class="first"><a href="index1.htm">Index
Links</a></td>
<td class="first"><a href="gus_says___.htm">Gus
Says...</a></td>
<td class="first"><a href="illustration_links.htm">Ray Quigley's Artwork</a></td>
<td class="first"><a href="the_library.htm">The
Library</a></td>
<td class="first"><a href="letter_from_gus.htm">A
Letter from Gus</a></td>
<td class="first"><a href="art_gallery-1948.htm">Illustration Galleries</a></td>
</tr>
</table>
thanks
CSS code...
table.first { width:722; margin-left:auto; margin-right: auto; background-color:#808080; border-collapse: collapse; cellspacing: 0; }
tr.first{ height:25; }
td.first { text-align:center; font-family: arial narrow; font-weight:bolder; }
HTML code....
<table class="first">
<tr class="first">
<td class="first"><a href="index1.htm">Index
Links</a></td>
<td class="first"><a href="gus_says___.htm">Gus
Says...</a></td>
<td class="first"><a href="illustration_links.htm">Ray Quigley's Artwork</a></td>
<td class="first"><a href="the_library.htm">The
Library</a></td>
<td class="first"><a href="letter_from_gus.htm">A
Letter from Gus</a></td>
<td class="first"><a href="art_gallery-1948.htm">Illustration Galleries</a></td>
</tr>
</table>
thanks
Chuck,
If you provide a link to the site, there may be something there that will help see what is happening.
It could be that your table is the full width of the page body, and the body is on the left of the browser window. In this case, you may want to center the body.
If you provide a link to the site, there may be something there that will help see what is happening.
It could be that your table is the full width of the page body, and the body is on the left of the browser window. In this case, you may want to center the body.
Bill,
Its not published yet I am only playing around with the look in Coffecup HTML editor but i wll try your suggestion about centering the body.
Its not published yet I am only playing around with the look in Coffecup HTML editor but i wll try your suggestion about centering the body.
Chuck,
One thing I sometimes do while playing with CSS is to give things a background color to see which item really needs adjusting.
You can do this in a separate style sheet, in the top style section on a page, or using inline styles. Sometimes, I just enter the style inline on one item and then see if that it the problem, then drag the style to the next suspect.
So to use one of your bits of code, I might do something like this:
<table class="first" style="backrgound-color:red;"> to make the entire table red. Sometimes the visual change helps locate where the problem is located.
One thing I sometimes do while playing with CSS is to give things a background color to see which item really needs adjusting.
You can do this in a separate style sheet, in the top style section on a page, or using inline styles. Sometimes, I just enter the style inline on one item and then see if that it the problem, then drag the style to the next suspect.
So to use one of your bits of code, I might do something like this:
<table class="first" style="backrgound-color:red;"> to make the entire table red. Sometimes the visual change helps locate where the problem is located.
Check this link http://www.wpdfd.com/editorial/thebox/deadcentre4.html
OR you can just use
OR you can just use
<center></center>
tags around the table and be done with it.
Let's not get all hurt.
David,
<center></center> did the trick. My table is now nicely centered! Thanks.
<center></center> did the trick. My table is now nicely centered! Thanks.
Chuck wrote:
I am trying to get a table to be centered on a web page using CSS. The table is on the left side but when I try marging-left or right set to auto the table is still at the left.
I am trying to get a table to be centered on a web page using CSS. The table is on the left side but when I try marging-left or right set to auto the table is still at the left.
This only works if you have a complete and valid doctype.
You may be using this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
If this is the case, then you should be using this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
David Sellers wrote:
Check this link http://www.wpdfd.com/editorial/thebox/deadcentre4.html
OR you can just use
Check this link http://www.wpdfd.com/editorial/thebox/deadcentre4.html
OR you can just use
<center></center>
tags around the table and be done with it.http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Thanks David,
That link really worked, and once you get a knack of it you will never get the problem of centering any element on a page never again.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.