主要是利用td标签或者th标签的rowspan(行合并)colspan(列合并)两个属性。
我们以程序实例来说明:
1.首先构建一个表格如图
<table border="1" style="height: 200px;width: 200px;"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td >4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>
运行结果如图所示:
2.使用colspan列合并合并第一行的所有列
<table border="1" style="height: 200px;width: 200px;"><tr><td colspan="3">1</td> <!--注意此处的td标签由原来的三个变为一个--></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>
运行结果如图所示:
3.使用rowspan(行合并)合并第一列的所有行
<table border="1" style="height: 200px;width: 200px;"><tr><td rowspan="3">1</td><!--使用rowspan进行合并--><td>2</td><td>3</td> </tr><tr><td>4</td><td>5</td><!--注意此处的只有两列 td标签变为2个--></tr><tr><td>7</td><td>8</td><!--注意此处的只有两列 td标签变为2个--></tr></table>
运行结果如下:
如此就通过rowspan和colspan实现了表格的行列合并。
一定要注意的是,合并之后td标签的行列数的变化。否则会得不到预期结果,只相当于占位。