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

时间：2021-05-17 08:40:05|栏目：PHP代码|点击：次

1.<table>标签的结构
示例代码：

 
&nbsp;<table border="1">
 
&nbsp; &nbsp; &nbsp; <caption>信息统计表</caption>
 
&nbsp; &nbsp; &nbsp;  <thead>
 
&nbsp; &nbsp; &nbsp;  <tr >
 
&nbsp; &nbsp; &nbsp;  <th>#</th>
 
&nbsp; &nbsp; &nbsp;  </tr>
 
&nbsp; &nbsp; &nbsp; </thead>
 
&nbsp; &nbsp; &nbsp; <tbody>
 
&nbsp; &nbsp; &nbsp;  <tr>
 
&nbsp; &nbsp; &nbsp;  <td>1</td>
 
&nbsp; &nbsp; &nbsp;  </tr>
 
&nbsp; &nbsp; &nbsp;  <tr>
 
&nbsp; &nbsp; &nbsp;  <td>2</td>
 
&nbsp; &nbsp; &nbsp;  </tr>
 
&nbsp; &nbsp; &nbsp;  <tr>
 
&nbsp; &nbsp; &nbsp;  <td>3</td>
 
&nbsp; &nbsp; &nbsp;  </tr>
 
&nbsp; &nbsp; &nbsp;  <tr>
 
&nbsp; &nbsp; &nbsp;  <td>4</td>
 
&nbsp; &nbsp; &nbsp;  </tr>
 
&nbsp; &nbsp; &nbsp; </tbody>
 
</table>

一个完整的例子：

复制代码代码如下:

 
&nbsp;<table border="1">
 
&nbsp; &nbsp; &nbsp; <caption class="text-center">信息统计表</caption>
 
&nbsp; &nbsp; &nbsp; <thead>
 
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;<tr >
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>#</th>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>Firstname</th>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>Lastname</th>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>Phone</th>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>QQ</th>
 
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;</tr>
 
&nbsp; &nbsp; &nbsp; </thead>
 
&nbsp; &nbsp; &nbsp; <tbody>
 
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;<tr class="error">
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>1</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>qian</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>shou</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>11111111111</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>111111111</td>
 
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;</tr>
 
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;<tr class="warning">
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>2</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>qian</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>shou</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>11111111111</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>111111111</td>
 
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;</tr>&nbsp;
 
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;<tr class="info"> <td>3</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>qian</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>shou</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>11111111111</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>111111111</td>
 
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;</tr>&nbsp;
 
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;<tr class="success">
 
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;  &nbsp;<td>4</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>qian</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>shou</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>11111111111</td>
 
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>111111111</td>
 
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;</tr>&nbsp;
 
&nbsp; &nbsp; &nbsp; </tbody>
 
</table>

2.合并上下的单元格（rowspan）
示例代码：

复制代码代码如下:

 
<table border="1">
 
&nbsp; &nbsp; &nbsp; <caption class="text-center">信息统计表</caption>
 
&nbsp; &nbsp; &nbsp;  <thead>
 
&nbsp; &nbsp; &nbsp;   <tr >
 
&nbsp; &nbsp; &nbsp;   <th>#</th>
 
&nbsp; &nbsp; &nbsp;   <th>Firstname</th>
 
&nbsp; &nbsp; &nbsp;   <th>Lastname</th>
 
&nbsp; &nbsp; &nbsp;   <th>Phone</th>
 
&nbsp; &nbsp; &nbsp;   <th>QQ</th>
 
&nbsp; &nbsp; &nbsp;   </tr>
 
&nbsp; &nbsp; &nbsp;  </thead>
 
&nbsp; &nbsp; &nbsp; <tbody>
 
&nbsp; &nbsp; &nbsp;  <tr class="error">
 
&nbsp; &nbsp; &nbsp;  <td rowspan="2">1</td>
 
&nbsp; &nbsp; &nbsp;  <td>qian</td>
 
&nbsp; &nbsp; &nbsp;  <td>shou</td>
 
&nbsp; &nbsp; &nbsp;  <td>11111111111</td>
 
