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

从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〉表露功效：

　　5.2.2表格后台脸色和后台图片

　　在html中，可用来树立后台东西后台脸色和后台图片的属性辨别是bgcolor和background，不妨为所有表格树立后台，也树立单位格的后台。

例1：有后台图片的表格〈table border="3" cellpadding="2" width="200" height="50" background="../images/bg.jpg" bgcolor="#88dd88"〉

表露功效：

例2：单位格的后台树立〈table border="3" cellpadding="2" width="30%" height="50"〉〈tr bordercolorlight="#008000" bordercolordark="#88dd88"〉〈th width="100%" background="../images/bg.jpg"〉　〈/th〉〈/tr〉〈tr〉〈td width="100%" bgcolor="#88dd88"〉　〈/td〉〈/tr〉〈/table〉表露功效：

　　5.2.3表格构造

　　 表格在网页中的构造经过align属性来设置：align=left | center | right。align属性仅设置表格程度对齐办法。

例：居中对齐的表格〈table align=center border="1" width="50%" bordercolor="#008000"〉

　　 其余，咱们还不妨指定表格及单位格的莫大和宽窄，方法如次：　　 〈table width=n height=n〉 指定表格的宽窄和莫大，n不妨是平头或百分数。当n取平头值时，设置了表格的一致尺寸，单元是像素；n取百分数，表白表格尺寸与暂时页面尺寸的比率。　　 〈tr width=n height=n〉 设置表格中国银行的尺寸，n的取值办法与〈table〉中沟通。n取百分数是对立于表格的尺寸而言的。　　 〈td width=n height=n〉 规则单位格尺寸，n的取值办法与〈tr〉同。　　 〈table cellspacing= n〉 设置单位格之间的间距。　　 接下来让咱们看一个表格构造的范例。

例：一个居右表露、设置了尺寸的表格的html代码：〈table align=right border="1" width="40%" bordercolor="#008000" height="30"〉〈tr height="15"〉〈td width="25%"〉　〈/td〉〈td〉　〈/td〉〈/tr〉〈tr〉〈td width="25%"〉　〈/td〉〈td〉 〈/td〉〈/tr〉〈/table〉表露功效：

　　5.3特出情势的表格　　 常常咱们看到的表格情势五花八门的，有的行超过多列，有的列超过多个行，再有的表中有表，这一节中咱们就看看那些特出情势的表格是如何实行的。　　5.3.1有通栏的表格在〈td〉标志中，colspan属性规则暂时表元要超过table中几何列，rowspan属性用来设置暂时表元要超过table中几何行，运用这两个属性就不妨创造出有通栏的表格。

例1：有横向通栏的表格。〈table align=center border="1" width="40%" bordercolor="#008000"〉 　 　 　〈tr〉〈td width="100%" colspan="3"〉　〈/td〉〈/tr〉〈tr〉〈td width="34%"〉　〈/td〉〈td width="33%"〉　〈/td〉〈td width="33%"〉　〈/td〉〈/tr〉〈/table〉

例2：有纵向通栏的表格。〈table align=center border="1" width="30%" bordercolor="#008000"〉〈tr〉〈td width="20%" rowspan="3"〉〈/td〉〈td〉〈/td〉〈/tr〉〈tr〉〈td〉〈/td〉〈/tr〉〈tr〉〈td〉〈/td〉〈/tr〉〈/table〉

　　5.3.2表格嵌套

　　 表格嵌套即是把一个表格动作其余一个表格某格单位格的实质，也即是在表格中创造表格。

例3：表格嵌套。〈table border="1" width="200" bordercolor="#000000" cellspacing="0" cellpadding="2"〉〈tr〉〈td width="20%" rowspan="2"〉　〈/td〉〈td〉　〈/td〉〈/tr〉〈tr〉〈td〉〈table border="1" width="100%" bordercolor="#000099" cellspacing="0"〉〈tr〉〈td width="20%"〉　〈/td〉〈td〉　〈/td〉〈/tr〉〈tr〉〈td width="20%"〉　〈/td〉〈td〉　〈/td〉〈/tr〉〈/table〉〈/td〉〈/tr〉〈/table〉

　　5.4表格中的文本

　　表格单位格中的文本（也不妨是图像大概表格）对齐办法由align和valign这两个属性的值确定，基础方法为：　　〈table align=# valign=# 〉 个中，　　align=left | center | right 设置了单位格实质的程度对齐办法。　　valgin=baseline | bottom | middle | top 决定一个元素在单位格中的笔直对齐办法。baseline表白纵向对齐到字体基线上；bottom表白与单位格底边对齐；middle表白左右居中；top则是与单位格顶边对齐。　　还不妨用cellpadding属性安排表华文本与单位格边框的隔绝。　　〈table cellpadding=n 〉 设置对所有表格灵验。n以像素为单元。　　〈td cellpadding=n 〉 设置仅对暂时单位格灵验。

例：创造一个两行三列的表格，表华文本程度、笔直居中表露，单位格边距为5个像素。〈table border="1" width="200" cellpadding="5" cellspacing="0"〉〈tr〉〈th width="33%" align="center" valign="middle" 〉全名〈/th〉〈th width="33%" align="center" valign="middle" 〉性别〈/th〉〈th width="34%" align="center" valign="middle" 〉年纪〈/th〉〈/tr〉〈tr〉〈td width="33%" align="center" valign="middle" 〉李旦〈/td〉〈td width="33%" align="center" valign="middle" 〉男〈/td〉〈td width="34%" align="center" valign="middle" 〉14〈/td〉〈/tr〉〈/table〉

全名

性别

年纪

李旦

男

14