一、表格的作用
表格的作用
(1) 表格通常用来组织结构化的信息
(2) 表格是一些被称作单元格的矩形框按照从左到右,从上到下的顺序排列在一起而形成的
(3) 表格的数据保存在单元格里
- 显示表格数据
- 设置页面布局
二、使用表格
创建表格
(1) 定义表格
- 使用成对的 <table></table>标记
(2) 创建表行
- 使用成对的 <tr></tr>标记
(3) 创建单元格
- 使用成对的 <td></td>标记
表格的常用属性
(1) <table>元素
- width,设置表格宽度
- height,设置表格高度
- align,设置表格对其方式(left|center|right)
- border,设置表格边框宽度
- cellpadding,设置内边距(单元格边框与内容之间的距离)
- cellspacing,设置外边距(单元格之间的距离)
- bgcolor,设置表格背景颜色
(2) <tr>元素
- align,设置水平对齐方式(left|center|right)
- valign,设置垂直对齐方式(top|middle|bottom)
(3) <td>元素
- align,设置水平对齐方式(left|center|right)
- valign,设置垂直对齐方式(top|middle|bottom)
- width,设置宽度
- height,设置高度
- colspan,设置单元格跨列
- rowspan,设置单元格跨行
表格标题<caption>
(1) 使用 <caption> 元素为表格定义标题
- 默认情况下,标题将在表格上方居中显示
(2) <caption> 标签必须紧随 <table> 标签之后,且只能对每个表格定义一个标题
三、表格的复杂应用
行分组
(1) 表格可以划分为3个部分:表头、表主体和表尾
(2) 表头行分组: <thread></thread>
(3) 表主体行分组: <tbody></tbody>
(4) 表尾行分组: <tfoot></tfoot>
- 包含一个或者多个 <tr> 元素
不规则表格
(1) 设置单元格<td>的跨行或者跨列属性
(2) 跨列: colspan
- 水平方向延伸单元格,值为一正整数,代表此单元格水平延伸的单元格数
(3) 跨行: rowspan
- 垂直方向延伸单元格,值为一正整数,代表此单元格垂直延伸的单元格数
表格的嵌套
(1) 嵌套表格
- 在单元格中放置另外一个表
- 即 <td> 元素中再包含 <table> 元素
(2) 使用嵌套的表格以设计复杂表格或者复杂布局
总结:本章内容主要介绍了下 HTML表格使用方法。
本文出自 “技术交流” 博客,谢绝转载!
原文:http://jasonteach.blog.51cto.com/5192112/1752862