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實(shí)現(xiàn)jQuery擴(kuò)展函數(shù)
今天在運(yùn)行書上的jQuery代碼時(shí)，不知道是書上弄錯(cuò)了，還是我的jQuery版本的問(wèn)題，例子上面有一個(gè)jQuery函數(shù)不存在。2009-10-10
PHP實(shí)現(xiàn)的各種進(jìn)制相互轉(zhuǎn)換功能小工具示例
這篇文章主要介紹了PHP實(shí)現(xiàn)的各種進(jìn)制相互轉(zhuǎn)換功能小工具,涉及php常見(jiàn)的二進(jìn)制、八進(jìn)制、十六進(jìn)制等相互轉(zhuǎn)換操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03
基于HBase Thrift接口的一些使用問(wèn)題及相關(guān)注意事項(xiàng)的詳解
本篇文章是對(duì)HBase Thrift接口的一些使用問(wèn)題及相關(guān)注意事項(xiàng)進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要介紹了php實(shí)現(xiàn)批量修改文件名稱的方法,涉及php針對(duì)文件的遍歷及文件名的替換操作相關(guān)技巧,需要的朋友可以參考下2016-07-07
淺談php處理后端&接口訪問(wèn)超時(shí)的解決方法
下面小編就為大家?guī)?lái)一篇淺談php處理后端&接口訪問(wèn)超時(shí)的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
C#靜態(tài)方法與非靜態(tài)方法實(shí)例分析
這篇文章主要介紹了C#靜態(tài)方法與非靜態(tài)方法,重點(diǎn)講述了靜態(tài)方法的實(shí)際應(yīng)用,有助于進(jìn)一步加深對(duì)C#程序設(shè)計(jì)的理解,需要的朋友可以參考下2014-09-09
解析php session_set_save_handler 函數(shù)的用法(mysql)
本篇文章是對(duì)php中session_set_save_handler 函數(shù)的用法(mysql)進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
PHP常用日期加減計(jì)算方法實(shí)例小結(jié)
這篇文章主要介紹了PHP常用日期加減計(jì)算方法,結(jié)合實(shí)例形式總結(jié)分析了php日期計(jì)算常見(jiàn)的時(shí)區(qū)設(shè)置、date日期轉(zhuǎn)換、計(jì)算等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
php集成環(huán)境xampp中apache無(wú)法啟動(dòng)問(wèn)題解決方案
這篇文章主要介紹了php集成環(huán)境xampp中apache無(wú)法啟動(dòng)問(wèn)題解決方案,需要的朋友可以參考下2014-11-11
這篇文章主要介紹了PHP獲取遠(yuǎn)程圖片并保存到本地的方法,涉及php遠(yuǎn)程文件操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05