HTML表格单元格合并

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

注意：表格的列数由最宽的一行决定