css中table標(biāo)簽的結(jié)構(gòu)與合并單元格的實例代碼-創(chuàng)新互聯(lián)

本篇內(nèi)容介紹了“css中table標(biāo)簽的結(jié)構(gòu)與合并單元格的實例代碼”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

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

1.<table>標(biāo)簽的結(jié)構(gòu)
示例代碼：

復(fù)制代碼代碼如下:

一個完整的例子：

復(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>

css中table標(biāo)簽的結(jié)構(gòu)與合并單元格的實例代碼

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>

css中table標(biāo)簽的結(jié)構(gòu)與合并單元格的實例代碼

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>

css中table標(biāo)簽的結(jié)構(gòu)與合并單元格的實例代碼

“css中table標(biāo)簽的結(jié)構(gòu)與合并單元格的實例代碼”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

當(dāng)前標(biāo)題：css中table標(biāo)簽的結(jié)構(gòu)與合并單元格的實例代碼-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://bm7419.com/article16/cdgggg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站內(nèi)鏈、自適應(yīng)網(wǎng)站、App設(shè)計、域名注冊、服務(wù)器托管

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

猜你還喜歡下面的內(nèi)容