本篇內容介紹了“css中table標簽的結構與合并單元格的實例代碼”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

成都創新互聯公司2013年至今，先為鼓樓等服務建站，鼓樓等地企業，進行企業商務咨詢服務。為鼓樓企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

1.<table>標簽的結構
示例代碼：

復制代碼 代碼如下:

&nbsp;<table border="1">
&nbsp; &nbsp; &nbsp; <caption>信息統計表</caption>
&nbsp; &nbsp; &nbsp;  <thead>
&nbsp; &nbsp; &nbsp;  <tr >
&nbsp; &nbsp; &nbsp;  <th>#</th>
&nbsp; &nbsp; &nbsp;  </tr>
&nbsp; &nbsp; &nbsp; </thead>
&nbsp; &nbsp; &nbsp; <tbody>
&nbsp; &nbsp; &nbsp;  <tr>
&nbsp; &nbsp; &nbsp;  <td>1</td>
&nbsp; &nbsp; &nbsp;  </tr>
&nbsp; &nbsp; &nbsp;  <tr>
&nbsp; &nbsp; &nbsp;  <td>2</td>
&nbsp; &nbsp; &nbsp;  </tr>
&nbsp; &nbsp; &nbsp;  <tr>
&nbsp; &nbsp; &nbsp;  <td>3</td>
&nbsp; &nbsp; &nbsp;  </tr>
&nbsp; &nbsp; &nbsp;  <tr>
&nbsp; &nbsp; &nbsp;  <td>4</td>
&nbsp; &nbsp; &nbsp;  </tr>
&nbsp; &nbsp; &nbsp; </tbody>
</table>

一個完整的例子：

復制代碼 代碼如下:

&nbsp;<table border="1">
&nbsp; &nbsp; &nbsp; <caption class="text-center">信息統計表</caption>
&nbsp; &nbsp; &nbsp; <thead>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;<tr >
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>#</th>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>Firstname</th>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>Lastname</th>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>Phone</th>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp;<th>QQ</th>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;</tr>
&nbsp; &nbsp; &nbsp; </thead>
&nbsp; &nbsp; &nbsp; <tbody>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;<tr class="error">
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>1</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>qian</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>shou</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>11111111111</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>111111111</td>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;</tr>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;<tr class="warning">
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>2</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>qian</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>shou</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>11111111111</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>111111111</td>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;</tr>&nbsp;
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;<tr class="info"> <td>3</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>qian</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>shou</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>11111111111</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>111111111</td>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;</tr>&nbsp;
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;<tr class="success">
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;  &nbsp;<td>4</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>qian</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>shou</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>11111111111</td>
&nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;<td>111111111</td>
&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;</tr>&nbsp;
&nbsp; &nbsp; &nbsp; </tbody>
</table>

2.合并上下的單元格（rowspan）
示例代碼：

復制代碼 代碼如下:

