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


Posted in PHP onJuly 24, 2013

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>

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>

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标签的结构与合并单元格的实现方法
PHP 相关文章推荐
php simplexmlElement操作xml的命名空间实现代码
Jan 04 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
Jun 06 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
Jan 17 PHP
Zend Framework+smarty用法实例详解
Mar 19 PHP
php文件系统处理方法小结
May 23 PHP
一个简单安全的PHP验证码类、PHP验证码
Sep 24 PHP
PHP实现文件上传下载实例
Oct 18 PHP
PHP运行模式汇总
Nov 06 PHP
php 字符串中是否包含指定字符串的多种方法
Apr 12 PHP
Swoole实现异步投递task任务案例详解
Apr 02 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
Apr 10 PHP
php中配置文件保存修改操作 如config.php文件的读取修改等操作
May 12 PHP
ueditor 1.2.6 使用方法说明
Jul 24 #PHP
PHP与javascript实现变量交互的示例代码
Jul 23 #PHP
php curl基本操作详解
Jul 23 #PHP
如何使用FireFox插件FirePHP调试PHP
Jul 23 #PHP
PHP时间格式控制符对照表分享
Jul 23 #PHP
利用curl抓取远程页面内容的示例代码
Jul 23 #PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
Jul 22 #PHP
You might like
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
小程序实现分类页
2019/07/12 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
python编程羊车门问题代码示例
2017/10/25 Python
python的中异常处理机制
2018/08/30 Python
Python3实现定时任务的四种方式
2019/06/03 Python
Python生成词云的实现代码
2020/01/14 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Python 高效编程技巧分享
2020/09/10 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
函授自我鉴定
2013/11/06 职场文书
有关打架的检讨书
2014/01/25 职场文书
大学军训感言1500字
2014/03/09 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
教师节倡议书2015
2015/04/27 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python