table标签的结构与合并单元格的实现方法

所属分类: 网络编程 / PHP编程 阅读数: 551
收藏 0 赞 0 分享
1.<table>标签的结构
示例代码:
复制代码 代码如下:

&nbsp;<table border="1">
&nbsp; &nbsp; &nbsp; <caption>信息统计表</caption>
&nbsp; &nbsp; &nbsp;  <thead>
&nbsp; &nbsp; &nbsp;  <tr >
&nbsp; &nbsp; &nbsp;  <th>#</th>
&nbsp; &nbsp; &nbsp;  </tr>
&nbsp; &nbsp; &nbsp; </thead>
&nbsp; &nbsp; &nbsp; <tbody>
&nbsp; &nbsp; &nbsp;  <tr>
&nbsp; &nbsp; &nbsp;  <td>1</td>
&nbsp; &nbsp; &nbsp;  </tr>
&nbsp; &nbsp; &nbsp;  <tr>
&nbsp; &nbsp; &nbsp;  <td>2</td>
&nbsp; &nbsp; &nbsp;  </tr>
&nbsp; &nbsp; &nbsp;  <tr>
&nbsp; &nbsp; &nbsp;  <td>3</td>
&nbsp; &nbsp; &nbsp;  </tr>
&nbsp; &nbsp; &nbsp;  <tr>
&nbsp; &nbsp; &nbsp;  <td>4</td>
&nbsp; &nbsp; &nbsp;  </tr>
&nbsp; &nbsp; &nbsp; </tbody>
</table>

一个完整的例子:
复制代码 代码如下:

&nbsp;<table border="1">
&nbsp; &nbsp; &nbsp; <caption class="text-center">信息统计表</caption>
&nbsp; &nbsp; &nbsp; <thead>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;<tr >
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>#</th>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>Firstname</th>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>Lastname</th>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>Phone</th>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>QQ</th>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;</tr>
&nbsp; &nbsp; &nbsp; </thead>
&nbsp; &nbsp; &nbsp; <tbody>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;<tr class="error">
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>1</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>qian</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>shou</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>11111111111</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>111111111</td>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;</tr>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;<tr class="warning">
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>2</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>qian</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>shou</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>11111111111</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>111111111</td>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;</tr>&nbsp;
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;<tr class="info"> <td>3</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>qian</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>shou</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>11111111111</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>111111111</td>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;</tr>&nbsp;
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;<tr class="success">
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;  &nbsp;<td>4</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>qian</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>shou</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>11111111111</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>111111111</td>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;</tr>&nbsp;
&nbsp; &nbsp; &nbsp; </tbody>
</table>



2.合并上下的单元格(rowspan)
示例代码:
复制代码 代码如下:

<table border="1">
&nbsp; &nbsp; &nbsp; <caption class="text-center">信息统计表</caption>
&nbsp; &nbsp; &nbsp;  <thead>
&nbsp; &nbsp; &nbsp;   <tr >
&nbsp; &nbsp; &nbsp;   <th>#</th>
&nbsp; &nbsp; &nbsp;   <th>Firstname</th>
&nbsp; &nbsp; &nbsp;   <th>Lastname</th>
&nbsp; &nbsp; &nbsp;   <th>Phone</th>
&nbsp; &nbsp; &nbsp;   <th>QQ</th>
&nbsp; &nbsp; &nbsp;   </tr>
&nbsp; &nbsp; &nbsp;  </thead>
&nbsp; &nbsp; &nbsp; <tbody>
&nbsp; &nbsp; &nbsp;  <tr class="error">
&nbsp; &nbsp; &nbsp;  <td rowspan="2">1</td>
&nbsp; &nbsp; &nbsp;  <td>qian</td>
&nbsp; &nbsp; &nbsp;  <td>shou</td>
&nbsp; &nbsp; &nbsp;  <td>11111111111</td>
&nbsp; &nbsp; &nbsp;  <td>111111111</td>
&nbsp; &nbsp; &nbsp;  </tr> <tr class="warning">
&nbsp; &nbsp; &nbsp;  <td>qian</td>
&nbsp; &nbsp; &nbsp;  <td>shou</td>
&nbsp; &nbsp; &nbsp;  <td>11111111111</td>
&nbsp; &nbsp; &nbsp;  <td>111111111</td>
&nbsp; &nbsp; &nbsp;  </tr> <tr class="info"> <td>3</td>
&nbsp; &nbsp; &nbsp;  <td>qian</td>
&nbsp; &nbsp; &nbsp;  <td>shou</td>
&nbsp; &nbsp; &nbsp;  <td>11111111111</td>
&nbsp; &nbsp; &nbsp;  <td>111111111</td>
&nbsp; &nbsp; &nbsp;  </tr> <tr class="success"> <td>4</td>
&nbsp; &nbsp; &nbsp;  <td>qian</td>
&nbsp; &nbsp; &nbsp;  <td>shou</td>
&nbsp; &nbsp; &nbsp;  <td>11111111111</td>
&nbsp; &nbsp; &nbsp;  <td>111111111</td>
&nbsp; &nbsp; &nbsp;  </tr>&nbsp;
&nbsp; &nbsp; &nbsp; </tbody>
</table>



