表格不能垂直居中问题解决一例

王朝other·作者佚名  2006-01-08
宽屏版  字体: |||超大  

近日,朋友在使用DreamWeaver 2004写一个HTML时,发现表格不能垂直居中,很是困惑,源代码为:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

</head>

<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="77" align="left" bgcolor=red>&nbsp;</td>

<td align="center" valign="middle" bgcolor=green>&nbsp;</td>

<td width="77" align="left" bgcolor=blue>&nbsp;</td>

</tr>

</table>

</body>

</html>

笔者分析本代码并没有什么不妥,甚感怪异,后来笔者对多份能成功居中的HTML和用DREAMWEAVER2004创建的不能居中的HTML进行比较,发现,使用凡是使用DreamWeaver2004写的不能居中的HTML都有这样的文档定义:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

删除这行或修改为:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

后,问题得以解决。

修改后的代码为:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

</head>

<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="77" align="left" bgcolor=red>&nbsp;</td>

<td align="center" valign="middle" bgcolor=green>&nbsp;</td>

<td width="77" align="left" bgcolor=blue>&nbsp;</td>

</tr>

</table>

</body>

</html>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
© 2005- 王朝网络 版权所有