2.3 表格

表格在网页中的应用非常广泛，常用于网页的布局排版，它能将互相关联的信息元素准确地集中和定位在一起，因此，掌握好表格技术是制作高水平网页的关键。

2.3.1 定义表格的基本语法

在HTML中表格是通过＜table＞＜/table＞表格标记、＜tr＞＜/tr＞行标记、＜th＞＜/th＞列标题标记和＜td＞＜/td＞列内容标记等配合使用来定义的。＜table＞＜/table＞标记表明表格的开始和结束；在＜table＞＜/table＞之间的＜tr＞＜/tr＞标记表明表格行的开始和结束；在＜tr＞＜/tr＞之间的＜th＞＜/th＞表明表格列标题的开始和结束；在＜tr＞＜/tr＞之间的＜td＞＜/td＞表明表格列内容的开始和结束。简单地说就是＜table＞＜/table＞之间定义行，＜tr＞＜/tr＞之间定义列。其一般使用格式如下：

              ＜table＞
              ＜tr＞＜th＞第1行1列标题＜/th＞＜th＞第1行2列标题＜/th＞ …… ＜/tr＞
              ＜tr＞＜td＞第2行1列内容＜/td＞＜td＞第2行2列内容＜/td＞ …… ＜/tr＞
              ＜tr＞＜td＞第3行1列内容＜/td＞＜td＞第3行2列内容＜/td＞ …… ＜/tr＞
               …
               …
              ＜/table＞

其中，＜table＞＜/table＞内可以建立多行； ＜tr＞＜/tr＞内可以建立多列； ＜th＞＜/th＞定义的标题列粗体显示，也可以不用此标记。

注意：一个基本表格至少要包含一行和一列。

【例2.6】基本表格示例，ch2_6.html页面效果如所图2. 6示。

图2.6 ch2_6.html页面效果

              ＜HTML＞
              ＜HEAD＞
                ＜TITLE＞例2.6基本表格示例＜/TITLE＞
              ＜/HEAD＞
              ＜BODY＞
                  ＜center＞
                  ＜table border="1"＞
                      ＜tr＞＜th＞编号＜/th＞＜th＞姓名＜/th＞＜th＞性别＜/th＞＜th＞工作单位＜/th＞＜/tr＞
                      ＜tr＞＜td＞01＜/td＞＜td＞周全＜/td＞＜td＞男＜/td＞＜td＞北京××大学信息学院
                      ＜/td＞＜/tr＞
                      ＜tr＞＜td＞02＜/td＞＜td＞牛富荣＜/td＞＜td＞女＜/td＞＜td＞河北××大学信息学院
                      ＜/td＞＜/tr＞
                  ＜/table＞
                  ＜/center＞
              ＜/BODY＞
              ＜/HTML＞

2.3.2 表格＜table＞标记的属性

表格标记＜table＞有很多属性，常用的属性使用格式如下：

              ＜table align="水平摆放位置" width="表格宽度" height="表格高度"
                frame="四周边框显示状态" border="四周边框宽度值"rules="分隔线的显示状态"
                cellpadding="数值" cellspacing="数值"
                bordercolor="边框颜色值" bgcolor="背景颜色值"＞
              ┄ ┄
              ＜/table＞

其中，align属性为表格在页面上水平摆放的位置，取值为left、center、right等；border属性取值单位为像素，值为表格边框的宽度；cellpadding属性取值单位为像素，值为单元格内容与单元格边界之间的空白距离；cellspacing属性取值单位为像素，值为单元格之间的距离；width属性为表格宽度，取值单位为像素或页面宽度的百分比；height属性为表格高度，取值单位为像素或页面高度的百分比；frame属性为表格四周边框的显示状态，取值为box四周都显示、void不显示、hsides显示上下边框、vsides显示左右边框、alove只显示上边框、below只显示下边框、rhs只显示右边框、lhs只显示左边框；rules属性为表格内分隔线的显示方式，取值为all显示所有分隔线、groups只显示组与组之间的分隔线、rows只显示行与行之间的分隔线、cols只显示列与列之间的分隔线、none不显示所有分隔线。

【例2.7】显示表格外表框和单元格间距的表格，ch2_7.html页面效果如图2.7所示。