3.合并左右的单元格(colspan)
示例代码:
复制代码 代码如下:

<table class="table table-condensed table-bordered">
&nbsp; <caption class="text-center">信息统计表</caption>
&nbsp; &nbsp; <thead>
&nbsp; &nbsp; &nbsp; <tr >
&nbsp; &nbsp; &nbsp; <th>#</th>
&nbsp; &nbsp; &nbsp; <th>Firstname</th>
&nbsp; &nbsp; &nbsp; <th>Lastname</th>
&nbsp; &nbsp; &nbsp; <th>Phone</th>
&nbsp; &nbsp; &nbsp; <th>QQ</th>
&nbsp; &nbsp; &nbsp; </tr>
&nbsp; &nbsp; </thead>
&nbsp; <tbody>
&nbsp; &nbsp; <tr class="error">
&nbsp; &nbsp; <td>1</td>
&nbsp; &nbsp; <td colspan="4"><p class="text-center">这是合并了四个单元格</p></td>
&nbsp; &nbsp; </tr>
&nbsp; &nbsp; <tr class="warning">
&nbsp; &nbsp; <td>2</td>
&nbsp; &nbsp; <td>qian</td>
&nbsp; &nbsp; <td>shou</td>
&nbsp; &nbsp; <td>11111111111</td>
&nbsp; &nbsp; <td>111111111</td>
&nbsp; &nbsp; </tr>
&nbsp; &nbsp; <tr class="info">
&nbsp; &nbsp; <td>3</td>
&nbsp; &nbsp; <td>qian</td>
&nbsp; &nbsp; <td>shou</td>
&nbsp; &nbsp; <td>11111111111</td>
&nbsp; &nbsp; <td>111111111</td>
&nbsp; &nbsp; </tr>
&nbsp; &nbsp; <tr class="success">
&nbsp; &nbsp; <td>4</td>
&nbsp; &nbsp; <td>qian</td>
&nbsp; &nbsp; <td>shou</td>
&nbsp; &nbsp; <td>11111111111</td>
&nbsp; &nbsp; <td>111111111</td>
&nbsp; &nbsp; </tr>
&nbsp; </tbody>
</table>

更多精彩内容其他人还在看

php实现的美国50个州选择列表实例

这篇文章主要介绍了php实现的美国50个州选择列表实例,可实现让当前州为选中状态的功能,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

PHP使用递归生成文章树

写递归函数,可考虑缓存,定义一些静态变量来存上一次运行的结果,多程序运行效率很有帮助.大概步骤如下:首先到数据库取数据,放到一个数组,然后把数据转化为一个树型状的数组,最后把这个树型状的数组转为html代码。下面我们来看个实例
收藏 0 赞 0 分享

wordpress安装过程中遇到中文乱码的处理方法

这篇文章主要介绍了wordpress安装过程中遇到中文乱码的处理方法,是个人项目中遇到的一个奇葩事件,经过一番研究,终于解决,这里记录下来分享给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

php的crc32函数使用时需要注意的问题(不然就是坑)

这篇文章主要介绍了php的crc32函数使用时需要注意的问题(不然就是坑) ,需要的朋友可以参考下
收藏 0 赞 0 分享

PHP中把对象转换为关联数组代码分享

这篇文章主要介绍了PHP中把对象转换为关联数组代码分享,本文直接给出实现代码,需要的朋友可以参考下
收藏 0 赞 0 分享

php检测url是否存在的方法

这篇文章主要介绍了php检测url是否存在的方法,涉及php中get_headers及正则匹配的技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

php获取twitter最新消息的方法

这篇文章主要介绍了php获取twitter最新消息的方法,涉及php操作curl及正则替换的技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

php遍历CSV类实例

这篇文章主要介绍了php遍历CSV类,实例分析了php针对csv文件的打开、读取及遍历的技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

PHP使用mysqldump命令导出数据库

最近用php写一个数据备份的功能。做法是使用php的system函数执行mysqldump命令,进行备份,这里分享给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

PHP用反撇号执行外部命令

shell_exec() 命令行实际上仅是反撇号 ` 操作符的变体,如果您编写过 shell 或 Perl 脚本,您就知道可以在反撇号操作符内部捕捉其他命令的输出。
收藏 0 赞 0 分享
查看更多