第 6章 表格
6.1 定义表格的基本语法
6.2 表格的定义
6.3 表格行的控制
6.4 单元格的控制
6.5 表格的分组
6.6 设置表格的标题 caption
6.1 定义表格的基本语法
在 HTML中,表格的建立将运
用 <table>,<tr>,<th>,<td>四
个标签完成。下面是这四个标签
的说明
定义表格标签 <table></table>
? <table>标签用于定义一个表格元素,一
个表格元素,是由数个横行( <tr>)、
单元格( <td>)与表头单元格( <th>)
子元素所组成。
定义表行标签 <tr></tr>
? <tr>标签用于定义表格的一行,在
一组 <tr>标签内可建立一行表格,
也可以包含数组由 <td>或 <th>标签
所定义的单元格。
定义单元格标签 <td></td>
? <td>标签用于定义表格的单元格,
<td>标签必须放在 <tr>标签内。
? 数据标签 <td>是成对出现标签,首标签
<td>和尾标签 </td>之间的内容就是该单
元格中的具体数据。
注:在一个最基本的表格元素中,必须包含一组
<table>标签、一组 <tr>标签与一组 <td>标签。
定义表头标签 <th></th>
? <th>标签用于定义表格内的表头单元格,此单
元格中的文字将以粗体的方式显示
? <th>标签是成对出现标签,首标签 <th>和尾标
签 </th>之间的内容就是位于该单元格的表头
元素内容。
? 在一个表格的定义语法中也可以不使用 <th>标
签,定义表头单元格。
文件 ex6-01.html的源代码,
<html>
<head><title>一个简单的表格 </title></head>
<body>
<table border=1>
<tr>
<th>姓名 </th>
<th>性别 </th>
<th>年龄 </th>
<th>专业 </th>
</tr>
<tr>
<td>张东健 </td>
<td>男 </td>
<td>18</td>
<td>计算机 </td>
</tr>
</table>
</body>
</html>
<table>是用于定义一个表格元素的标
签。 <table>标签的属性主要有 border、
bordercolor,bordercolorlight、
bordercolordark,width,height,align、
bgcolor,background,cellapacing、
cellpadding,frame和 rules,它们都是可
选的。
6.2 表格的定义
设置边框尺寸的语法如下,
<table border="数值 ">
border属性的参数值是数字,表示
表格边框宽度 所占的像素点数。例如,
<table border=10>表示表格的边框宽度
为 10个像素点。
6.2.1 设置表格边框的尺寸 border
设置表格边框颜色的基本语法如下,
<table bordercolor="#">
设置表格边框颜色的亮度的基本语法如下,
<table bordercolorlight="#">
<table bordercolordark="#">
其中,,#”取值为 16进制的颜色代码,参见
表 2.3颜色代码表。
6.2.2 设置表格边框的颜色
6.2.3 设置表格的尺寸 width/height
设置表格尺寸的语法如下,
<table width="数值 " height="数值 ">
width和 height属性的作用是指定表格的大小。
其中 width属性用以规定表格的宽度,height属性用以
规定表格的高度 。这两个属性的参数值 可以是数字或
百分数
例,<table width=200 height=50%>
表示该表格的宽度为 200个像素点,高度为浏览器窗口
高度的 50%。
设置表格的位置的基本语法如下,
<table align="参数值 ">
align属性的参数值为 left,center和
right之一,分别 表示表格位于其相邻文字
的左侧、表格水平居中和表格位于与其相邻的
文字右侧。
6.2.4 设置表格的位置 align
6.2.5 设置表格的背景颜色或背景图像
设置表格的背景颜色或背景图像的基本语法
如下,
<table bgcolor="#">
<table background="URL">
其中,,#”取值为 16进制的颜色代码,参见
表 2.3颜色代码表。
6.2.6 设置格框线的宽度 cellspacing
设置格框线宽度的语法如下,
<table cellspacing="数值 ">
在 格与格之间有间隔线,称其为格框线 。
使用 cellspacing属性可以指定格框线
的宽度。
该属性的参数值取像素值,默认值为 2。
加宽了格框线,表格会变得大一些。
6.2.7 设置格框与内容的空隙 cellpadding
设置格框与内容的空隙的语法如下,
<table cellpadding="数值 ">
cellpadding属性用于指定单元格内容与单
元格边界之间空白距离的大小 。该属性的参数值取
像素值,表示单元格内容与上下边界之间空白距离
的高度所占的像素点数以及单元格内容与左右边界
之间空白距离的宽度所占的像素点数。
设置表格的左边框、右边框、上边框、下边框为显
示或者隐藏。
设置表格边框显示状态的基本语法如下,
显示整个表格边框 <table frame="box">
不显示表格边框 <table frame="void">
只显示表格的上下边框 <table frame="hsides">
只显示表格的左右边框 <table frame="vsides">
只显示表格的上边框 <table frame="above">
只显示表格的下边框 <table frame="below">
只显示表格的左边框 <table frame="lhs">
只显示表格的右边框 <table frame="rhs">
6.2.8 设置表格边框的显示状态 frame
6.2.9 设置分隔线的显示状态 rules
设置表格中分隔线的显示状态,各种效果如图所示。
设置表格中分隔线的显示状态的基本语法如下,
显示所有分隔线 <table rules="all">
只显示组与组的分隔线 <table rules="groups">
只显示行与行的分隔线 <table rules="rows">
只显示列与列的分隔线 <table rules="cols">
所有分隔线都不显示 <table rules="none">
6.3 表格行的控制
HTML中的表格是按行组织的。一个表格由几
行组成,就要有几个行标签与之相应对。 <tr>标
签有 height,bordercolor,bgcolor,align和
valign属性,它们都是可选的。
height属性可控制表格内某行的高度,此
属性的设置语法如下,
<tr height="数值 ">
数值的设置值为一整数,其单位为像素
( Pixel)。
6.3.1 设置行的高度 height
bordercolor属性用于控制表格某行内边框
颜色,此属性的设置语法如下,
<tr bordercolor="#">
其中,,#”取值为 16进制的颜色代码。
6.3.2 设置行内框的颜色 bordercolor
bgcolor属性可以控制表格中该行单元格的
背景颜色,设置语法如下,
<tr bgcolor="#">
其中,,#”取值为 16进制的颜色代码,参
见表 2.3颜色代码表。
6.3.3 设置行的背景颜色 bgcolor
align属性可以控制表格中该行单元格内
文字的水平对齐方式,设置语法如下,
<tr align="参数值 ">
其中,参数值为 left,center,right之
一,分别表示该行中各单元格内容是左对齐、水
平居中和右对齐的。 align属性的缺省值为 left。
6.3.4 设置行的文字水平对齐方式 align
valign属性可以控制表格中该行单元格内
文字的垂直方向对齐方式,设置语法如下,
<tr valign="参数值 ">
其中,参数值为 top,middle和 bottom之
一,分别表示该行中各单元格内容是上对齐、垂
直居中和下对齐的。 valign属性的缺省值为
middle。
6.3.5 设置行的文字垂直对齐方式 valign
表格行的控制总示例
?<th>和 <td>标签都是用于规定单元格内容的。除了表头
元素是以粗体显示这一点外,表头元素和具体数据元素
几乎没有什么区别。
?<th>和 <td>标签的所有属性及相应的属性功能是完全一
样的。 <th> 和 <td>标签的属性有 bordercolor,bgcolor、
background,width,align,valign,rowspan、
colspan,它们都是可选的。
6.4 单元格的控制
当 bordercolor属性设置在 <td>或 <th>标签
中时,将可控制表格内某单元格的边框颜色,此
属性的设置语法如下,
<td bordercolor="#">
<th bordercolor="#">
其中,,#”取值为 16进制的颜色代码。
6.4.1 设置单元格边框的颜色 bordercolor
当 bgcolor/background属性使用在
<td>或 <th>标签时,可以控制表格中某单元
格的背景颜色和背景图像,设置语法如下,
<th bgcolor="#">
<th background="URL">

