table標簽的結(jié)構(gòu)與合并單元格的實現(xiàn)方法
更新時間：2013年07月24日 09:11:57 作者：
以下是對table標簽的結(jié)構(gòu)與合并單元格的實現(xiàn)方法進行了詳細的分析介紹，需要的朋友可以過來參考下
1.<table>標簽的結(jié)構(gòu)
示例代碼：
<table border="1">
<caption>信息統(tǒng)計表</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">信息統(tǒng)計表</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">信息統(tǒng)計表</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">信息統(tǒng)計表</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>
示例代碼：
復(fù)制代碼 代碼如下:
<table border="1">
<caption>信息統(tǒng)計表</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>
一個完整的例子：
復(fù)制代碼 代碼如下:
<table border="1">
<caption class="text-center">信息統(tǒng)計表</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）
示例代碼：
復(fù)制代碼 代碼如下:
<table border="1">
<caption class="text-center">信息統(tǒng)計表</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）
示例代碼：
復(fù)制代碼 代碼如下:
<table class="table table-condensed table-bordered">
<caption class="text-center">信息統(tǒng)計表</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>
相關(guān)文章
PHP在innodb引擎下快速代建全文搜索功能簡明教程【基于xunsearch】
這篇文章主要介紹了PHP在innodb引擎下快速代建全文搜索功能的方法,可基于開源搜索引擎xunsearch實現(xiàn),簡明扼要的講述了安裝與使用的步驟與相關(guān)操作技巧,需要的朋友可以參考下2016-10-10
php數(shù)組排序usort、uksort與sort函數(shù)用法
這篇文章主要介紹了php數(shù)組排序usort、uksort與sort函數(shù)用法,詳細介紹了usort、uksort與sort函數(shù)在數(shù)組排序中的應(yīng)用,具有不錯的參考借鑒價值,需要的朋友可以參考下2014-11-11
本文主要介紹了Redis構(gòu)建分布式鎖的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
php調(diào)用淘寶開放API實現(xiàn)根據(jù)賣家昵稱獲取賣家店鋪ID的方法
這篇文章主要介紹了php調(diào)用淘寶開放API實現(xiàn)根據(jù)賣家昵稱獲取賣家店鋪ID的方法,實例分析了php調(diào)用淘寶API查詢店鋪信息的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
本篇文章是對PHP中的stripos()函數(shù)及注意事項進行了詳細的分析介紹，需要的朋友參考下2013-06-06
PHP 是我用過的語言中，最令人惱火的但同時也是最有趣的語言。我之所以說“令人惱火”主要是因為函數(shù)命名極其不一致。盡管我每天都要用到這些函數(shù)，我還是要想一下“究竟是 str_pos 還是 strpos？是 str_split 還是 strsplit？”。2008-09-09
PHP關(guān)于foreach復(fù)制知識點總結(jié)
在本篇文章里小編給大家分享了關(guān)于PHP關(guān)于foreach復(fù)制知識點總結(jié)，有興趣的朋友們學(xué)習(xí)下。2019-01-01
PHP生成各種隨機驗證碼的方法總結(jié)【附demo源碼】
這篇文章主要介紹了PHP生成各種隨機驗證碼的方法,結(jié)合具體實例形式總結(jié)分析了php常用的生成驗證碼操作相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-06-06
PHP 優(yōu)化配置——加速你的VBB,phpwind,Discuz,IPB,MolyX
PHP 優(yōu)化配置——加速你的VBB,phpwind,Discuz,IPB,MolyX...2007-07-07
在本篇文章里小編給大家分享了關(guān)于PHP寫API輸出的時用echo的原因和相關(guān)知識點，需要的朋友們參考下。2019-04-04