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