表格合并

来源：互联网发布：腾讯软件管家编辑：程序博客网时间：2024/05/01 09:27

刚开始学习html的时候，我特别喜欢写表格，因为看着很舒服，而且简单。

后来因为页面当中的很多功能要取值的原因，表格暂时被我放下了。全部改成用div模拟了。

其实我个人觉得，如果只是单纯的展示界面，或者展示的界面取值不是特别麻烦，可以通过序列化取值的时候都可以直接用表格来展示。

下面是我写的一个小例子，包含了表格合并行，合并列这些常用的功能。

合并行：colspan="2" 这里的数字2是要合并的行数。

合并列：rowspan="10" 这里的数字2是要合并的列数。

你可能唯一需要注意的就是，不管合并行还是列，都要有一个基础，就是已知总共多少行，多少列。这个例子的最下面还有一行，只是我让他隐藏了。这个隐藏的一行，在刚开始写的时候你是需要一个标准的，当然全部写完之后，最下面的这一行你要不要都无所谓。不影响整体效果。

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>表格合并练习</title><style>h2{text-align:center;}table{border-collapse: collapse;}#centent{width:80%;margin:0 auto;}#centent>table{width:100%;}table tr td{border:1px solid #999;text-align:center;height:30px;}.add{width:5.8%;}.TdClass>td{border:0;}.Weight{font-weight:bold;font-family:serif;}</style></head><body><h2>征婚登记表</h2><div id="centent">  <table>      <tr>          <td colspan="2" class="Weight">姓名</td>          <td colspan="2">博主</td>          <td colspan="2" class="Weight">电话</td>          <td colspan="2">任意搭配</td>          <td colspan="2" class="Weight">QQ</td>          <td colspan="2">任意搭配</td>          <td colspan="3" class="Weight">微信</td>          <td colspan="2">任意搭配</td>      </tr>      <tr>          <td rowspan="5" colspan="2" class="Weight">有房</td>          <td rowspan="4" colspan="2" class="Weight">有车</td>          <td colspan="5" class="Weight">身体健康状况</td>          <td colspan="2"></td>          <td colspan="6" class="Weight">2017年</td>      </tr>      <tr>          <td class="Weight">年份</td>          <td colspan="2" class="Weight">抽烟</td>          <td colspan="2" class="Weight">喝酒</td>          <td colspan="2" class="Weight">打麻将</td>          <td colspan="2" class="Weight">不矮</td>          <td colspan="2" class="Weight">不矬</td>          <td colspan="2" class="Weight">不穷</td>      </tr>      <tr>          <td class="Weight">2016</td>          <td colspan="2">NO</td>          <td colspan="2">NO</td>          <td colspan="2">NO</td>          <td colspan="2">NO</td>          <td colspan="2">NO</td>          <td colspan="2">NO</td>      </tr>      <tr>          <td class="Weight">2015</td>          <td colspan="2">NO</td>          <td colspan="2">NO</td>          <td colspan="2">NO</td>          <td colspan="2">NO</td>          <td colspan="2">NO</td>          <td colspan="2">NO</td>      </tr>          <td colspan="2" class="Weight">6不6</td>          <td colspan="13">博主单身24年，求有缘人带走</td>      </tr>      <tr class="TdClass">          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>          <td class="add"></td>      </tr>  </table></div></body></html>

1 0