1. 程式人生 > >html5: table表格與頁面佈局整理

html5: table表格與頁面佈局整理

傳統表格佈局之table標籤排版總結:   預設樣式:
<style>
  table {
    max-width: 800px;
    border-spacing: 2px;
    border-collapse: initial;
  }
  table td {
    padding: 10px;
    min-width: 50px;
    box-sizing: border-box;
  }
</style>

 

1. 基本表格(雙線表格)

table標籤內新增border屬性:border="1",value值不帶單位
aa 1 1
bb 2 2
程式碼如下:
<table border="1" width="100%">
  <tbody>
    <tr>
      <td>aa</td><td>1</td><td>1</td>
    </tr>
    <tr>
      <td>bb</td><td>2</td><td>2</td>
    </tr>
  </tbody>
</table>

 

2. 無邊框表格

aa 1 1
bb 2 2

程式碼如下:

    <table width="100%">
      <tbody>
        <tr>
          <td>aa</td><td>1</td><td>1</td>
        </tr>
        <tr>
          <td>bb</td><td>2
</td><td>2</td> </tr> </tbody> </table>

 

3. 單線表格

aa 1 1
bb 2 2

程式碼如下:

    <table border="1" width="100%" style="border-collapse: collapse;">
      <thead></thead>
      <tbody>
        <tr>
          <td>aa</td><td>1</td><td>1</td>
        </tr>
        <tr>
          <td>bb</td><td>2</td><td>2</td>
        </tr>
      </tbody>
    </table>

 

 

4. 合併多列表格

rowspan:
行合併數目
aa 1
bb 2
cc 3 3

aa colspan: 列合併數目(特定長度的單元格,不會刪除後面的單元格) 1
bb 2 2 2

程式碼如下:

    <table border="1" width="100%">
      <tbody>
        <tr>
          <td rowspan="2" width="100px">rowspan:<br />行合併數目</td><td>aa</td><td>1</td>
        </tr>
        <tr>
          <td>bb</td><td>2</td>
        </tr>
        <tr>
          <td>cc</td><td>3</td><td>3</td>
        </tr>
      </tbody>
    </table>

    <table border="1" width="100%">
      <tbody>
        <tr>
          <td>aa</td><td colspan="2">colspan: 列合併數目(特定長度的單元格,不會刪除後面的單元格)</td><td>1</td>
        </tr>
        <tr>
          <td>bb</td><td width="200px">2</td><td width="200px">2</td><td>2</td>
        </tr>
      </tbody>
    </table>

 

5. 涵蓋所有table標籤表格

表格標題:caption標籤

表體1:tbody 注:tbody可以有多個 1
2 3 4
表體2:tbody 注:tbody如果不寫,瀏覽器裡也會自動生成 1
2 3 4
註腳:tfoot - -

程式碼如下:

    <table border="1" width="100%">
<caption>表格標題:caption標籤<br /><br /></caption>
<thead> <th>表頭thead</th><th>th1</th><th>th2</th> </thead>
<tbody> <tr> <td style="width: 33%">表體1:tbody</td><td style="width: 33%">注:tbody可以有多個</td><td>1</td> </tr> <tr> <td>2</td><td>3</td><td>4</td> </tr> </tbody>
<tbody> <tr> <td>表體2:tbody</td><td>注:tbody如果不寫,瀏覽器裡也會自動生成</td><td>1</td> </tr> <tr> <td>2</td><td>3</td><td>4</td> </tr> </tbody>
<tfoot> <tr> <td>註腳:tfoot</td><td>-</td><td>-</td> </tr> </tfoot>
</table>

 

6. 表格例項

公司名稱 xxx有限公司
證件型別 身份證
身份證 10011***123
資訊 catA br:
br:
catB  
catC  
catD1   catD2  
catD3   catD4  

程式碼如下:

<table border="1" width="100%">
      <thead></thead>
      <tbody>
        <tr>
          <td>公司名稱</td><td colspan="4">xxx有限公司</td>
        </tr>
        <tr>
          <td>證件型別</td><td colspan="4">身份證</td>
        </tr>
        <tr>
          <td>身份證</td><td colspan="4">10011***123</td>
        </tr>
        <tr>
          <td rowspan="5">資訊</td><td class="label">catA</td><td colspan="3">br:<br />br:<br /></td>
        </tr>
        <tr>
          <td>catB</td><td colspan="3"></td>
        </tr>
        <tr>
          <td>catC</td><td colspan="3"></td>
        </tr>
        <tr>
          <td>catD1</td><td></td><td class="label">catD2</td><td></td>
        </tr>
        <tr>
          <td>catD3</td><td></td><td class="label">catD4</td><td></td>
        </tr>
      </tbody>
    </table>