第四章节 创建表格.ppt

第四章 创建表格 4.1 创建表格 一、表格的基本结构 TABLE:定义整个表格 CAPTION:定义表格标题 align属性定义标题显示的位置：top（上部，默认）bottom（下部）left（上部左侧）right（上部右侧） TR:定义表格的行 TD和TH：标识每个单元格及单元格的内容 示例 4.1 创建表格 二、合并单元格 行合并 TD和TH标记符内使用rowspan属性进行行合并，它的值表示纵向上合并的行数 列合并 TD和TH标记符内使用colspan属性进行列合并，它的值表示横向上合并的列数 示例 4.1 创建表格 三 创建表格的步骤 使用TABLE标记符包括所有表格内容。需要标题使用CAPTION标记符 使用TR标记符分隔每一行 在每一行使用TH和TD标记每个单元格和单元格的内容，需要合并用rowspan和colspan进行行列的合并。 需要有空的单元格只需使用空的TR和TD 4.2 表格的属性设置 一、边框和分隔线 frame属性 rules属性 border属性 4.2 表格的属性设置 1. frame属性： void：表示没有边框（默认） above：表示仅有顶框 below：表示仅有底框 hsides：表示仅有顶框和底框 vsides：表示仅有左右测框 lhs：表示仅有左测框 rhs：表示仅有右测框 box：表示包含全部四个框 border：表示包含全部四个框 4.2 表格的属性设置 2. rules属性： none：表示无分隔线 groups：仅在行组和列组间有分隔线 rows：表示仅有行分隔线 cols：表示仅有列分隔线 all：表示包括所有分隔线 3. border属性 设置边框的宽度，单独一个border相当于border＝“1”意味着frame＝“border”，rules＝“all” 示例 我的日程表 4.2 二、控制单元格空白 在TABLE标记符中使用 cellspacing 控制单元格之间的空白 cellpading控制表格边线与内容之间的距离 三、表格的对齐 1、表格的页面对齐 TABLE align=“center” TABLE align=“left” TABLE align=“right” 2、表格内容的水平对齐 在TRTDTH内使用center；left（默认）；right；justify 3、表格内容的垂直对齐 在TRTDTH内使用valign属性；middle（默认）；top；bottom 4.3 使用表格设计网页布局－－最重要的应用 一、控制表格和单元格大小 使用标记符的width和height属性设置表格和单元格大小 4.3 使用表格设计网页布局 二、设置表格和单元格的背景 在TABLE和TD标记符中使用bgcolor和background进行设置 三、使用嵌套表格 将表格作为一个单元格的内容放置在TD之后即可。 示例 4.3 使用表格设计网页布局－－最重要的应用 四、表格布局综合实例 1、设置各种细线效果 表格框线 要点：将TABLE标记符的bgcolor属性设置为要显示的线的颜色将cellspacing属性设置为细线的粗细，将单元格的bgcolor属性设置为不同于表格bgcolor的值 4.3 使用表格设计网页布局－－最重要的应用 四、表格布局综合实例 1、设置各种细线效果 横竖分隔线 要点：将TABLE标记符的cellpadding属性都设置为0将要作为细线的单元格的bgcolor属性设置为细线的颜色，将该单元格的width属性（竖线）或height属性（横线）设置为细线的粗细，注意该单元格中不能有任何内容（包括空格） 2、表格布局综合实例 * * 化学 计算机 5、6节 政治 化学 英语 计算机 物理 3、4节 计算机 英语 数学 英语 数学 1、2节 星期五 星期四 星期三 星期二 星期一 GIF动画 代码 2006.9 130602 20 男 陈朋 008 2006.9 130601 19 男 张明 007 入学年份 班级 年龄 性别 姓名 入学信息 个人信息 学号 代码 TABLE border=“2”意味着？ 打蓝球 打蓝球 书法 学习 上网 学习 学习 学习 下棋 看电视 看电影 学习 学习 学习 学习 星期五 星期四 星期三 星期二 星期一 代码 大话西游 cellspacing cellspadding 跟在后面的文本产生环绕的效果 代码 代码 代码 代码 *