Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to center a table of tabular data 1

Status
Not open for further replies.

wordsmyth

Programmer
Nov 4, 2003
2
US
I can not get the CSS styles, margin-left:auto and margin-right: auto, to center the table itself with IE 6. With no other changes but substituting equal percentages for the values auto, the table is centered.
I can also center the table using the 'center' tag in the XHTML document. However, I want to totally separate content from presentation.
Can anybody tell me what is wrong with the following CSS style rules?
table {
width=65%;
margin-left: auto; margin-right: auto;
}
td {
text-align:center;
}
The relevant XHTML code follows:
<table summary=&quot;This table is my fee schedule re round trip mileage and number of items served.&quot;>
<caption>CURRENT FEE SCHEDULE</caption>
<tr>
<th id=&quot;header1&quot;>Round Trip </th>
<th id=&quot;header2&quot;>1-2 Items</th>
<th id=&quot;header3&quot;>3-4 Items</th>
</tr>
<tr>
<td headers=&quot;header1&quot;>1-24 Miles</td>
<td headers=&quot;header2&quot;>$35.00</td>
<td headers=&quot;header3&quot;>$50.00</td>
</tr>
<tr>
<td headers=&quot;header1&quot;>25-49 Miles</td>
<td headers=&quot;header2&quot;>$50.00</td>
<td headers=&quot;header3&quot;>$65.00</td>
</tr>
</table>
Thanks in advance, Wordsmyth
 
My Mozilla centers the table nicely. As for IE, try enclosing the entire table in a container that has text-align: center;. That should do it. Also note, that you have an error in your CSS at width=65% should be width: 65%. And I was banging my head how come Mozilla thinks 65% is so little.
 
It should work. The only reason I can think that it's not working is that maybe the table's container has a text-align other than center and IE's using that instead of the style for the margins. If that's the case try wrapping the the table in a div.

Here's a good reference:

Kevin
A+, Network+, MCP
 
Thanks to Chris Hunt for his suggestion. It works. I was trying to style the table's horizontal alignment with the value 'auto' rather than specific percentages, however. Vragabond found an error introduced by my (re)typing all possible combinations before asking for help.
I am writing again to say that philote's reference web site was tremendously helpful. In fact, it used many examples with clear explanations of each in multiple browsers that I not only learned how to center tables but why and how depending on which browsers will be the user agents.
That web site, BTW, is Thanks to all,
Lew
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top