bg_18.jpg
一般来说，table、tr（行）、th（表头单元格）、td（普通单元格）就能组成一个html表格，复杂一点可以包括caption（标题）、thead（表头）、tbody （主体）和tfoot （页脚）等，我的理解就是更模块化和语义化一些。
th 文本会居中加粗，而 td 内则是左对齐的普通文本。
一、举个栗子
demo.png
以上demo代码如下:
<table border="1" style="border-collapse: collapse;width: 500px;">
<thead>
<tr>
<th rowspan="3">左</th>
<th colspan="3">上</th>
</tr>
<tr>
<th colspan="2">中</th>
<th>右</th>
</tr>
<tr>
<th>下</th>
<th>下</th>
<th>下</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>a</td><td>b</td><td>c</td>
</tr>
<tr>
<td>2</td><td>a</td><td>b</td><td>c</td>
</tr>
<tr>
<td>3</td><td>a</td><td>b</td><td>c</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>4</td><td>a</td><td>b</td><td>c</td>
</tr>
</tfoot>
</table>
二、常用属性
2.1 <table>常用属性
- border：边框宽度
- cellpadding：单元边沿与其内容之间的空白
- cellspacing：单元格之间的空白+ summary：表格的摘要
- width：表格宽度
注意：table的原始样式为 **display:table;** 所以给table设置height无效。
2.2 <tr>常用属性
- align：行中内容的水平对齐方式
- valign： 行中内容的垂直对齐方式
2.3 <th>和<td>常用属性
- align：单元格内容的水平对齐方式
- valign： 单元格内容的垂直对齐方式
- rowspan：单元格占的行数
- colspan：单元格占的列数
三、合并单元格
理解了浏览器解析和展示表格的过程，就不必记公式。
就像玩俄罗斯方块一样：
单元格排列遵循从上往下和从左往右的规律
遇到rowspan大的就竖着鼓起来
遇到colspan大的就多坐几个凳子
但是一行还是那一行，如下图：
1.png
注意：表格的列数由最宽的一行决定
