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

傳統表格布局之table標簽排版總結：

 

默認樣式：

<style>
  table {
    max-width: 800px;
    border-spacing: 2px;
    border-collapse: initial;
    display: table;
  }
  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>