zoukankan      html  css  js  c++  java
  • 11表布局

    table值指定了一个元素定义了一个块级表,它定义了一个生成块框的矩形块。inloine-table指定了一个元素定义了一个行内级表。这说明,该元素定义了一个生成行内框的矩形块。table-row指定了一个元素是一个单元格的行。table-row-group指定了一个元素是一个或多个行的组。table-header-group,table-footer-group与table-row-group很类似。table-column声明元素描述了一个单元格的列。table-column-group声明了一个元素是一个或多个列的组。table-cell指定了一个元素表示表中的单个单元格。table-caption定义了一个表的总标题。

    CSS将其表模型定义为“以行为主”。换句话说,这个模型假设创作人员创建的标记语言会显式声明行,而列是从单元格行的布局推导出来的。在CSS中列和列组只能接受4种样式,border、background、width和visibility。border只有当border-collapse属性为collapse时才能为列和列组设置边框。background只有当单元格及其行有透明背景时,列或列组的背景才可见。width属性定义了列或列组的最小宽度。如果一个列或列组的visibility为collapse,则该列(或列组)中所有单元格都不显示。

    CSS定义了6个不同的“层”来完成表的显示。表、列组、列、行组、行、单元格。对应表各个方面的样式都在其各自的层上绘制。列样式在行样式的下面,所以行背景会覆盖列背景。默认地,所有元素背景都是透明的。

    caption-side属性可以设置标题的位置,值:top|bottom.大多数情况下,为caption应用样式非常类似于块级元素,它们可以有内边距、边框、背景等。

    CSS中有两种边框模型。分割边框模型的单元格相互之间是分隔的(默认模型)。合并边框模型的单元格之间是没有间隔的。border-collapse属性可以设置边框模型,值:collapse|separate|inherit.当border-collapse的值为collapse时,border-spacing属性可以用来设置单元格边框之间的距离,值:<length><length>?|inherit,如果提供两个长度,则要求第一个值始终是水平间隔,第二个值始终是垂直间隔。要声明一个border-spacing值,会应用于表本身,而不是单元格,不能为行、行组、列和列组设置边框。

    empty-cells属性可以设置空单元格的处理方式,值:show|hide|inherit,设置为show,会画出空单元格的边框和背景,就好像这些表单元格有内容一样,设置为hide,则不会画出该单元格的任何部分。

    如果两个或多个边框相邻,它们会互相合并。某个合并边框的border-style为hidden,它会优先于所有其他合并边框,border-style为none,它的优先级最低。如果至少有一个合并边框的border-style值不是none,而且多有合并边框的border-style值都不是hidden,则窄边不敌更宽的边框。有相同宽度,则考虑边框样式,bouble、solid、dashed、dotted、ridge、outset、groove、inset.样式也一样,则按下表顺序使用元素的颜色,cell、row、row group、column、column group、table。

    table-layout属性可以设置确定表的宽度的方法,固定宽度布局和自动宽度布局(高度都会自动计算),值:auto|fixed|inherit。两者之间的差异是速度。固定布局模型的速度之所以快是布局不依懒于表单元格的内容,其布局是根据该表以及表中列和单元格的width值决定的。自动布局比较慢的原因是,用户代理查看完表的所有内容之前无法确定表的布局。

    表的高度可以用height属性显示设置。如果为auto,则高度是表中所有行的行高再加上所有边框和单元格间隔的总和。

    text-align属性可以设置水平对齐。单元格会处理为一个块级框,其中的内容根据text-align值对齐。vertical-align属性可以设置垂直对齐。

  • 相关阅读:
    JDK框架简析--java.lang包中的基础类库、基础数据类型
    Mahout 模糊kmeans
    使用heartbeat+monit实现主备双热备份系统
    Git版本号控制:Git分支处理
    JAVA线程
    Nginx的特性与核心类别及配置文件和模块详解
    nginx设置反向代理后端jenklins,页面上的js css文件无法加载
    运维的危险命令,用了必死(1)
    xtrabackup备份MySQL
    利用ansible-playbook从测试环境获取tomcat中java项目新版本发布到生产环境
  • 原文地址:https://www.cnblogs.com/dingzibetter/p/6177857.html
Copyright © 2011-2022 走看看