第五章 创建表格.

Presentation on theme: "第五章 创建表格."— Presentation transcript:

1 第五章 创建表格

2 5.1 创建表格 一、表格的基本结构 table:定义整个表格 caption:定义表格标题 tr:定义表格的行
5.1 创建表格 一、表格的基本结构 table:定义整个表格 caption:定义表格标题 align属性定义标题显示的位置：top（上部，默认）bottom（下部）left（上部左侧）right（上部右侧） tr:定义表格的行 td和th：标识每个单元格及单元格的内容

3 示例 GIF动画 星期一 星期二 星期三 星期四 星期五 1、2节 数学 英语 计算机 3、4节 物理 化学 政治 5、6节 代码

4 5.1 创建表格 二、合并单元格 行合并 <td>和<th>标记符内使用rowspan属性进行行合并，它的值表示纵向上合并的行数 列合并 <td>和<th>标记符内使用colspan属性进行列合并，它的值表示横向上合并的列数

5 示例 代码 姓名 007 张明 008 陈朋 学号 个人信息 入学信息 性别 年龄 班级 入学年份 男 19 130601 2006.9
130602 代码

6 5.1 创建表格 三 创建表格的步骤 使用table标记符包括所有表格内容。需要标题使用caption标记符 使用tr标记符分隔每一行
5.1 创建表格 三 创建表格的步骤 使用table标记符包括所有表格内容。需要标题使用caption标记符 使用tr标记符分隔每一行 在每一行使用th和td标记每个单元格和单元格的内容，需要合并用rowspan和colspan进行行列的合并。 需要有空的单元格只需使用空的th和td

7 5.2 表格的属性设置 一、边框和分隔线 frame属性 rules属性 border属性

8 5.2 表格的属性设置 1. frame属性： void：表示没有边框（默认） above：表示仅有顶框 below：表示仅有底框
5.2 表格的属性设置 1. frame属性： void：表示没有边框（默认） above：表示仅有顶框 below：表示仅有底框 hsides：表示仅有顶框和底框 vsides：表示仅有左右测框 lhs：表示仅有左测框 rhs：表示仅有右测框 box：表示包含全部四个框 border：表示包含全部四个框

9 5.2 表格的属性设置 2. rules属性： none：表示无分隔线 groups：仅在行组和列组间有分隔线 rows：表示仅有行分隔线
5.2 表格的属性设置 2. rules属性： none：表示无分隔线 groups：仅在行组和列组间有分隔线 rows：表示仅有行分隔线 cols：表示仅有列分隔线 all：表示包括所有分隔线 3. border属性 设置边框的宽度，单独一个border相当于border＝“1”意味着frame＝“border”，rules＝“all” <TABLE border=“2”>意味着？

10 示例 我的日程表 星期一 星期二 星期三 星期四 星期五 学习 看电影 看电视 下棋 上网 书法 打蓝球 代码

11 5.2 大话西游 二、控制单元格空白 在table标记符中使用 cellspacing 控制单元格之间的空白
cellpadding控制表格边线与内容之间的距离 大话西游 cellspacing cellpadding

12 三、表格的对齐 1、表格的页面对齐 2、表格内容的水平对齐 3、表格内容的垂直对齐 <table align=“center”>
<table align=“left”> <table align=“right”> 2、表格内容的水平对齐 在<tr><td><th>内使用align属性，取值center、left（默认）、right、justify； 3、表格内容的垂直对齐 在<tr><td><th>内使用valign属性；middle（默认）；top；bottom 跟在后面的文本产生环绕的效果

13 5.3 使用表格设计网页布局 －－最重要的应用 一、控制表格和单元格大小 使用标记符的width和height属性设置表格和单元格大小 代码

14 5.3 使用表格设计网页布局 二、设置表格和单元格的背景 三、使用嵌套表格 将表格作为一个单元格的内容放置在<td>之后即可。
5.3 使用表格设计网页布局 二、设置表格和单元格的背景 在table和td标记符中使用bgcolor和background进行设置 三、使用嵌套表格 将表格作为一个单元格的内容放置在<td>之后即可。 示例 代码

15 5.3 使用表格设计网页布局 －－最重要的应用 四、表格布局综合实例 代码 1、设置各种细线效果 表格框线
5.3 使用表格设计网页布局 －－最重要的应用 四、表格布局综合实例 1、设置各种细线效果 表格框线 要点：将table标记符的bgcolor属性设置为要显示的线的颜色将cellspacing属性设置为细线的粗细，将单元格的bgcolor属性设置为不同于表格bgcolor的值 代码

16 5.3 使用表格设计网页布局 －－最重要的应用 四、表格布局综合实例 代码 1、设置各种细线效果 横竖分隔线
5.3 使用表格设计网页布局 －－最重要的应用 四、表格布局综合实例 1、设置各种细线效果 横竖分隔线 要点：将table标记符的cellpadding属性都设置为0将要作为细线的单元格的bgcolor属性设置为细线的颜色，将该单元格的width属性（竖线）或height属性（横线）设置为细线的粗细，注意该单元格中不能有任何内容（包括空格） 代码

17 2、表格布局综合实例 个 人 天 地 当前位置：首页>个人天地 英语园地
个 人 天 地 当前位置：首页>个人天地 英语园地 English Study -翻译|网络中的英文缩略语 -沙龙|前台小姐暴笑八级英语 -四六级|CET4一次通过的方法 Bilingual ...-English幽默 -English炫句 -English情书 -English脱口秀 精彩推荐 -四季翻译擂台赛 - 双语标识纠错大行动 -That'... 精彩文章

18 英语园地 精彩文章 English Study -翻译|网络中的英文缩略语 -沙龙|前台小姐暴笑八级英语 -四六级|CET4一次通过的方法 Bilingual ...-English幽默 -English炫句 -English情书 -English脱口秀 精彩推荐 -四季翻译擂台赛 - 双语标识纠错大行动 -That'...