1、表格的基本结构：
表格由行和列组成,单元格式表格的最基本单元;每个表格均有若干行,行标签由<tr></tr>定义,每行被分割为若干单元格,由<td></td>标签定义（td表示表格数据table data）,如果表格的第一行表示表格表头,则第一行<tr></tr>中的<td></td>将用<th></th>标签替换.数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等.表格的基本结构：
| 表头一 | 表头二 | 表头三 |
|---|---|---|
| 第一行第一列 | 第一行第二列 | 第一行第三列 |
| 第二行第一列 | 第二行第二列 | 第二行第三列 |
2、表格的基本属性:
表格属性分为两大类：分别作用于<table></table>标签和作用于行<tr></tr>和列<td></td>的属性.1、border属性定义表格边框,属性值接受整数类型数值,表示设置表格边框的宽度
说明:如果border的值增大,只有表格最外围的框线增加,每个单元格上的边框并不会变化.若将border设置为10,可查看设置效果 2、width/height定义表格的宽度和高度 3、bgcolor设置表格的背景颜色 4、backgroud属性定义表格的背景图,需要传入一直图片的地址;若background属性与bgcolor属性同时存在,背景图会覆盖掉背景颜色. 5、bordercolor设置表格边框的颜色,接收颜色值 6、cellspacing设置表格单元格间距,设置表格单元格与单元格之间的间距;当cellspacing设置为0时,单元格之间没有间距 说明:cellspacing设置为0时并不能合并相邻边框,因此设置cellspacing=0时是两条边框线的宽度.如果需要合并表格边框可以使用style="border-collapse: collapse;"进行设置 7、cellpadding表格单元格内边距属性,即单元格中文字与单元格边框之间的距离 8、align属性用于调整表格在其父容器中的位置,可选值有left、center、right、分别表示表格居左、居中、居右显示 注意：align属性建议不再使用,它的相关功能已被CSS中的float所取代| 表头一 | 表头二 | 表头三 |
|---|---|---|
| 第一行第一列 | 第一行第二列 | 第一行第三列 |
| 第二行第一列 | 第二行第二列 | 第二行第三列 |
3、行和列基本属性:作用于行<tr></tr>和列<td></td>的属性
1、width/height设置单元格宽度和高度
2、bgcolor设置单元格的背景颜色 3、align单元格内容水平对齐方式 说明:表格table标签中的align属性是设置表格自身在浏览器中显示的位置,而行tr和列td的align属性是控制单元格中文字在单元格中的对齐方式;表格的align属性并不会影响表格内d 文字的水平方式,tr标签的align属性可以控制一行中所有单元格文字的水平对齐方式. 4、valign设置单元格中内容的垂直对齐方式| 表头一 | 表头二 | 表头三 |
|---|---|---|
| 第一行第一列 | 第一行第二列 | 第一行第三列 |
| 第二行第一列 | 第二行第二列 | 第二行第三列 |
| 第三行第一列 | 第三行第二列 | 第三行第三列 |
4、表格的跨行和跨列：
colspan属性表示跨列,当某个格跨N列时,其右边N-1个单元格需要删除; rowspan属性表示跨行,当某个格跨N行时,其下方N-1个单元格需要删除| 学生成绩信息 | ||
| 张三 | 语文 | 98 |
| 数学 | 100 | |
| 英语 | 95 | |
| 李四 | 语文 | 95 |
| 数学 | 98 | |
| 英语 | 100 | |
5、表格的结构化:将比哦啊个分为表头、表体、表尾,这样在修改其中一部分时不会影响到其他部分,方便对表格进行操作,一个完整的表格通常分为四部分:<br />
1、caption:表格的标题,通常出现在表格顶部 2、thead:定义表格的表头,通常表现为标题行 3、tbody：定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组 4、tfoot：定义表格的表尾,通常表现为总计行| 表格的头部 |
|---|
| 表格的主体 |
| 表格的底部 |
6、表格的直列化:表格的直列化可以对表格进行分组,这样就不需要对各个单元和各行重复应用样式
注意：colgroup标签只能在table中使用| 表头一 | 表头二 | 表头三 |
|---|---|---|
| 主体一 | 主体一 | 主体一 |
| 主体二 | 主体二 | 主体二 |
| 底部一 | 底部二 | 底部三 |
特别休假单案例:
特别休假申请单
申请日期: 年 月 日
| 所属单位 | 部 组 班 | 职称 | 姓名 | 厂长 | ||
| 期间 | 年 月 日 | 天数 | ||||
| 年 月 日 | ||||||
| 职务代理人 | 盖章 | |||||
| 到期日期 | 年 | 审核意见 | ||||
| 全年特别休假数 | 天 | |||||
| 已请假数 | 天 | 人事主任 | 人事经办 | 组长 | ||
| 本次申请日数 | 天 | |||||
| 尚剩申请日数 | 天 | |||||
以上讲解详细完整代码块:
| 表头一 | 表头二 | 表头三 |
|---|---|---|
| 第一行第一列 | 第一行第二列 | 第一行第三列 |
| 第二行第一列 | 第二行第二列 | 第二行第三列 |
表格的基本属性:
1、border属性定义表格边框,属性值接受整数类型数值,表示设置表格边框的宽度 说明:如果border的值增大,只有表格最外围的框线增加,每个单元格上的边框并不会变化.若将border设置为10,可查看设置效果 2、width/height定义表格的宽度和高度 3、bgcolor设置表格的背景颜色 4、backgroud属性定义表格的背景图,需要传入一直图片的地址;若background属性与bgcolor属性同时存在,背景图会覆盖掉背景颜色. 5、bordercolor设置表格边框的颜色,接收颜色值 6、cellspacing设置表格单元格间距,设置表格单元格与单元格之间的间距;当cellspacing设置为0时,单元格之间没有间距 说明:cellspacing设置为0时并不能合并相邻边框,因此设置cellspacing=0时是两条边框线的宽度.如果需要合并表格边框可以使用style="border-collapse: collapse;"进行设置 7、cellpadding表格单元格内边距属性,即单元格中文字与单元格边框之间的距离 8、align属性用于调整表格在其父容器中的位置,可选值有left、center、right、分别表示表格居左、居中、居右显示 注意：align属性建议不再使用,它的相关功能已被CSS中的float所取代,| 表头一 | 表头二 | 表头三 |
|---|---|---|
| 第一行第一列 | 第一行第二列 | 第一行第三列 |
| 第二行第一列 | 第二行第二列 | 第二行第三列 |
行和列基本属性:
1、width/height设置单元格宽度和高度 2、bgcolor设置单元格的背景颜色 3、align单元格内容水平对齐方式 说明:表格table标签中的align属性是设置表格自身在浏览器中显示的位置,而行tr和列td的align属性是控制单元格中文字在单元格中的对齐方式;表格的align属性并 不会影响表格内文字的水平方式,tr标签的align属性可以控制一行中所有单元格文字的水平对齐方式. 4、valign设置单元格中内容的垂直对齐方式| 表头一 | 表头二 | 表头三 |
|---|---|---|
| 第一行第一列 | 第一行第二列 | 第一行第三列 |
| 第二行第一列 | 第二行第二列 | 第二行第三列 |
| 第三行第一列 | 第三行第二列 | 第三行第三列 |
表格的跨行和跨列：
colspan属性表示跨列,当某个格跨N列时,其右边N-1个单元格需要删除; rowspan属性表示跨行,当某个格跨N行时,其下方N-1个单元格需要删除| 学生成绩信息 | ||
| 张三 | 语文 | 98 |
| 数学 | 100 | |
| 英语 | 95 | |
| 李四 | 语文 | 95 |
| 数学 | 98 | |
| 英语 | 100 | |
表格的结构化:将比哦啊个分为表头、表体、表尾,这样在修改其中一部分时不会影响到其他部分,方便对表格进行操作.
一个完整的表格通常分为四部分: 1、caption:表格的标题,通常出现在表格顶部 2、thead:定义表格的表头,通常表现为标题行 3、tbody：定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组 4、tfoot：定义表格的表尾,通常表现为总计行| 表格的头部 |
|---|
| 表格的主体 |
| 表格的底部 |
表格的直列化:表格的直列化可以对表格进行分组,这样就不需要对各个单元和各行重复应用样式
注意：colgroup标签只能在table中使用| 表头一 | 表头二 | 表头三 |
|---|---|---|
| 主体一 | 主体一 | 主体一 |
| 主体二 | 主体二 | 主体二 |
| 底部一 | 底部二 | 底部三 |