HTML表格入门

《HTML表格入门》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、HTML表格入门使用表格排版网页　　使用表格排版网页，可以使你的网页更美观，条理更清晰，更易于维护和更新。（将表格的宽设为100%，可以使网页的兼容性更好）　　　　要尽量细化表格　　不要把整个网页放在一个大的表格里，因为一个大表格里的内容要全部加载完才会显示，如果整个网页放在一个表格里，那么你的网页就只会两种情况：　　　　1、全部不显示　　2、全部显示出来　　　　所以建议大家将整个页面分成几块，例如通用的上（放置Logo、Banner、Menu等等）、中（放置页面内容）、下（放置版权信息等等），将每一部分由单独的表格来实现，这

2、样会好一些。表格设计实例　　创建一个表格，边框大小设为0（border=0），间距设为1（cellspacing="1"），背景色设为深色（bgcolor="#000000"），全部选定单无格，并将单无格的背景色设为浅色（如:bgcolor="#FFFFFF"），这样可以得到一个细线边框的表格，请看下面的例子：　　　　〈tablewidth="50%"border="0"cellspacing="1"bgcolor="#000000"＞　　＜trbgcolor="#FFFFFF"＞　　＜td＞ ＜/td＞　　＜td＞

3、 ＜/td＞　　＜/tr＞　　＜trbgcolor="#FFFFFF"＞　　＜td＞ ＜/td＞　　＜td＞ ＜/td＞　　＜/tr＞　　＜/table〉　　　　动态改变表格单元格的颜色　　在单元格＜td＞标记中加入以下代码，会动态改变单元格的颜色设置：　　onMouseOut=”this.bgColor=’’”onMouseOver=”this.bgColor=’’”　　　　在行标签＜tr＞标记中加入上面代码，会动态改变一行的颜色设置。　　　　〈tablewidth="50%"border="0

4、"cellspacing="1"bgcolor="#000000"＞　　＜trbgcolor="#FFFFFF"onMouseOver="this.bgColor='#00CC00'"onMouseOut="this.bgColor='#FFFFFF'"＞　　＜td＞ ＜/td＞　　＜td＞ ＜/td＞　　＜/tr＞　　＜trbgcolor="#FFFFFF"＞　　＜tdonMouseOver="this.bgColor='#FFFF00'"onMouseOut="this.bgColor='#FFFFFF

5、'"＞ ＜/td＞　　＜tdonMouseOver="this.bgColor='#FFFF00'"onMouseOut="this.bgColor='#FFFFFF'"＞ ＜/td＞　　＜/tr＞　　＜/table〉　用表格替代水平线、竖直线　　用表格代替水平线，插入一个表格，将高度设为1（按需要设定），当然也可以将宽度设为1，制作竖直线。　　　　〈tablewidth="100"border="0"align="center"cellpadding="0"cellspacing="0"＞　　＜tr＞　　

6、＜tdheight="1"bgcolor="#000000"＞＜/td＞　　＜/tr＞　　＜/table＞　　＜br＞　　＜tableheight="100"border="0"align="center"cellpadding="0"cellspacing="0"＞　　＜tr＞　　＜tdwidth="1"bgcolor="#000000"＞＜/td＞　　＜/tr＞　　＜/table〉　　　　注意：在Dreamweaver里制作时，先将高设为1后，切换到代码窗口，将表格里的空格符去掉（ ），如果不将空格去除的话，将看

7、不到想要的效果了。　　　　制作带有立体感的表格　　在页面中适当的加入带有立体感的表格元素，会给你的页面添光加彩。　　　　〈tablewidth="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

8、＞ ＜/td＞　　＜/tr＞　　＜/table＞　　＜br＞　　＜tablewidth="30%"border="1"align="center"cellpadding="1"cellspacing="2"bgcolor="#9999CC"＞　　＜tr＞　　＜td＞