第五章 创建表格

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

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

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

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

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

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

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

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”>意味着？

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

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

三、表格的对齐 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 跟在后面的文本产生环绕的效果

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

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

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

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

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

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