HTML讲堂第七课 表格TABLE标签使用 嵌套表格
表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.所以说要制作好网页,就要学好表格。
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讲堂第十课 表单设计及表单提交 [09-06]
- HTML讲堂第九课 多视窗口 框架网页 [09-06]
- HTML讲堂第八课 网页的动态、多媒体 [09-06]
- HTML讲堂第七课 表格TABLE标签使用 [09-06]
- HTML讲堂第六课 图像的处理 图像的 [09-06]
- HTML讲堂第五课 建立列表 无序列表 [09-06]
- HTML讲堂第四课 建立超链接 FTP链接 [09-06]
- HTML讲堂第三课 HTML文字版面的编辑 [09-06]
- HTML讲堂第二课 HTML主体标签及属性 [09-06]
- HTML讲堂第一课 HTML概述与基本结构 [09-06]
推荐文章
HTML讲堂第十课 表单设计及表单提
HTML讲堂第九课 多视窗口 框架网
HTML讲堂第八课 网页的动态、多媒
HTML讲堂第七课 表格TABLE标签使
HTML讲堂第六课 图像的处理 图像
HTML讲堂第五课 建立列表 无序列
HTML讲堂第四课 建立超链接 FTP链
HTML讲堂第三课 HTML文字版面的编
HTML讲堂第二课 HTML主体标签及属
HTML讲堂第一课 HTML概述与基本结
FLASH在IE浏览器里需要手动点击更
HTML文档规范化简洁化 HTML TIDY
媒体播放器 在网页中播放CD代码及
浏览器兼容性问题 CSS HACK浏览器
CSS浏览器兼容问题IE6/IE7/Firef
兼容问题 IE6.0,IE7.0与FireFox的
怎样使IE7显示HTML里的Object元素
Hibernate教程之HQL语句讲解及用
HTTP1.1协议服务器状态代码及其各
HTTP协议基础及HTTP协议中POST和


热点文章
JS实现浏览器菜单命令
利用ASP打造网站论坛DIY(上)--强
计算机常用英语、术语、词汇表
介绍一个免费的具备数据显示/录入
Linux 常用命令(磁盘管理)
SQL Server SQL语句导入导出大全
文字发音动态链接库函数调用说明
VC++下使用ADO编写数据库程序
程序员四大忌
SQL语句大全
在线媒体播放器全新揭密
SQL Server SQL语句导入导出大全
ASP开发web站点
HTML语言剖析_表格标记
用VB实现软件试用期
使用JavaScript访问XML数据
Linux 常用命令(进入与退出系统)
在Web页中使用Media Player
document.execCommand() 解析
有关网页制作的一些基本概念
注册表在IE中的应用技巧
三种禁用FSO组件的方法
ASP教程:堵住ASP漏洞
Linux 常用命令(系统管理)
SQL Server SQL语句导入导出大全
VC++下使用ADO编写数据库程序
挂QQ的网页源代码[ASP/PHP/JS
关于ASP访问ACCESS数据的错误的探
SQL Server SQL语句导入导出大全
Linux 常用命令(在Linux环境下运
