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 相关文章推荐
数据库的日期格式转换
Oct 09 PHP
php分页示例代码
Mar 19 PHP
浅谈php中mysql与mysqli的区别分析
Jun 10 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
May 10 PHP
CodeIgniter输出中文乱码的两种解决办法
Jun 12 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
Jun 13 PHP
解决PHP里大量数据循环时内存耗尽的方法
Oct 10 PHP
php结合md5的加密解密算法实例
Sep 30 PHP
Yii2中使用asset压缩js,css文件的方法
Nov 24 PHP
PHP实践教程之过滤、验证、转义与密码详解
Jul 24 PHP
Docker搭建自己的PHP开发环境
Feb 24 PHP
Laravel框架实现即点即改功能的方法分析
Oct 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
You might like
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
Vue.js划分组件的方法
2017/10/29 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
python回调函数的使用方法
2014/01/23 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
python根据文本生成词云图代码实例
2019/11/15 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
《孔子游春》教学反思
2014/02/25 职场文书
学生偷窃检讨书
2014/09/25 职场文书
小学语文教学反思范文
2016/03/03 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
linux下安装redis图文详细步骤
2021/12/04 Redis