管理资源吧首页>>>教程>>>编程>>>PHP教程>>>

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

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

　　

教程首页 更多教程