图2.7 ch2_7.html页面效果

              ＜html ＞
              ＜head＞
              ＜title＞例2.7表格示例＜/title＞
              ＜/head＞
              ＜body＞
              ＜table frame="box" width="290" height="130" border="10" align="center"
                  cellpadding="4" cellspacing="2" bordercolor="#ff0000"
                  bgcolor="#DDFFDD"＞
              ＜caption align="top"＞
                  我的表格
                ＜/caption＞
                ＜tr＞＜th＞编号＜/th＞＜th＞姓名＜/th＞＜th＞性别＜/th＞＜th＞工作单位＜/th＞＜/tr＞
                ＜tr＞＜td＞01＜/td＞＜td＞杨正气＜/td＞＜td＞男＜/td＞＜td＞河北××大学＜/td＞＜/tr＞
                ＜tr＞＜td＞02＜/td＞＜td＞周国正＜/td＞＜td＞女＜/td＞＜td＞北京××大学＜/td＞＜/tr＞
              ＜/table＞
              ＜/body＞
              ＜/html＞

【例2.8】显示部分外边框和内部分隔线的表格示例，ch2_8.html页面效果如图2.8所示。

图2.8 ch2_8.html页面效果

              ＜html ＞
              ＜head＞
              ＜title＞例2.8表格示例＜/title＞
              ＜/head＞
              ＜body＞
              ＜table frame="hsides" rules="rows" width="290" height="130"
                  border="20" align="center" cellpadding="4" cellspacing="2"
                  bordercolor="#ff0000" bgcolor="#55ffff"＞
                ＜tr＞＜th＞编号＜/th＞＜th＞姓名＜/th＞＜th＞性别＜/th＞＜th＞工作单位＜/th＞＜/tr＞
                ＜tr＞＜td＞01＜/td＞＜td＞杨得力＜/td＞＜td＞男＜/td＞＜td＞河北××大学＜/td＞＜/tr＞
                ＜tr＞＜td＞02＜/td＞＜td＞周国正＜/td＞＜td＞女＜/td＞＜td＞北京××大学＜/td＞
                ＜/tr＞
              ＜/table＞
              ＜/body＞
              ＜/html＞

2.3.3 行＜tr＞标记的属性

行＜tr＞标记有许多属性，使用的一般格式如下：

              ＜tr align="center" valign="bottom" bordercolor="red" bgcolor="blue"
              bordercolorlight="#FF0000" bordercolordark= "green" height="30" ＞

其中，align属性为行内容的水平对齐方式，取值为left、right、center；valign属性为行内容的垂直对齐方式，取值为top、middle、bottom、baseline；bordercolor属性取值为行的边框颜色；bgcolor属性取值为行的背景颜色；bordercolorlight属性取值为行的亮边框颜色；bordercolordark属性取值为行的暗边框颜色；height属性为行的高度，单位为像素。

【例2.9】设置表格行属性的表格示例，ch2_9.html页面效果如图2.9所示。

图2.9 ch2_9.html页面效果

              ＜html ＞
              ＜head＞
              ＜title＞例2.9表格示例＜/title＞
              ＜/head＞
              ＜body＞
              ＜table width="350"  bordercolor="#FF0000" heigth="290" border="10"
                  align="center" cellpadding="4" cellspacing="2"＞
                ＜tr align="center" valign="middle"  bordercolor="#0000FF"＞
                  ＜th＞编号＜/th＞＜th＞姓名＜/th＞＜th＞性别＜/th＞＜th＞工作单位＜/th＞＜/tr＞
                ＜tr align="center" valign="top"  bordercolordark="#00FF00"
                  bordercolorlight="#FF0000"＞
                  ＜td＞01＜/td＞＜td＞杨得力＜/td＞＜td＞男＜/td＞＜td＞河北××大学＜/td＞＜/tr＞
                ＜tr align="right" valign="baseline" bgcolor="#CC99FF"＞
                  ＜td＞02＜/td＞＜td＞周国正＜/td＞＜td＞女＜/td＞＜td＞北京××大学＜/td＞
                ＜/tr＞
              ＜/table＞
              ＜/body＞
              ＜/html＞

2.3.4 单元格＜td＞和＜th＞标记的属性

