By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,347 Members | 2,091 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,347 IT Pros & Developers. It's quick & easy.

Table Centering problem

P: 6
I've read other posts on here about this issue and I've tried applying the code but I still can't get a centered table. Here is what I have:

In my CSS:
.centered-table {
margin-left: auto;
margin-right: auto;
}

In my HTML:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="centered">
<table class="centered-table" id="Table_01" width="2001" height="1001" border="0" cellpadding="0" cellspacing="0">
</table>
</div>

If I need to include more code in order to figure this out let me know.
Oct 30 '06 #1
Share this Question
Share on Google+
11 Replies


kestrel
Expert 100+
P: 1,071
what i did with mine was put the class "centered" right into the <table> tag
Oct 30 '06 #2

P: 6
what i did with mine was put the class "centered" right into the <table> tag
Good point. My programming is a little rusty. However, my table still won't center. I've tried viewing it in Safari and Firefox...
Oct 31 '06 #3

ronverdonk
Expert 2.5K+
P: 4,258
When you put a
Expand|Select|Wrap|Line Numbers
  1. <div style='text-align:center'>
  2. ......
  3. ..... your table
  4. .....
  5. </div>
  6.  
around it, it'll work.

Ronald :cool:
Oct 31 '06 #4

P: 6
When you put a
Expand|Select|Wrap|Line Numbers
  1. <div style='text-align:center'>
  2. ......
  3. ..... your table
  4. .....
  5. </div>
  6.  
around it, it'll work.

Ronald :cool:
...no dice
Oct 31 '06 #5

drhowarddrfine
Expert 5K+
P: 7,435
To center the table, you should use css and
table{margin:0 auto;}
which is, essentially, what you have. However, the table is centered but this does not center the cell or the text inside. To do that you must enter this:
td{text-align:center}
Oct 31 '06 #6

P: 6
To center the table, you should use css and
table{margin:0 auto;}
which is, essentially, what you have. However, the table is centered but this does not center the cell or the text inside. To do that you must enter this:
td{text-align:center}
Well the thing is that the table isn't centered, and I don't need to center the text.
Nov 1 '06 #7

Expert 100+
P: 1,892
I just did a test with the following code and it worked (IE, sorry no FF at work) if this isn't working you should post your code one thing to consider as DrHoward likes to point out is make sure your doctype is correct.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title>
  6. Test
  7. </title>
  8. <style type="text/css">
  9.     table
  10.     {
  11.     margin-left: auto;
  12.     margin-right: auto;
  13.     border: 1px solid black;
  14.     height: 500px;
  15.     width: 500px
  16.     }
  17.  
  18. </style>
  19.  
  20. </head>
  21. <body>
  22.  
  23. <table>
  24.     <tr>
  25.         <td>
  26.         Test
  27.         </td>
  28.     </tr>
  29. </table>
  30. </body>
Nov 1 '06 #8

P: 6
ok here's all the code.

