web设计_8_数据表格内容样式分离

1.页面需要用到table的时候,样式重置CSS要设置:

table{
border-collapse: collapse;
border-spacing: 0;
}

2. HTML结构 

<table>
<caption>标题</caption>
  <thead>
    <tr>
      <th scope="col">...</th>
     </tr>
  </thead>
  <tfoot>              /*tfoot在tbody之前,这样浏览器就可以在收到所有数据前呈现页脚了*/
    <tr>
      <td>...</td>
     </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>...</td>
    </tr>
  </tbody>

</table>

2.1 使用caption正确表示标题

2.2 thead,tbofy,tfoot 三者配合一起使用,对表格数据进行分组

2.3 当表格数据过多时,最好将tfoot放置与tbody之前,这样浏览器就可以在收到所有数据前呈现页脚了。

2.4 thead中,设置属性scope=col,scope 属性定义将表头单元与数据单元相关联的方法,屏幕阅读器可以利用该属性。

 

3. 表格整体外边框和背景添加在table上。

4. 通过给th或td添加padding,border,color属性来修饰表格及内部文字样式。

5.通过使用CSS3的 :nth-child伪元素可以实现交替行背景色。

6.可以设置th,td的:first-child第一个实例文字居左对齐,且table的宽度为百分数,达到table可以自动伸缩来适应容器。

当然也可以通过jquery选择器来选择元素并添加样式。

效果如下:

jkgh1

转载于:https://www.cnblogs.com/Peng2014/p/4644143.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值