首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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标签的结构与合并单元格的实现方法

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
火车头采集器3.0采集图文教程
Mar 17 PHP
PHP 用数组降低程序的时间复杂度
Dec 04 PHP
php skymvc 一款轻量、简单的php
Jun 28 PHP
PHP flock 文件锁详细介绍
Dec 29 PHP
php权重计算方法代码分享
Jan 09 PHP
php跨域cookie共享使用方法
Feb 20 PHP
PHP图片裁剪函数（保持图像不变形）
May 04 PHP
ThinkPHP CURD方法之order方法详解
Jun 18 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
Oct 21 PHP
php实现根据词频生成tag云的方法
Apr 17 PHP
PHP.vs.JAVA
Apr 29 PHP
php实现将二维关联数组转换成字符串的方法详解
Jul 31 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
字典(3) set(1) SingleFlight(2) Next.js(1) Mybatis-Plus(3) el-table(1) TableField(1) 脚手架(2) frozenset(1) 并发(8)
You might like
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php实现的漂亮分页方法
2014/04/17 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
Vue中props的详解
2019/05/16 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
Python实现某论坛自动签到功能
2019/08/20 Python
Python列表的切片实例讲解
2019/08/20 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
中科软测试工程师面试题
2012/06/16 面试题
电脑饰品店的创业计划书
2014/01/21 职场文书
维稳工作情况汇报
2014/10/27 职场文书
上诉答辩状范文
2015/05/22 职场文书
个人收入证明范本
2015/06/12 职场文书
小学教师教学反思
2016/02/24 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python