2.6 表格（table）
网页的表格需要多个元素相互配合。
| 标题1 | 标题2 | 标题3 |
|---|---|---|
| abc | 123 | good |
| bbb | 456 | 好 |
| zzz | 789 | 妙 |
<table border=1 class="table"> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>abc</td> <td>123</td> <td>good</td> </tr> <tr> <td>bbb</td> <td>456</td> <td>好</td> </tr> <tr> <td>zzz</td> <td>789</td> <td>妙</td> </tr></table>table表示整个表格，tr代表一行，td代表一个单元格，th通常用于第一行表示表头，th的文字带加粗效果，以下是table常用的属性
- border：表格边框的粗细，通常设置为1px。
- cellpadding：表格的单元格与边框的距离。
- cellspacing：表格的单元格之间的距离。
- width：表格的宽度。
- height：表格的高度。
这两个也是td（或th）的属性，用于对齐
- align：表格的水平对齐方式（left、center、right）。
- valign：表格的垂直对齐方式（top、middle、bottom）。
这两个是td（或th）的属性，用于合并单元格
- rowspan：合并行的数量。
- colspan：合并列的数量。
下面是colspan的一个例子，第一行的最后一个单元格（第4行代码），横跨了两个单元格，就是横向合并单元格：
<table border=1 class="table"> <tr> <th>标题1</th> <th colspan=2>标题2</th> </tr> <tr> <td>abc</td> <td>123</td> <td>good</td> </tr> <tr> <td>bbb</td> <td>456</td> <td>好</td> </tr> <tr> <td>zzz</td> <td>789</td> <td>妙</td> </tr></table>效果图：
第一行只有两个格子，标题1占一列，标题2占了两列。rowspan是纵向合并单元格：
<table border=1 class="table"> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>abc</td> <td rowspan=2>123</td> <td>good</td> </tr> <tr> <!-- 这是第三行第一个单元格 --> <td>bbb</td> <!-- 这是第三行第三个单元格 --> <td>456</td> </tr> <tr> <td>zzz</td> <td>789</td> <td>妙</td> </tr></table>效果如图：
第二行的123合并了两行的单元格，所以接下来第三行（第13到16行代码）只有两个单元格了。
合并单元格要注意：需要减少横向或者纵向单元格的数量。如果不这么写，表格会突出格子，比较难看。