CSS= .centered {margin-left: auto; margin-right: auto;}


Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
  3. <html> 
  4.  
  5. <head>
  6.  
  7. <title>index</title>
  8.  
  9. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  10. <!-- CSS sheet -->
  11. <link rel="stylesheet" type="text/css" href="style.css" /> 
  12.  
  13. </head>
  14.  
  15. <body>
  16. <table class="centered" id="Table_01" width="2001" height="1001" border="0" cellpadding="0" cellspacing="0">
  17.  
  18.     <tr>
  19.  
  20.         <td colspan="23">
  21.  
  22.             <img src="images/index_01.gif" width="2000" height="73" alt=""></td>
  23.  
  24.         <td>
  25.  
  26.             <img src="images/spacer.gif" width="1" height="73" alt=""></td>
  27.  
  28.     </tr>
  29.  
  30.     <tr>
  31.  
  32.         <td colspan="14" rowspan="2">
  33.  
  34.             <img src="images/index_02.gif" width="1096" height="43" alt=""></td>
  35.  
  36.         <td colspan="6">
  37.  
  38.             <img src="images/index_03.gif" width="284" height="19" alt=""></td>
  39.  
  40.         <td colspan="3" rowspan="3">
  41.  
  42.             <img src="images/index_04.gif" width="620" height="44" alt=""></td>
  43.  
  44.         <td>
  45.  
  46.             <img src="images/spacer.gif" width="1" height="19" alt=""></td>
  47.  
  48.     </tr>
  49.  
  50.     <tr>
  51.  
  52.         <td colspan="6" rowspan="2">
  53.  
  54.             <img src="images/index_05.gif" width="284" height="25" alt=""></td>
  55.  
  56.         <td>
  57.  
  58.             <img src="images/spacer.gif" width="1" height="24" alt=""></td>
  59.  
  60.     </tr>
  61.  
  62.     <tr>
  63.  
  64.         <td colspan="4" rowspan="3">
  65.  
  66.             <img src="images/index_06.gif" width="625" height="35" alt=""></td>
  67.  
  68.         <td rowspan="3">
  69.             <A HREF="index.html"><IMG SRC="images/index_07.gif" ALT="Home" width="99" hei            ght="35"></A></td>
  70.  
  71.         <td rowspan="3">
  72.  
  73.             <img src="images/index_08.gif" width="14" height="35" alt=""></td>
  74.  
  75.         <td colspan="2" rowspan="3">
  76.  
  77.             <A HREF="bio.html"><IMG SRC="images/index_09.gif" ALT="Bio" width="98" height            ="35"></A></td>
  78.  
  79.         <td colspan="6">
  80.  
  81.             <img src="images/index_10.gif" width="260" height="1" alt=""></td>
  82.  
  83.         <td>
  84.  
  85.             <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  86.  
  87.     </tr>
  88.  
  89.     <tr>
  90.  
  91.         <td rowspan="2">
  92.  
  93.             <img src="images/index_11.gif" width="12" height="34" alt=""></td>
  94.  
  95.         <td rowspan="2">
  96.             <A HREF="specialty.html"><IMG SRC="images/index_12.gif" ALT="Specialty" width            ="100" height="34"></A></td>
  97.  
  98.         <td colspan="3">
  99.  
  100.             <img src="images/index_13.gif" width="124" height="1" alt=""></td>
  101.  
  102.         <td colspan="2" rowspan="2">
  103.             <A HREF="private.html"><IMG SRC="images/index_14.gif" ALT="Private" width="99            " height="34"></A></td>
  104.  
  105.         <td rowspan="2">
  106.  
  107.             <img src="images/index_15.gif" width="14" height="34" alt=""></td>
  108.  
  109.         <td colspan="2" rowspan="2">
  110.             <A HREF="dates.html"><IMG SRC="images/index_16.gif" ALT="Bio" width="98" heig            ht="34"></A></td>
  111.  
  112.         <td rowspan="2">
  113.  
  114.             <img src="images/index_17.gif" width="14" height="34" alt=""></td>
  115.  
  116.         <td colspan="2" rowspan="2">
  117.             <A HREF="contact.html"><IMG SRC="images/index_18.gif" ALT="Bio" width="98" he            ight="34"></A></td>
  118.  
  119.         <td colspan="2" rowspan="2">
  120.  
  121.             <img src="images/index_19.gif" width="605" height="34" alt=""></td>
  122.  
  123.         <td>
  124.  
  125.             <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  126.  
  127.     </tr>
  128.  
  129.     <tr>
  130.  
  131.         <td>
  132.  
  133.             <img src="images/index_20.gif" width="12" height="33" alt=""></td>
  134.  
  135.         <td>
  136.             <A HREF="reference.html"><IMG SRC="images/index_21.gif" ALT="Reference" width            ="100" height="33"></A></td>
  137.  
  138.         <td>
  139.  
  140.             <img src="images/index_22.gif" width="12" height="33" alt=""></td>
  141.  
  142.         <td>
  143.  
  144.             <img src="images/spacer.gif" width="1" height="33" alt=""></td>
  145.  
  146.     </tr>
  147.  
  148.     <tr>
  149.  
  150.         <td colspan="3">
  151.  
  152.             <img src="images/index_23.gif" width="529" height="77" alt=""></td>
  153.  
  154.         <td colspan="19">
  155.  
  156.             <img src="images/index_24.gif" width="906" height="77" alt=""></td>
  157.  
  158.         <td rowspan="8">
  159.  
  160.             <img src="images/index_25.gif" width="565" height="849" alt=""></td>
  161.  
  162.         <td>
  163.  
  164.             <img src="images/spacer.gif" width="1" height="77" alt=""></td>
  165.  
  166.     </tr>
  167.  
  168.     <tr>
  169.  
  170.         <td colspan="2">
  171.  
  172.             <img src="images/index_26.gif" width="528" height="1" alt=""></td>
  173.  
  174.         <td colspan="5">
  175.  
  176.             <img src="images/index_27.jpg" width="281" height="1" alt=""></td>
  177.  
  178.         <td colspan="15">
  179.  
  180.             <img src="images/index_28.gif" width="626" height="1" alt=""></td>
  181.  
  182.         <td>
  183.  
  184.             <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  185.  
  186.     </tr>
  187.  
  188.     <tr>
  189.  
  190.         <td rowspan="6">
  191.  
  192.             <img src="images/index_29.gif" width="334" height="771" alt=""></td>
  193.  
  194.         <td colspan="2">
  195.  
  196.             <img src="images/index_30.jpg" width="195" height="160" alt=""></td>
  197.  
  198.         <td colspan="4" rowspan="3">
  199.  
  200.             <img src="images/index_31.jpg" width="280" height="580" alt=""></td>
  201.  
  202. <!------------------------------ text box ----------------------------------------------->        
  203.         <td colspan="10" rowspan="2" style="background-image:url(images/index_text.gif);
  204.             background-repeat: no-repeat; width: 396px; height:579px;vertical-align: top"> 
  205. Legend is the Columbus Ohio branch of "Be the Best Lacrosse Camps", one of the premiere camps in the Washington DC area.<br><br>Headed by University of Maryland graduate Brendan Healy, Legend aims to perfect fundamental skills while teaching advanced passing, shooting, and dodging techniques.<br><br> Legend places a major emphasis on positive reinforcement, sportsmanship, work ethic, and persistence.<br><br> Healy believes that intensive hands-on instruction with high repetition is the most effective method of skills training. For this reason Healy aims to have a strong player-to-instructor ratio. <br><br>Legend specialty clinics accept a maximum of 15 players, and camps guarantee a minimum of an 8:1 player-to-instructor ratio.
  206.         </td>
  207. <!--------------------------- end text box ---------------------------------------------->
  208.  
  209.         <td colspan="5" rowspan="2">
  210.  
  211.             <img src="images/index_33.gif" width="230" height="579" alt=""></td>
  212.  
  213.         <td>
  214.  
  215.             <img src="images/spacer.gif" width="1" height="160" alt=""></td>
  216.  
  217.     </tr>
  218.  
  219.     <tr>
  220.  
  221.         <td rowspan="5">
  222.  
  223.             <img src="images/index_34.gif" width="194" height="611" alt=""></td>
  224.  
  225.         <td rowspan="2">
  226.  
  227.             <img src="images/index_35.jpg" width="1" height="420" alt=""></td>
  228.  
  229.         <td>
  230.  
  231.             <img src="images/spacer.gif" width="1" height="419" alt=""></td>
  232.  
  233.     </tr>
  234.  
  235.     <tr>
  236.  
  237.         <td colspan="15" rowspan="2">
  238.  
  239.             <img src="images/index_36.jpg" width="626" height="78" alt=""></td>
  240.  
  241.         <td>
  242.  
  243.             <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  244.  
  245.     </tr>
  246.  
  247.     <tr>
  248.  
  249.         <td colspan="5" rowspan="2">
  250.  
  251.             <img src="images/index_37.jpg" width="281" height="138" alt=""></td>
  252.  
  253.         <td>
  254.  
  255.             <img src="images/spacer.gif" width="1" height="77" alt=""></td>
  256.  
  257.     </tr>
  258.  
  259.     <tr>
  260.  
  261.         <td colspan="15" rowspan="2">
  262.  
  263.             <img src="images/index_38.gif" width="626" height="114" alt=""></td>
  264.  
  265.         <td>
  266.  
  267.             <img src="images/spacer.gif" width="1" height="61" alt=""></td>
  268.  
  269.     </tr>
  270.  
  271.     <tr>
  272.  
  273.         <td colspan="5">
  274.  
  275.             <img src="images/index_39.gif" width="281" height="53" alt=""></td>
  276.  
  277.         <td>
  278.  
  279.             <img src="images/spacer.gif" width="1" height="53" alt=""></td>
  280.  
  281.     </tr>
  282.  
  283.     <tr>
  284.  
  285.         <td>
  286.  
  287.             <img src="images/spacer.gif" width="334" height="1" alt=""></td>
  288.  
  289.         <td>
  290.  
  291.             <img src="images/spacer.gif" width="194" height="1" alt=""></td>
  292.  
  293.         <td>
  294.  
  295.             <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  296.  
  297.         <td>
  298.  
  299.             <img src="images/spacer.gif" width="96" height="1" alt=""></td>
  300.  
  301.         <td>
  302.  
  303.             <img src="images/spacer.gif" width="99" height="1" alt=""></td>
  304.  
  305.         <td>
  306.  
  307.             <img src="images/spacer.gif" width="14" height="1" alt=""></td>
  308.  
  309.         <td>
  310.  
  311.             <img src="images/spacer.gif" width="71" height="1" alt=""></td>
  312.  
  313.         <td>
  314.  
  315.             <img src="images/spacer.gif" width="27" height="1" alt=""></td>
  316.  
  317.         <td>
  318.  
  319.             <img src="images/spacer.gif" width="12" height="1" alt=""></td>
  320.  
  321.         <td>
  322.  
  323.             <img src="images/spacer.gif" width="100" height="1" alt=""></td>
  324.  
  325.         <td>
  326.  
  327.             <img src="images/spacer.gif" width="12" height="1" alt=""></td>
  328.  
  329.         <td>
  330.  
  331.             <img src="images/spacer.gif" width="100" height="1" alt=""></td>
  332.  
  333.         <td>
  334.  
  335.             <img src="images/spacer.gif" width="12" height="1" alt=""></td>
  336.  
  337.         <td>
  338.  
  339.             <img src="images/spacer.gif" width="24" height="1" alt=""></td>
  340.  
  341.         <td>
  342.  
  343.             <img src="images/spacer.gif" width="75" height="1" alt=""></td>
  344.  
  345.         <td>
  346.  
  347.             <img src="images/spacer.gif" width="14" height="1" alt=""></td>
  348.  
  349.         <td>
  350.  
  351.             <img src="images/spacer.gif" width="20" height="1" alt=""></td>
  352.  
  353.         <td>
  354.  
  355.             <img src="images/spacer.gif" width="78" height="1" alt=""></td>
  356.  
  357.         <td>
  358.  
  359.             <img src="images/spacer.gif" width="14" height="1" alt=""></td>
  360.  
  361.         <td>
  362.  
  363.             <img src="images/spacer.gif" width="83" height="1" alt=""></td>
  364.  
  365.         <td>
  366.  
  367.             <img src="images/spacer.gif" width="15" height="1" alt=""></td>
  368.  
  369.         <td>
  370.  
  371.             <img src="images/spacer.gif" width="40" height="1" alt=""></td>
  372.  
  373.         <td>
  374.  
  375.             <img src="images/spacer.gif" width="565" height="1" alt=""></td>
  376.  
  377.         <td></td>
  378.  
  379.     </tr>
  380.  
  381. </table>
  382.  
  383. </body>
  384.  
  385. </html>
  386.  
Nov 1 '06 #9

drhowarddrfine
Expert 5K+
P: 7,435
The code you had DID center the table. Perhaps the enormous width you give it is fooling you.
Nov 1 '06 #10

P: 6
I see. I see the error in my design, but I've put quite a bit of time into this page. Is there any way to set a point for the page to open to? Or any other way to make this work?
Nov 1 '06 #11

Expert 100+
P: 1,892
I think the problem is with the widths of your page, you're not going to be centering something that is 2000px wide when your monitor doesn't have the capability to do so.
Nov 1 '06 #12

Post your reply

Sign in to post your reply or Sign up for a free account.