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值不带单位

代码如下：

<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. 无边框表格

代码如下：

    <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. 单线表格

代码如下：

    <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. 合并多列表格

代码如下：

    <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标签表格

代码如下：

    <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. 表格实例

代码如下：

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

#table20190112 table { max-width: 800px; border-collapse: inherit; border-spacing: 1px }
#table20190112 table td { padding: 10px; min-width: 50px }

原文地址：https://www.cnblogs.com/ziChin/p/10165946.html