table标签的结构与合并单元格的实现方法
更新时间：2013年07月24日 09:11:57 作者：
以下是对table标签的结构与合并单元格的实现方法进行了详细的分析介绍，需要的朋友可以过来参考下
1.<table>标签的结构
示例代码：
<table border="1">
<caption>信息统计表</caption>
<thead>
<tr >
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</tbody>
</table>
一个完整的例子：
<table border="1">
<caption class="text-center">信息统计表</caption>
<thead>
<tr >
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
<th>QQ</th>
</tr>
</thead>
<tbody>
<tr class="error">
<td>1</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
<tr class="warning">
<td>2</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
<tr class="info"> <td>3</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
<tr class="success">
<td>4</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
</tbody>
</table>
2.合并上下的单元格（rowspan）
示例代码：
<table border="1">
<caption class="text-center">信息统计表</caption>
<thead>
<tr >
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
<th>QQ</th>
</tr>
</thead>
<tbody>
<tr class="error">
<td rowspan="2">1</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr> <tr class="warning">
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr> <tr class="info"> <td>3</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr> <tr class="success"> <td>4</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
</tbody>
</table>
3.合并左右的单元格（colspan）
示例代码：
<table class="table table-condensed table-bordered">
<caption class="text-center">信息统计表</caption>
<thead>
<tr >
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
<th>QQ</th>
</tr>
</thead>
<tbody>
<tr class="error">
<td>1</td>
<td colspan="4"><p class="text-center">这是合并了四个单元格</p></td>
</tr>
<tr class="warning">
<td>2</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
<tr class="info">
<td>3</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
<tr class="success">
<td>4</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
</tbody>
</table>
示例代码：
复制代码 代码如下:
<table border="1">
<caption>信息统计表</caption>
<thead>
<tr >
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</tbody>
</table>
一个完整的例子：
复制代码 代码如下:
<table border="1">
<caption class="text-center">信息统计表</caption>
<thead>
<tr >
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
<th>QQ</th>
</tr>
</thead>
<tbody>
<tr class="error">
<td>1</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
<tr class="warning">
<td>2</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
<tr class="info"> <td>3</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
<tr class="success">
<td>4</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
</tbody>
</table>
2.合并上下的单元格（rowspan）
示例代码：
复制代码 代码如下:
<table border="1">
<caption class="text-center">信息统计表</caption>
<thead>
<tr >
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
<th>QQ</th>
</tr>
</thead>
<tbody>
<tr class="error">
<td rowspan="2">1</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr> <tr class="warning">
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr> <tr class="info"> <td>3</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr> <tr class="success"> <td>4</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
</tbody>
</table>
3.合并左右的单元格（colspan）
示例代码：
复制代码 代码如下:
<table class="table table-condensed table-bordered">
<caption class="text-center">信息统计表</caption>
<thead>
<tr >
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
<th>QQ</th>
</tr>
</thead>
<tbody>
<tr class="error">
<td>1</td>
<td colspan="4"><p class="text-center">这是合并了四个单元格</p></td>
</tr>
<tr class="warning">
<td>2</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
<tr class="info">
<td>3</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
<tr class="success">
<td>4</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
</tbody>
</table>
相关文章
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
这篇文章主要介绍了PHP在innodb引擎下快速代建全文搜索功能的方法,可基于开源搜索引擎xunsearch实现,简明扼要的讲述了安装与使用的步骤与相关操作技巧,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了php数组排序usort、uksort与sort函数用法,详细介绍了usort、uksort与sort函数在数组排序中的应用,具有不错的参考借鉴价值,需要的朋友可以参考下2014-11-11
本文主要介绍了Redis构建分布式锁的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
这篇文章主要介绍了php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法,实例分析了php调用淘宝API查询店铺信息的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
本篇文章是对PHP中的stripos()函数及注意事项进行了详细的分析介绍，需要的朋友参考下2013-06-06
PHP 是我用过的语言中，最令人恼火的但同时也是最有趣的语言。我之所以说“令人恼火”主要是因为函数命名极其不一致。尽管我每天都要用到这些函数，我还是要想一下“究竟是 str_pos 还是 strpos？是 str_split 还是 strsplit？”。2008-09-09
在本篇文章里小编给大家分享了关于PHP关于foreach复制知识点总结，有兴趣的朋友们学习下。2019-01-01
这篇文章主要介绍了PHP生成各种随机验证码的方法,结合具体实例形式总结分析了php常用的生成验证码操作相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-06-06
PHP 优化配置——加速你的VBB,phpwind,Discuz,IPB,MolyX
PHP 优化配置——加速你的VBB,phpwind,Discuz,IPB,MolyX...2007-07-07
在本篇文章里小编给大家分享了关于PHP写API输出的时用echo的原因和相关知识点，需要的朋友们参考下。2019-04-04
最新评论