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引用传值实例详解学习
Nov 06 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
Dec 03 PHP
Laravel的throttle中间件失效问题解决方法
Oct 09 PHP
PHP yii实现model添加默认值的方法(两种方法)
Nov 10 PHP
详谈PHP面向对象中常用的关键字和魔术方法
Feb 04 PHP
利用PHP实现开心消消乐的算法示例
Oct 12 PHP
Laravel下生成验证码的类
Nov 15 PHP
Laravel框架实现利用监听器进行sql语句记录功能
Jun 06 PHP
tp5实现微信小程序多图片上传到服务器功能
Jul 16 PHP
PHP PDOStatement::getAttribute讲解
Feb 01 PHP
YII框架行为behaviors用法示例
Apr 26 PHP
PHP autoload使用方法及步骤详解
Sep 05 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小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
深入解析php之apc
2013/05/15 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php查看当前Session的ID实例
2015/03/16 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
react项目从新建到部署的实现示例
2021/02/19 Javascript
python抓取网页中的图片示例
2014/02/28 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
Django中template for如何使用方法
2021/01/31 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
中文系师范生自荐信
2013/10/01 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
css3 选择器
2022/05/11 HTML / CSS