当前位置：甜馍馍地理信息网 >> 网站开发 >> 综合知识 >> 正文 >>  [阅读资讯：HTML讲堂第七课 表格TABLE标签使用 嵌套表格]

HTML讲堂第七课 表格TABLE标签使用 嵌套表格

[ 来源:互联网 | 时间:2009年09月06日 | 收藏本文 ] 【大 中 小】

表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.所以说要制作好网页,就要学好表格。

7-1 定义表格的基本语法

在html文档中，表格是通过<table>,<th>,<tr>,<td>标签来完成的，如下表所示：

表格标记

标 签
描 述
<table>...</table> 用于定义一个表格开始和结束
<th>...</th> 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，<th>标签必须放在<tr>标签内
<tr>...</tr>

定义一行标签，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格
<td>...</td> 定义单元格标签，一组<td>标签将将建立一个单元格，<td>标签必须放在<tr>标签内

在一个最基本的表格中，必须包含一组<table>标签，一组标签<tr>和一组<td>标签或<th>。

实例：7-1.html


7-2（1)表格<table>标签的属性

表格标签<table>有很多属性，最常用的属性有：

<table>标签的属性

属 性 描 述
width 表格的宽度
height 表格的高度
align 表格在页面的水平摆放位置
background 表格的背景图片
bgcolor 表格的背景颜色
border 表格边框的宽度（以像素为单位）
bordercolor 表格边框颜色
bordercolorlight 表格边框明亮部分的颜色
bordercolordark 表格边框昏暗部分的颜色
cellspacing 单元格之间的间距
cellpadding 单元格内容与单元格边界之间的空白距离的大小

实例：7-2-1.html


7-2（2） 表格的边框显示状态 frame

表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态

语法格式：<table frame="边框显示值">

表格边框显示状态frame的值的设定

frame的值 描 述
box 显示整个表格边框
void 不显示表格边框
hsides 只显示表格的上下边框
vsides 只显示表格的左右边框
alove 只显示表格的上边框
below 只显示表格的下边框
lhs 只显示表格的左边框
rhs 只显示表格的右边框

实例：7-2-2.html


7-4（3） 设置分隔线的显示状态 rules

语法格式：<table rules="值">

分隔线的显示状态rules的值的设定

rules的值 描 述
all 显示所有分隔线
groups 只显示组与组的分隔线
rows 只显示行与行的分隔线
cols

只显示列与列的分隔线
none 所有分隔线都不显示

实例:7-2-3.html


7-3 表格行的设定

表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标签<tr>，行标签用它的属性值来修饰，属性都是可选的。

<tr>标签的属性

属 性 描 述
align 行内容的水平对齐
valign 行内容的垂直对齐
bgcolor 行的背景颜色
bordercolo 行的边框颜色
bordercolorlight 行的亮边框颜色
bordercolordark 行的暗边框颜色

<TR> 的参数设定（常用）：

  <tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

实例：7-3.html


7-4 单元格的设定

<th>和<td>都是插入单元格的标签，这两个标签必须嵌套在<tr>标签内。是成对出现的。<th>用于表头标签，表头标签一般位于首行或首列，标签之间的内容就是位于该单元格内的标题内容，其中的文字以粗体居中显示。数据标签<td>就是该单元格中的具体数据内容,<th>和<td>标签的属性都是一样的，属性设定如下：

<th>和<td>的属性

属 性 描 述
width/height 单元格的宽和高，接受绝对值（如 80）及相对值（如 80%）。
colspan 单元格向右打通的栏数
rowspan 单元格向下打通的列数
align 单元格内字画等的摆放贴，位置（水平），可选值为： left, center, right。
valign 单元格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。
bgcolor 单元格的底色
bordercolor 单元格边框颜色
bordercolorlight 单元格边框向光部分的颜色
bordercolordark 单元格边框背光部分的颜色
background 单元格　背景图片

<TD> 的参数设定格式：

例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">

实例：7-4.html


7-5 设定跨多行多列单元格

要创建跨多行、多列的单元格，只需在<TH>或<TD>中加入ROWSPAN或COLSPAN属性的属性值，默认值为1。表明了表格中要跨越的行或列的个数。

跨多列的语法： <th colspan=#>　<td colspan=#>

colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。

跨多行的语法： <th rowspan=#>　<td rowspan=#>
　
rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。

实例：7-5.html


7-6 表格的分组

7-6-1 表格的行分组<thead>/<tbody>/<tfoot>

html文档的表格按行分组是由表头标签<thead>、表格主体标签<tbody>和尾注标签<tfoot>三个部分组成的。其中尾注标签很少用。<thead>标签是成对标签，其标签内是由表头标签标识的表头元素。<tbody>标签用于规定表格主体部分的元素。<thead>和<tbody>标签的属性和<th><td>标签是一样的。

实例：7-6-1.html


7-6-2 表格按列分组<colgroup>

html使用<colgroup>标签来将表格分组。

语法格式：<colgroup span="数值" align="参数">

说明：<colgroup>标签有两个属性，span和align, 他们都是可选的。span属性的值是数字，表示该组包含的列数，默认值为1。align属性用以规定该组所跨列中所有单元格中内容在水平方向上的位置。该属性的值为left,center,right之一。它们表示单元格的内容是左对齐，水平居中还是右对齐。

实例：7-6-2.html


7-6-3 表格的行列分组

实例：7-6-3.html 


7-7 表格的标题标签<caption>

表格标题的位置，可由ALIGN属性和VALIGN属性来设置，ALIGN属性设置标题位于文档的左，中，右。 VALIGN属性设置标题位于表格的上方和表格的下方。下面为表格标题位置的设置格式。

语法格式：
<caption align="值" valign="值" >表哥标题</caption>
<caption>应放在<table>标签内，在表格行标签<tr>标签之前。
<caption>标签的默认属性是标题位于表格的上方中间位置。

实例：7-7.html


7-8 表格的嵌套

在html页面中，使用表格排版是通过嵌套来完成的，即一个表格内部可以嵌套另一个表格，用表格来排版页面的思路是：由总表格规划整体的结构，由嵌套的表格负责各个子栏目的排版，并插入到表格的相应位置，这样就可以使页面的各个部分有条不紊，互不冲突，看上去清晰整洁。在实际做网页时一般不显示边框,边框的显示可根据自己的爱好来设定。在实例中为了让大家能够看清楚，都设置了有边框。

实例7-8.html


【推荐本文】 【打印本页】 【返回顶部】

>> 相关文章：

● 上一篇文章:HTML讲堂第六课 图像的处理 图像的影像地图超链接
● 下一篇文章:HTML讲堂第八课 网页的动态、多媒体效果 滚动字幕
最新文章
推荐文章
热点文章