宜配屋

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

yipeiwu_com6年前PHP代码库
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>



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>



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>

返回列表

上一篇：Python字符转换

下一篇：PHP生成静态页面详解

相关文章

PHP中array_merge和array相加的区别分析

首先来看看键名是string，两者区别： 复制代码 代码如下:<?php$arr1 = array('a'=>'PHP');$arr2 = array('a'=>'JA...

thinkphp实现163、QQ邮箱收发邮件的方法

thinkphp实现163、QQ邮箱收发邮件的方法

用了很长时间去一步一步摸索，终于先在163 网易邮箱上测试成功了，下面就把这个过程分享给大家。 在进入正题这前先看下网易（163）邮箱的服务器地址和端口号： 一、前期准备 使用网易邮...

php foreach循环中使用引用的问题

看代码，再做解释复制代码 代码如下:<?php $array=array('a','b','c','d'); foreach($array as $key=>$val){ &...

php调整gif动画图片尺寸示例代码分享

类的使用demo： 复制代码 代码如下:<?php require_once "roucheng.php";  $gr = new gifresizer; $gr->...

PHP快速排序算法实例分析

本文实例讲述了PHP快速排序算法。分享给大家供大家参考，具体如下： 快速排序：在无序的数组$data中，选择任意一个值作为对比值，定义i为头部检索索引，j为尾部检索索引， 算法步骤： （...

© YiPeiWu.com 【宜配屋】 粤ICP备17031333号

Powered By Z-BlogPHP. Theme by TOYEAN.