从HTML语言到网上家园第五章

2011/1/9 佚名点击：来源：网络

从HTML语言到网上家园第五章网页中的表格

　　5.1表格的基本形式

　　表格基本形式：
　　〈table〉
　　〈tr〉
　　　〈th〉……〈/th〉
　　〈/tr〉
　　〈tr〉
　　　〈td〉……〈/td〉
　　〈/tr〉
　　〈/table〉
　　〈table〉……〈/table〉用于定义表格。〈tr〉定义表中的行，一个表中有多少行，就有多少个〈tr〉。〈th〉用于定义表头，〈td〉定义表元，表元中包含了表格的具体数据。

　　5.2表格属性

　　5.2.1表格边框设置

　　和表格边框设置有关的〈table〉元素属性有：
　　BORDER=n 定义表格边框宽度。BORDER＝0 为无边框表格。
　　BORDERCOLOR=color 设置表格边框颜色，当BORDER＝0时此值无效。
　　BORDERCOLORDARK=color 设置表格亮边框的颜色。
　　BORDERCOLORLTGHT=color 设置表格暗边框的颜色。
　　BORDERCOLORDARK 和BORDERCOLORLTGHT一起用来绘制三维边框，两者是相对立的，当BORDER＝0时此两者无效。

例：
（1）无边框表格html代码：
〈table border="0" cellpadding="2" width=200〉
〈tr〉
〈th width="33%"〉姓名〈/th〉
〈th width="33%"〉性别〈/th〉
〈th width="34%"〉年龄〈/th〉
〈/tr〉
〈tr〉
〈td width="33%" align="center"〉李旦〈/td〉
〈td width="33%" align="center"〉男〈/td〉
〈td width="34%" align="center"〉14〈/td〉
〈/tr〉
〈/table〉
显示效果：姓名性别年龄李旦男 14

（2）有边框表格html代码：
〈table align=center border="5" cellpadding="3" width=40% bordercolordark="#88DD88" bordercolorlight="#008000" bordercolor="#000080" cellspacing="3"〉
〈tr〉
〈th width="33%"〉〈font color="#000000"〉姓名〈/font〉〈/th〉
〈th width="33%"〉〈font color="#000000"〉性别〈/font〉〈/th〉
〈th width="34%"〉〈font color="#000000"〉年龄〈/font〉〈/th〉
〈/tr〉
〈tr〉
〈td width="33%" align="center"〉〈font color="#000000"〉李旦〈/font〉〈/td〉
〈td width="33%" align="center"〉〈font color="#000000"〉男〈/font〉〈/td〉
〈td width="34%" align="center"〉〈font color="#000000"〉14〈/font〉〈/td〉
〈/tr〉
〈/table〉
显示效果：姓名性别年龄李旦男 14

在该表格中，外围宽边部分是表格边框，深绿色部分是亮边框，浅绿色部分是暗边框。

　　以上是设置整个表格的边框和颜色，还可以为每个单元格设置独立的边框颜色。BORDERCOLOR，BORDERCOLORDARK和BORDERCOLORLTGHT属性对〈tr〉，〈td〉和〈th〉同样可用，用法与在〈table〉中相同。

例1：设置表中行元素〈tr〉的边框。
〈tr bordercolorlight="#008000" bordercolordark="#88DD88"〉
显示效果：
例2：设置表头元素〈th〉的边框。
〈th width="50%" bordercolor="#008000" bordercolorlight="#008000" bordercolordark="#88DD88" border=3〉　〈/th〉
〈th width="50%" bordercolor="#008000" border=3〉　〈/th〉
显示效果：　　

例3：设置表中单元格〈td〉的边框。
〈td width="50%" bordercolor="#008000" border=3〉　〈/td〉
〈td width="50%" bordercolorlight="#008000" bordercolordark="#88DD88" border=3〉　〈/td〉
显示效果：

[1] [2] [3] [4] [5] [6] 下一页