<tr bgcolor="#">
<tr background="URL">
其中, #”的取值为 16进制颜色代码。
6.4.2 设置单元格的背景颜色和背景图像
当 width属性设置在 <td>或 <th>标签中
时,可控制表格中某单元格的宽度,设置语
法如下,
<th width="数值 ">
<td width="数值 ">
此属性的参数值可以是数字或百分数,
其中数字表示此单元格宽度所占的像素点数,
百分数表示此单元格的宽度占整个表格宽度
的百分比。
6.4.3 设置单元格的宽度 width
前面三个知识点示例
在表格的使用中,有时会遇到某些数据占多行多
列的情况。可以使用 <th>或 <td>标签中的 colspan和
rowspan属性来实现 。设置语法如下,
<td colspan="数值 ">
<th colspan="数值 "> 或 <td rowspan="数值 ">
<th rowspan="数值 ">
rowspan属性的参数值是数字,表示该单元格所跨
的行数。该属性的缺省值为 1。
colspan属性的参数值是数字,表示该单元格所
跨的列数。该属性的缺省值也是 1。
6.4.4 设置跨多行跨多列的单元格
可以在 <th>和 <td>标签中使用 align和 valign属性调
整单元格中内容的左右、上下位置。
align属性的设置语法如下,
<td align="参数值 ">
<th align="参数值 ">
align属性用于规定单元格内容在水平方向上的
位置。属性的参数值为 left,center和 right之一,
分别表示该单元格内容是左对齐、水平居中和右对齐
的。缺省时,单元格内容是左对齐的。
6.4.5 设置单元格内文字的对齐方式
valign属性的设置语法如下,
<td vlign="参数值 ">
<th vlign="参数值 ">
valign属性用于规定单元格内容在垂直方
向上位置。属性的参数值为 top,middle和
bottom之一,分别表示该单元格内容是上对齐、
垂直居中和下对齐的。缺省时,单元格内容是
垂直居中的。
6.5 表格的分组
HTML允许文档编辑者将表格按行分组。每一组
由表头、表格主体和尾注三部分组成。其中尾注部分
是可选的。 表格的按行分组是通过使用表头行标签
<thead>、表格主体标签 <tbody>和尾注标签 <tfoot>来
实现的。 <thead>标签是成对标签,首标签 <thead>和
尾标签 </thead>之间的内容是一系列由表头标签标识
的表头元素。我们 可以在 <thead>标签中规定表头行中
所有表头元素的公共属性 。 <thead>标签拥有的属性以
及属性对应的功能和 <th>标签完全一样 。 <tbody>和
<tfoot>标签也是成对标签,其中 <tbody>标签用于规
定表格主体部分的共有特性,<tfoot>标签用于规定尾
注的特性。 实践中,<tfoot>标签很少使用。
6.5.1 表格的行分组 thead/tbody/tfoot
HTML使用 <colgroup>标签来将表格按列分组 。
基本语法设置如下,
<colgroup span="数值 " align="参数值 ">
<colgroup>标签有两个属性,span和 align,
它们都是可选的。 span属性的参数值为数字,表示
该组包含的列数 。该属性的缺省值为 1。 align属性
用以规定该组所跨列中所有单元格内容在水平方向
上的位置。该属性的参数值为 left,center和 right
之一,分别表示各单元格内容是左对齐、水平居中
和右对齐的。
6.5.2 表格的列分组 colgroup
HTML中的表格是可以同时 行分组 和 列
分组 的,即我们可以在用行分组指定表格中
某行或某几行公共属性的同时,又使用列分
组指定某列或某几列的公共属性。
6.5.3 表格的行列分组
表格标题使用专门的标签 <caption>。表
格标题标签 <caption>是成对出现标签,首标签
<caption>和尾标签 </caption>之间的内容就是
表格的标题,如果不想要标题,不加 <caption>
标签就可以了。基本语法设置如下,
<caption align="参数值 " valign="参数
值 ">表格标题 </caption>
6.6 设置表格的标题
<caption>应放在 <table>标签里面,在表格
的行标签 tr之前。
<caption>有两个属性,align和 valign,它
们都是可选的。
align属性的参数值的为 left,center和
right之一,分别表示表格标题与表格的左沿对齐、
位于表格中间和与表格的右沿对齐。缺省时,表格
标题位于表格中间。
valign属性的参数值为 top和 bottom之一,分别表
示表格标题位于表格的上方和下方。缺省时,表格
标题位于表格的上方。
使用嵌套表格
表格运用的注意点
? 浏览器在读取网页 html原代码时,是读
完整一个 table再将它显示出来
? 越复杂,嵌套层次越多的表格下载速度
越慢
我们在设计页面表格的时应做到,
? 整个页面不要都套在一个表格里,尽量
拆分成多个表格 ;
? 单一表格的结构尽量整齐;
? 表格嵌套层次尽量要少,