• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3常规使用(5):CSS 控制页面表格样式

    CSS3常规使用(5):CSS 控制页面表格样式

    作者: 分类:HTML5与CSS3.0 点击: 429 次
    wordpress CMS主题:ssmay主题

      在编写静态代码时,我们可以直接在table标签中来控制表格的样式,如:<table border=1  cellpadding=2  cellspacing=3></table,意思是:表格边框是1个像素,表格单元格内边距是2像素,表格单元格的间距是3像素。但是,如果页面表格很多时,我们要重复每一个表格的这样操作,有点浪费。而CSS可以同时控制所有表格的样式,而省去了多余的浪费。一起来看看CSS是如何控制表格的。

      一.表格样式 有五种独有样式:

      1、border-collapse 边框样式

      table {border-collapse: collapse;} 解释:单元格相邻的边框被合并。separate 默认值,单元格边框独立

      2、border-spacing 边框长度值

      table {border-spacing:10px;} border-collapse: separate;的状态下才有效。因为要设置间距,不能合并。

      3、caption-side 标题位置

      table {caption-side: bottom;} 设置表格标题在底部。

      4、empty-cells 单元格内容为空是否隐藏边框。默认是显示

      table {empty-cells: hide;}

      5、table-layout 布局样式,默认为 auto,自适应

      table {table-layout: fixed;} 内容过长后,不会拉伸整个单元格。===================================================

      二、其它样式

      1、list-style-position 位置值

      ul { width: 120px;list-style-position: inside; } 解释:标记位于内容框的内部,默认是outside ,在外部

      2、表格单元格内文本垂直对齐 vertical-align

      table tr td { vertical-align: middle;} 垂直居中 ,top顶部,bottom底部,sub是下标,super是上标

      vertical-align: -200px; 负值往下,正值往上

      3、textarea 前的文字垂直居中 vertical-align: middle;

      以上是我学习CSS3中控制表格的一些总结。



      QQ二维码

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201807276201.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.