＜td＞和＜th＞都是插入单元格的标记，必须嵌套在＜tr＞＜/tr＞标记中，并且成对出现。＜th＞是标题标记，其中字体用粗体显示；＜td＞是数据标记。＜td＞和＜th＞标记的属性相同，下面以＜td＞标记为例介绍单元格属性的使用方法。

              ＜td width="300" height="80%" align="left"  valign="bottom"
                  bordercolor="#FFFF00" bgcolor="#FF0000" bordercolordark="#FF0000"
                  bordercolorlight="#FF00FF" colspan="2" rowspan="3"
                  background="背景图片文件名"＞ 单元格内容＜/td＞

其中，width属性为单元格宽度，取值为像素数或百分比；height属性为单元格的高度，取值为像素数或百分比；align属性为单元格内容的水平排列方式，取值为left、right、center；valign属性为单元格内容的垂直对齐方式，取值为middle、top、bottom、baseline；bordercolor属性为单元格边框的颜色；bgcolor属性为单元格背景的颜色；bordercolorlight属性为单元格亮边框的颜色；bordercolordark属性为单元格暗边框的颜色；colspan属性为单元格向右打通的列数，用于合并单元格；rowspan属性为单元格向下打通的行数，用于合并单元格。

【例2.10】设置单元格行格式或列格式的表格示例，ch2_10.html页面效果如图2.10所示。

图2.10 ch2_10.html页面效果

              ＜html ＞
              ＜head＞
              ＜title＞例2.10表格示例＜/title＞
              ＜/head＞
              ＜body＞
              ＜table width="350"  bordercolor="#FF0000" heigth="290" border="10"
                  align="center" cellpadding="4" cellspacing="2"＞
                ＜tr ＞
                  ＜th＞编号＜/th＞＜th＞姓名＜/th＞＜th＞性别＜/th＞
              ＜th align="center" valign="middle" bgcolor="#FFFF00"＞工作单位＜/th＞
                ＜/tr＞
                ＜tr ＞
                  ＜td width="50" height="30" align="left" valign="bottom"
                  bordercolor="#0000FF" bgcolor="#00FF00"＞01＜/td＞
                  ＜td align="right"  bordercolorlight="#00FF00"
                  bordercolordark="#333333" bgcolor="#FFFF00"＞杨得力＜/td＞
                  ＜td＞男＜/td＞
                  ＜td align="center" valign="middle" bgcolor="#FFFF00"＞河北××大学＜/td＞
                ＜/tr＞
                ＜tr ＞
                  ＜td＞02＜/td＞
                  ＜td＞周国正＜/td＞
                  ＜td＞女＜/td＞
                  ＜td align="center" valign="middle" bgcolor="#FFFF00"＞北京××大学＜/td＞
                ＜/tr＞
              ＜/table＞
              ＜/body＞
              ＜/html＞

【例2.11】设定跨多行多列的单元格表格示例，ch2_11.html页面效果如图2.11所示。

图2.11 ch2_11.html页面效果

              ＜html ＞
              ＜head＞
              ＜title＞例2.11表格示例＜/title＞
              ＜/head＞
              ＜body＞
              ＜table width="302"  bordercolor="#FF0000" heigth="290" border="10"
                  align="center" cellpadding="4" cellspacing="2"＞
                ＜tr ＞
                  ＜th colspan="3"＞基本信息＜/th＞
                  ＜th width="101" rowspan="2" ＞工作单位＜/th＞
                ＜/tr＞
                ＜tr ＞
                  ＜th width="39"＞编号＜/th＞
                  ＜th width="53"＞姓名＜/th＞
                  ＜th width="39"＞性别＜/th＞
                ＜/tr＞
                ＜tr ＞
                  ＜td＞01＜/td＞
                  ＜td＞杨得力＜/td＞
                  ＜td＞男＜/td＞
                  ＜td rowspan="2"＞河北××大学＜/td＞
                ＜/tr＞
                ＜tr ＞
                  ＜td＞02＜/td＞
                  ＜td＞周文正＜/td＞
                  ＜td＞女＜/td＞
                ＜/tr＞
                ＜tr ＞
                  ＜td＞03＜/td＞
                  ＜td＞杨有力＜/td＞
                  ＜td＞男＜/td＞
                  ＜td rowspan="2"＞北京××大学＜/td＞
                ＜/tr＞
                ＜tr ＞
                  ＜td＞04＜/td＞
                  ＜td＞周国正＜/td＞
                  ＜td＞女＜/td＞
                ＜/tr＞
              ＜/table＞
              ＜/body＞
              ＜/html＞
上一章目录下一章