HTML表格使用从入门到精通
时间：2007-02-17 来源：PHP爱好者
如果你是一名网页设计人员，如果你的网页里没有一个表格，那可以说算不上一个网页（当然全FLASH作品除外），表格的重要性就可想而知。帮助我们控制网页布局、控制内容的显示等等。使用表格有很多的技巧，你可否知道呢？
使用表格排版网页
使用表格排版网页，可以使你的网页更美观，条理更清晰，更易于维护和更新。（将表格的宽设为100%，可以使网页的兼容性更好）
要尽量细化表格
不要把整个网页放在一个大的表格里，因为一个大表格里的内容要全部加载完才会显示，如果整个网页放在一个表格里，那么你的网页就只会两种情况：
1、全部不显示
2、全部显示出来
所以建议大家将整个页面分成几块，例如通用的上（放置Logo、Banner、Menu等等）、中（放置页面内容）、下（放置版权信息等等），将每一部分由单独的表格来实现，这样会好一些。
表格设计实例
创建一个表格，边框大小设为0（border=0），间距设为1（cellspacing="1"），背景色设为深色（bgcolor="#000000"），全部选定单无格，并将单无格的背景色设为浅色（如:bgcolor="#FFFFFF"），这样可以得到一个细线边框的表格，请看下面的例子：
〈table width="50%" border="0" cellspacing="1" bgcolor="#000000"＞
＜tr bgcolor="#FFFFFF"＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜tr bgcolor="#FFFFFF"＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table〉
动态改变表格单元格的颜色
在单元格＜td＞标记中加入以下代码，会动态改变单元格的颜色设置：
onMouseOut=”this. bgColor=’’” onMouseOver=”this.bgColor=’’”
在行标签＜tr＞标记中加入上面代码，会动态改变一行的颜色设置。
〈table width="50%" border="0" cellspacing="1" bgcolor="#000000"＞
＜tr bgcolor="#FFFFFF" onMouseOver="this.bgColor=‘#00CC00‘" onMouseOut="this.bgColor=‘#FFFFFF‘"＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜tr bgcolor="#FFFFFF"＞
＜td onMouseOver="this.bgColor=‘#FFFF00‘" onMouseOut="this.bgColor=‘#FFFFFF‘"＞ ＜/td＞
＜td onMouseOver="this.bgColor=‘#FFFF00‘" onMouseOut="this.bgColor=‘#FFFFFF‘"＞ ＜/td＞
＜/tr＞
＜/table〉 用表格替代水平线、竖直线
用表格代替水平线，插入一个表格，将高度设为1（按需要设定），当然也可以将宽度设为1，制作竖直线。
〈table width="100" border="0" align="center" cellpadding="0" cellspacing="0"＞
＜tr＞
＜td height="1" bgcolor="#000000"＞＜/td＞
＜/tr＞
＜/table＞
＜br＞
＜table height="100" border="0" align="center" cellpadding="0" cellspacing="0"＞
＜tr＞
＜td width="1" bgcolor="#000000"＞＜/td＞
＜/tr＞
＜/table〉
注意：在Dreamweaver里制作时，先将高设为1后，切换到代码窗口，将表格里的空格符去掉（ ），如果不将空格去除的话，将看不到想要的效果了。
制作带有立体感的表格
在页面中适当的加入带有立体感的表格元素，会给你的页面添光加彩。
〈table width="30%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC"＞
＜tr＞
＜td＞A＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
＜br＞
＜table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bgcolor="#9999CC"＞
＜tr＞
＜td＞B＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
＜br＞
＜table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC"＞
＜tr＞
＜td＞C＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table〉
小技巧：效果图中的凸凹效果，完全是由bordercoloer的颜色来控制的，它的颜色浅一些，有会有凸出的效果，它的颜色深一点，就会有凹陷的效果。 隐藏表格的分隔线
在处理表格时有时会有这样的需求，某几列、或行的内容属于同一主题，为了排列整齐将它们放在不同的行上，但是不想让表格的分隔线显示出来，有什么办法吗，其实很简单。
隐藏水平分隔线
〈table border rules=cols cellspacing=0 align=left>
隐藏竖直分隔线
〈table border rules=rows cellspacing=0 align=left>
隐藏全部分隔线
〈table border rules=none cellspacing=0 align=left>
表格内容分行下载
表格内有一些载入较慢的元素（如计数器、大图片等等）时，往往会延迟整个表格的显示。这是由IE的显示特性决定的，只有当表格内所有元素全部载入后，整个表格才得以显示。“上有政策，下有对策”，我们可以使用标签把表格内容拆开，放在几个竖向相连的大表格中，把关键内容放在上面的表格中，让它们先显示，这样用户就不会因为失去耐心而关闭窗口了。 站长注：在使用上面代码学习时注意把“＞”和“＜”变为“>”和“<”。
php爱好者站 http://www.ｐｈｐfans.net Linux|Apache|IIS.
使用表格排版网页
使用表格排版网页，可以使你的网页更美观，条理更清晰，更易于维护和更新。（将表格的宽设为100%，可以使网页的兼容性更好）
要尽量细化表格
不要把整个网页放在一个大的表格里，因为一个大表格里的内容要全部加载完才会显示，如果整个网页放在一个表格里，那么你的网页就只会两种情况：
1、全部不显示
2、全部显示出来
所以建议大家将整个页面分成几块，例如通用的上（放置Logo、Banner、Menu等等）、中（放置页面内容）、下（放置版权信息等等），将每一部分由单独的表格来实现，这样会好一些。
表格设计实例
创建一个表格，边框大小设为0（border=0），间距设为1（cellspacing="1"），背景色设为深色（bgcolor="#000000"），全部选定单无格，并将单无格的背景色设为浅色（如:bgcolor="#FFFFFF"），这样可以得到一个细线边框的表格，请看下面的例子：
〈table width="50%" border="0" cellspacing="1" bgcolor="#000000"＞
＜tr bgcolor="#FFFFFF"＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜tr bgcolor="#FFFFFF"＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table〉
动态改变表格单元格的颜色
在单元格＜td＞标记中加入以下代码，会动态改变单元格的颜色设置：
onMouseOut=”this. bgColor=’’” onMouseOver=”this.bgColor=’’”
在行标签＜tr＞标记中加入上面代码，会动态改变一行的颜色设置。
〈table width="50%" border="0" cellspacing="1" bgcolor="#000000"＞
＜tr bgcolor="#FFFFFF" onMouseOver="this.bgColor=‘#00CC00‘" onMouseOut="this.bgColor=‘#FFFFFF‘"＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜tr bgcolor="#FFFFFF"＞
＜td onMouseOver="this.bgColor=‘#FFFF00‘" onMouseOut="this.bgColor=‘#FFFFFF‘"＞ ＜/td＞
＜td onMouseOver="this.bgColor=‘#FFFF00‘" onMouseOut="this.bgColor=‘#FFFFFF‘"＞ ＜/td＞
＜/tr＞
＜/table〉 用表格替代水平线、竖直线
用表格代替水平线，插入一个表格，将高度设为1（按需要设定），当然也可以将宽度设为1，制作竖直线。
〈table width="100" border="0" align="center" cellpadding="0" cellspacing="0"＞
＜tr＞
＜td height="1" bgcolor="#000000"＞＜/td＞
＜/tr＞
＜/table＞
＜br＞
＜table height="100" border="0" align="center" cellpadding="0" cellspacing="0"＞
＜tr＞
＜td width="1" bgcolor="#000000"＞＜/td＞
＜/tr＞
＜/table〉
注意：在Dreamweaver里制作时，先将高设为1后，切换到代码窗口，将表格里的空格符去掉（ ），如果不将空格去除的话，将看不到想要的效果了。
制作带有立体感的表格
在页面中适当的加入带有立体感的表格元素，会给你的页面添光加彩。
〈table width="30%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC"＞
＜tr＞
＜td＞A＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
＜br＞
＜table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bgcolor="#9999CC"＞
＜tr＞
＜td＞B＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
＜br＞
＜table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC"＞
＜tr＞
＜td＞C＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table〉
小技巧：效果图中的凸凹效果，完全是由bordercoloer的颜色来控制的，它的颜色浅一些，有会有凸出的效果，它的颜色深一点，就会有凹陷的效果。 隐藏表格的分隔线
在处理表格时有时会有这样的需求，某几列、或行的内容属于同一主题，为了排列整齐将它们放在不同的行上，但是不想让表格的分隔线显示出来，有什么办法吗，其实很简单。
隐藏水平分隔线
〈table border rules=cols cellspacing=0 align=left>
隐藏竖直分隔线
〈table border rules=rows cellspacing=0 align=left>
隐藏全部分隔线
〈table border rules=none cellspacing=0 align=left>
表格内容分行下载
表格内有一些载入较慢的元素（如计数器、大图片等等）时，往往会延迟整个表格的显示。这是由IE的显示特性决定的，只有当表格内所有元素全部载入后，整个表格才得以显示。“上有政策，下有对策”，我们可以使用标签把表格内容拆开，放在几个竖向相连的大表格中，把关键内容放在上面的表格中，让它们先显示，这样用户就不会因为失去耐心而关闭窗口了。 站长注：在使用上面代码学习时注意把“＞”和“＜”变为“>”和“<”。
php爱好者站 http://www.ｐｈｐfans.net Linux|Apache|IIS.
相关阅读 更多 +
