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