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安全编程之加密功能
Oct 09 PHP
PHP 分页原理分析,大家可以看看
Dec 21 PHP
php模块memcache和memcached区别分析
Jun 14 PHP
php preg_filter执行一个正则表达式搜索和替换
Feb 27 PHP
腾讯QQ微博API接口获取微博内容
Oct 30 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
Dec 23 PHP
php检测mysql表是否存在的方法小结
Jul 20 PHP
PHP基于堆栈实现的高级计算器功能示例
Sep 15 PHP
PHP中的Iterator迭代对象属性详解
Apr 12 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
Sep 30 PHP
php 多继承的几种常见实现方法示例
Nov 18 PHP
TP5框架实现签到功能的方法分析
Apr 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php使用GD实现颜色渐变实例
2015/06/02 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
php 数组元素快速去重
2017/05/05 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
Python随机数random模块使用指南
2016/09/09 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python正则表达式之对号入座篇
2018/07/24 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
银行门卫岗位职责
2013/12/29 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
公务员个人年终总结
2015/02/12 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android