展会信息港展会大全

table标签的结构与合并单元格的实现方法
来源:互联网   发布日期:2016-03-02 15:15:15   浏览:1637次  

导读:以下是对table标签的结构与合并单元格的实现方法进行了详细的分析介绍,需要的朋友可以过来参考下1.<table>标签的结构示例代码:复制代码 代码如下:<table borde...

以下是对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>

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>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港