&nbsp; &nbsp; &nbsp;  <td>111111111</td>
 
&nbsp; &nbsp; &nbsp;  </tr> <tr class="warning">
 
&nbsp; &nbsp; &nbsp;  <td>qian</td>
 
&nbsp; &nbsp; &nbsp;  <td>shou</td>
 
&nbsp; &nbsp; &nbsp;  <td>11111111111</td>
 
&nbsp; &nbsp; &nbsp;  <td>111111111</td>
 
&nbsp; &nbsp; &nbsp;  </tr> <tr class="info"> <td>3</td>
 
&nbsp; &nbsp; &nbsp;  <td>qian</td>
 
&nbsp; &nbsp; &nbsp;  <td>shou</td>
 
&nbsp; &nbsp; &nbsp;  <td>11111111111</td>
 
&nbsp; &nbsp; &nbsp;  <td>111111111</td>
 
&nbsp; &nbsp; &nbsp;  </tr> <tr class="success"> <td>4</td>
 
&nbsp; &nbsp; &nbsp;  <td>qian</td>
 
&nbsp; &nbsp; &nbsp;  <td>shou</td>
 
&nbsp; &nbsp; &nbsp;  <td>11111111111</td>
 
&nbsp; &nbsp; &nbsp;  <td>111111111</td>
 
&nbsp; &nbsp; &nbsp;  </tr>&nbsp;
 
&nbsp; &nbsp; &nbsp; </tbody>
 
</table>

3.合并左右的单元格（colspan）
示例代码：

复制代码代码如下:

 
<table class="table table-condensed table-bordered">
 
&nbsp; <caption class="text-center">信息统计表</caption>
 
&nbsp; &nbsp; <thead>
 
&nbsp; &nbsp; &nbsp; <tr >
 
&nbsp; &nbsp; &nbsp; <th>#</th>
 
&nbsp; &nbsp; &nbsp; <th>Firstname</th>
 
&nbsp; &nbsp; &nbsp; <th>Lastname</th>
 
&nbsp; &nbsp; &nbsp; <th>Phone</th>
 
&nbsp; &nbsp; &nbsp; <th>QQ</th>
 
&nbsp; &nbsp; &nbsp; </tr>
 
&nbsp; &nbsp; </thead>
 
&nbsp; <tbody>
 
&nbsp; &nbsp; <tr class="error">
 
&nbsp; &nbsp; <td>1</td>
 
&nbsp; &nbsp; <td colspan="4"><p class="text-center">这是合并了四个单元格</p></td>
 
&nbsp; &nbsp; </tr>
 
&nbsp; &nbsp; <tr class="warning">
 
&nbsp; &nbsp; <td>2</td>
 
&nbsp; &nbsp; <td>qian</td>
 
&nbsp; &nbsp; <td>shou</td>
 
&nbsp; &nbsp; <td>11111111111</td>
 
&nbsp; &nbsp; <td>111111111</td>
 
&nbsp; &nbsp; </tr>
 
&nbsp; &nbsp; <tr class="info">
 
&nbsp; &nbsp; <td>3</td>
 
&nbsp; &nbsp; <td>qian</td>
 
&nbsp; &nbsp; <td>shou</td>
 
&nbsp; &nbsp; <td>11111111111</td>
 
&nbsp; &nbsp; <td>111111111</td>
 
&nbsp; &nbsp; </tr>
 
&nbsp; &nbsp; <tr class="success">
 
&nbsp; &nbsp; <td>4</td>
 
&nbsp; &nbsp; <td>qian</td>
 
&nbsp; &nbsp; <td>shou</td>
 
&nbsp; &nbsp; <td>11111111111</td>
 
&nbsp; &nbsp; <td>111111111</td>
 
&nbsp; &nbsp; </tr>
 
&nbsp; </tbody>
 
</table>

上一篇：PHP 替换模板变量实现步骤

栏目：PHP代码

下一篇：php+mysqli实现批量替换数据库表前缀的方法

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

本文地址：http://www.codeinn.net/misctech/123042.html

更多PHP代码

PHP代码

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

阅读排行

推荐教程