<table border="1">
&nbsp; &nbsp; &nbsp; <caption class="text-center">信息統計表</caption>
&nbsp; &nbsp; &nbsp;  <thead>
&nbsp; &nbsp; &nbsp;   <tr >
&nbsp; &nbsp; &nbsp;   <th>#</th>
&nbsp; &nbsp; &nbsp;   <th>Firstname</th>
&nbsp; &nbsp; &nbsp;   <th>Lastname</th>
&nbsp; &nbsp; &nbsp;   <th>Phone</th>
&nbsp; &nbsp; &nbsp;   <th>QQ</th>
&nbsp; &nbsp; &nbsp;   </tr>
&nbsp; &nbsp; &nbsp;  </thead>
&nbsp; &nbsp; &nbsp; <tbody>
&nbsp; &nbsp; &nbsp;  <tr class="error">
&nbsp; &nbsp; &nbsp;  <td rowspan="2">1</td>
&nbsp; &nbsp; &nbsp;  <td>qian</td>
&nbsp; &nbsp; &nbsp;  <td>shou</td>
&nbsp; &nbsp; &nbsp;  <td>11111111111</td>
&nbsp; &nbsp; &nbsp;  <td>111111111</td>
&nbsp; &nbsp; &nbsp;  </tr> <tr class="warning">
&nbsp; &nbsp; &nbsp;  <td>qian</td>
&nbsp; &nbsp; &nbsp;  <td>shou</td>
&nbsp; &nbsp; &nbsp;  <td>11111111111</td>
&nbsp; &nbsp; &nbsp;  <td>111111111</td>
&nbsp; &nbsp; &nbsp;  </tr> <tr class="info"> <td>3</td>
&nbsp; &nbsp; &nbsp;  <td>qian</td>
&nbsp; &nbsp; &nbsp;  <td>shou</td>
&nbsp; &nbsp; &nbsp;  <td>11111111111</td>
&nbsp; &nbsp; &nbsp;  <td>111111111</td>
&nbsp; &nbsp; &nbsp;  </tr> <tr class="success"> <td>4</td>
&nbsp; &nbsp; &nbsp;  <td>qian</td>
&nbsp; &nbsp; &nbsp;  <td>shou</td>
&nbsp; &nbsp; &nbsp;  <td>11111111111</td>
&nbsp; &nbsp; &nbsp;  <td>111111111</td>
&nbsp; &nbsp; &nbsp;  </tr>&nbsp;
&nbsp; &nbsp; &nbsp; </tbody>
</table>

3.合并左右的單元格（colspan）
示例代碼：

復制代碼 代碼如下:

<table class="table table-condensed table-bordered">
&nbsp; <caption class="text-center">信息統計表</caption>
&nbsp; &nbsp; <thead>
&nbsp; &nbsp; &nbsp; <tr >
&nbsp; &nbsp; &nbsp; <th>#</th>
&nbsp; &nbsp; &nbsp; <th>Firstname</th>
&nbsp; &nbsp; &nbsp; <th>Lastname</th>
&nbsp; &nbsp; &nbsp; <th>Phone</th>
&nbsp; &nbsp; &nbsp; <th>QQ</th>
&nbsp; &nbsp; &nbsp; </tr>
&nbsp; &nbsp; </thead>
&nbsp; <tbody>
&nbsp; &nbsp; <tr class="error">
&nbsp; &nbsp; <td>1</td>
&nbsp; &nbsp; <td colspan="4"><p class="text-center">這是合并了四個單元格</p></td>
&nbsp; &nbsp; </tr>
&nbsp; &nbsp; <tr class="warning">
&nbsp; &nbsp; <td>2</td>
&nbsp; &nbsp; <td>qian</td>
&nbsp; &nbsp; <td>shou</td>
&nbsp; &nbsp; <td>11111111111</td>
&nbsp; &nbsp; <td>111111111</td>
&nbsp; &nbsp; </tr>
&nbsp; &nbsp; <tr class="info">
&nbsp; &nbsp; <td>3</td>
&nbsp; &nbsp; <td>qian</td>
&nbsp; &nbsp; <td>shou</td>
&nbsp; &nbsp; <td>11111111111</td>
&nbsp; &nbsp; <td>111111111</td>
&nbsp; &nbsp; </tr>
&nbsp; &nbsp; <tr class="success">
&nbsp; &nbsp; <td>4</td>
&nbsp; &nbsp; <td>qian</td>
&nbsp; &nbsp; <td>shou</td>
&nbsp; &nbsp; <td>11111111111</td>
&nbsp; &nbsp; <td>111111111</td>
&nbsp; &nbsp; </tr>
&nbsp; </tbody>
</table>

“css中table標簽的結構與合并單元格的實例代碼”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

當前標題：css中table標簽的結構與合并單元格的實例代碼-創新互聯
當前網址：http://vcdvsql.cn/article16/cdgggg.html

成都網站建設公司_創新互聯，為您提供定制開發、網站內鏈、自適應網站、App設計、域名注冊、服務器托管

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