HTML5中表格中的行列合并

很多人对于表格行列合并一直都非常迷惑，有时候总搞不清楚其中的排布，接下来我来介绍一种方法，使用它可以完成复杂的行列合并。

方法：数格字法

当然在学习这章前，你要确保你学会了基础的HTML表格。

我们来用这样一道例题来讲解：

首先，要先数一行有几个格子，我们一行一行来看,第一行只有一个格子

<tr><td>价格表</td></tr>

接下来看第二行，有四个格子：

<tr>
    <td>型号</td>
    <td>容量</td>
    <td>价格</td>
    <td>变化</td>
</tr>

接下来重点来了，对于第3，4，5行，我们对左边的只算入第一个，也就是第三行，也就是说，第三行有5个，第4，5行都只有三个

<tr>
    <td>客服中心</td>
    <td>miniplayer</td>
    <td>512G</td>
    <td>699元</td>
    <td>-</td>
</tr>
<tr>
    <td>1GB</td>
    <td>850元</td>
    <td>-</td>
</tr>
<tr>
    <td>2GB</td>
    <td>1099元</td>
    <td>-100</td>
</tr>

最后一行，两个格子：

<tr>
    <td>备注</td>
    <td>AAA电池，FM，USB2.0</td>
</tr>

关键来了，开始合并单元格，先来观察最终图片，发现行最多有5个格子，所以第一行要在纵列分5份：

<tr><td colspan="5">价格表</td></tr>

然后发现第二行第一个要站2格，所以纵列要分2份;

<tr>
    <td colspan="2">型号</td>
    <td>容量</td>
    <td>价格</td>
    <td>变化</td>
</tr>

第三行的前两个格子我们发现它是占了三个横行合并了，而且第二个格子的文字往上移动了，这就要用到我们的valign：让文字在垂直方向上移动 ，并且第一个加了一个button按钮：

<tr>
    <td rowspan="3"  ><button>客服中心</button></td>
    <td rowspan="3" valign="top">miniplayer</td>
    <td>512G</td>
    <td>699元</td>
    <td>-</td>
</tr>

第四五六行操作同样，接下来加上未完善的所有信息，并合并在一块：

注：这里面有许多没有提到的单词，我来给大家讲解一下：callpadding是补白的意思，在这上面是指文字与边框的距离，加上后会让文字居中，显得更美观。

cellspacing是间距，也就是单元格之间的距离，设置为0让内外边框重合。

如果想让文字居中可以在每个开始的tr上加上：align="center",这样所有单元格内文字会居中显示，具体效果为：