正文

html5: table表格与页面布局整理

IP云
IP云V管理员/0 阅读
11/29
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
传统表格布局之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></td><td></td>

    </tr>

    <tr>

      <td>bb</td><td></td><td></td>

    </tr>

  </tbody>

</table>

2. 无边框表格


#cnblogs_post_body .table20190112 table.no-border td {
border-width: 0;
}

aa 1 1
bb 2 2

代码如下： 

    <table width="100%">

      <tbody>

        <tr>

          <td>aa</td><td></td><td></td>

        </tr>

        <tr>

          <td>bb</td><td></td><td></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></td><td></td>

        </tr>

        <tr>

          <td>bb</td><td></td><td></td>

        </tr>

      </tbody>

    </table>

4. 合并多列表格

rowspan:
行合并数目 		aa 1
bb 2
cc 3 3
aa colspan: 列合并数目(特定长度的单元格，不会删除后面的单元格） 1
bb 2 2 2

代码如下： 

    <table border="" width="100%">

      <tbody>

        <tr>

          <td rowspan="2" width="100px">rowspan:<br />行合并数目</td><td>aa</td><td></td>

        </tr>

        <tr>

          <td>bb</td><td></td>

        </tr>

        <tr>

          <td>cc</td><td></td><td></td>

        </tr>

      </tbody>

    </table>

    <table border="" width="100%">

      <tbody>

        <tr>

          <td>aa</td><td colspan="2">colspan: 列合并数目(特定长度的单元格，不会删除后面的单元格）</td><td></td>

        </tr>

        <tr>

          <td>bb</td><td width="200px"></td><td width="200px"></td><td></td>

        </tr>

      </tbody>

    </table>

5. 涵盖所有table标签表格

表格标题：caption标签
表体1：tbody 注：tbody可以有多个 1
2 3 4
表体2：tbody 注：tbody如果不写，浏览器里也会自动生成 1
2 3 4
注脚:tfoot - -

代码如下： 

    <table border="" 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></td>

        </tr>

        <tr>

          <td></td><td></td><td></td>

        </tr>

      </tbody>

      <tbody>

        <tr>

          <td>表体2：tbody</td><td>注：tbody如果不写，浏览器里也会自动生成</td><td></td>

        </tr>

        <tr>

          <td></td><td></td><td></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="">xxx有限公司</td>

        </tr>

        <tr>

          <td>证件类型</td><td colspan="">身份证</td>

        </tr>

        <tr>

          <td>身份证</td><td colspan="">***</td>

        </tr>

        <tr>

          <td rowspan="5">信息</td><td class="label">catA</td><td colspan="">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>


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

相关阅读

目录[+]