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值不带单位
aa11
bb22
代码如下:
<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. 无边框表格

aa11
bb22

代码如下:

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

aa11
bb22

代码如下:

    <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:
行合并数目
aa1
bb2
cc33

aa colspan: 列合并数目(特定长度的单元格,不会删除后面的单元格) 1
bb222

代码如下:

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

注脚:tfoot--
表体1:tbody注:tbody可以有多个1
234
表体2:tbody注:tbody如果不写,浏览器里也会自动生成1
234

代码如下:

    <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
信息catAbr:
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>

 

 

 

转载于:https://www.cnblogs.com/ziChin/p/10165946.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值