[WEB4LIB] Table centering in XHTML

[Thomas Dowling]

At 03:05 PM 3/6/2002, Robert Sullivan wrote:
>Since I converted our site to XHTML 1.0 Transitional, I noticed most of my
>pages validate under 1.0 Strict and have been changing them over as I update.
>
>One problem I'm having is with centering tables.  1.0 Strict will not accept
>align="center" for <table>, although it works for <td>, and my attempts to do
>it with CSS were not successful.

See <http://www.allmyfaqs.com/faq.pl?Center_with_CSS>.

The HTML align="center" attribute can, in different contexts, mean to 
center one box within another, or to center text within a box.  CSS avoids 
this confusion with a  text-align: center" property that *only* aligns text 
(including inline images).  To center a box--in this case a table--you need 
to play with its margins.  Be advised that some decrepit browsers screw 
this up royally.

This should be as simple as setting the table's CSS properties to "margin: 
auto".  But in my experience, it's a lot more reliable (especially for IE) 
to give the table a width in percentage, and explicitly give it left and 
right margins equal to half the remaining space:

   table.centered {
     width: 60%;
     margin-left: 20%;
     margin-right: 20%;
   }

If you need to set the table's width in some other unit of measurement, you 
probably need to fall back on margin: auto - or go back to transitional, 
unfortunately.


Thomas Dowling
OhioLINK - Ohio Library and Information Network
tdowling at ohiolink.edu