一、基本元素
<table> 元素：定义一个表格。每一个表格只有一对<table>和</table>，一张页面中可以有多个表格。
<tr>元素：定义表格的行，一个表格可以有多行，所以<tr>对于一个表格来说不是唯一的。
<td>元素：定义表格的一个单元格。每行可以有不同数量的单元格，在<td>和</td>之间是单元格的具体内容。
需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。
二、表格的基本结构
<table>定义表格
<tr>
<th>定义表头</th>
</tr>
<tr>定义表行
<td>…</td>定义单元格
</tr>
</table>
三、表格的属性
1、width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。
2、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。
3、border属性：表格边线粗细
4、bgcolor属性：指定表格或某一个单元格的背景颜色。
5、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。
6、bordercolor属性：指定表格或某一个单元格的边框颜色。
7、Bordercolorlight属性：亮边框的颜色
8、Bordercolordark属性：暗边框的颜色
9、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。
10、cellspacing属性：单元格间距。
11、cellpadding属性：单元格边距。
四、单元格属性
1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：
top：顶端对齐；
middle：居中对齐；
bottom：底端对齐;
Baseline：相对于基线对齐;
2、Colspan：属性值表示当前单元格跨越几列
3、Rowspan：属性值表示当前单元格跨越几行
五、行属性
1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包
top：顶端对齐；
middle：居中对齐；
bottom：底端对齐。
Baseline：相对于基线对齐。
2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式
3、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素
六、表格进阶
表格的嵌套
在<td> </td>之间插入表格，实现表格嵌套
表格的作用一般只是控制文本和图像的显示，而不显示表格的边框
表格(TABLE)标记(TAGS)
一、表格的基本语法
<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)
带边框的表格：
<table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
不带边框的表格：
<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
二、跨多行、多列的表元(Table Span)
跨多列的表元 <th colspan=#>
跨多行的表元 <th rowspan=#>
三、 表格尺寸设置
（一）边框尺寸设置：<table border=#>
<table border=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
（二）表格尺寸设置：<table border width=# height=#>
<table border width=170 height=100>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
（三）表元间隙设置： <table border cellspacing=#>
<table border cellspacing=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
（四）表元内部空白设置： <table border cellpadding=#>
<table border cellpadding=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
四、表格内文字的对齐/布局
<tr align=#>
<th align=#> #=left, center, right
<td align=#>
<tr valign=#>
<th valign=#> #=top, middle, bottom, baseline
<td valign=#>
五、 表格在页面中的对齐/布局(Floating Table)
<table align=left>
<table align=right>
<table vspace=# hspace=#> #=space value
六、表格的标题
（一）<caption align=#> ... </caption> #=left, center, right
<table border>
<caption align=center>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Lunch
| Food |
Drink |
Sweet |
| A |
B |
C |
（二）<caption valign=#> ... </caption> #=top, bottom
<table border>
<caption valign=bottom>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Lunch
| Food |
Drink |
Sweet |
| A |
B |
C |
表格进阶(TABLE ADVANCED)
一、表格的色彩
（一）表元的背景色彩和背景图象
<th bgcolor=#>
<th background="URL">
- #=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
（二）表格边框的色彩
<table bordercolor=#>
（三）表格边框色彩的亮度控制
<table bordercolorlight=#>
<table bordercolordark=#>
二、表格的分组显示(Structured Table)
按行分组
<thead> ... </thead> - 表的题头(Header)
<tbody> ... </tbody> - 表的正文(Body)
<tfoot> ... </tfoot> - 表的脚注(Footer)
<table border>
<thead>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
按列分组
<colgroup align=#> #=left, right, center
<table border width=160>
<colgroup align=left>
<colgroup align=center>
<colgroup align=right>
<thead>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
