[Gllug] [OT?] Please sign my Google petition ...

Wed Jun 9 11:09:59 UTC 2004

Tethys wrote:

>So tell me how to get a centred table in Strict. That's the only thing I
>still use Transitional for. If you try:
>
>	<div style="text-align: center;">
>	<table>
>		[...]
>	</table>
>	</div>
>
>then it just appears left justified (in both Gecko and KHTML, so it's
>either a bug in both rendering engines, or I'm just doing something
>wrong). I'm guessing it's because text-align only applies to inline
>elements, which probably doesn't include tables. 
>
Quite right text-align does only apply to inline elements unless of 
course you are M$ when you ignore the specs and make it apply to block 
level elements as well. To centre your table in strict simply define the 
left and right margins with the value auto. This works fine in Gecko, 
KHTML and Opera but of course falls apart in IE5x as those browsers 
don't support margin auto. The hack here is to use text-align:center on 
the containing block and then reset it to left on the table, see [0].

>This, however, works:
>
>	<div align="center">
>	<table>
>		[...]
>	</table>
>	</div>
>
>
>  
>
The above is deprecated in the HTML4 spec

Simon
P.S no need to specify table width

[0]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Centre table using CSS</title>
<style type="text/css">
/*<![CDATA[*/
<!--
#tableContainer{
border:thin solid black;/*only used to show div area*/
text-align:center;/*IE 5x hack*/
}
#tableContainer table{
border:thin solid red;/*only used to show table area*/
text-align:left;/*undo damage from IE5x hack*/
margin:0 auto;/*centre table in compliant browsers*/
}
-->
/*]]>*/
</style>
</head>
<body>
<div id="tableContainer">
<table summary="test table to show CSS centering">
<tr>
<th>Table header 1</th>
<th>Table header 2</th>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
</body>
</html>
-- 
Gllug mailing list  -  Gllug at gllug.org.uk
http://lists.gllug.org.uk/mailman/listinfo/gllug