css整理－06 表和列表

表格式化

表布局

• table, display:table
  
• caption, display: table-caption
  
• thead, display: table-header-group
  
• tbody, display: table-row-group
  
• tr, display: table-row
  
• td,td, display:table-cell
  
• tfoot, display:table-footer-group
  
• col, display:table-column

以行为主

• css将其表模型定义为以行为主，即假设创作人员创建的标记语言会显示声明行；如果没有会自动添加

列

• 列和列组只能接受4种样式
  
• border:只有当border-collapse属性值为collapse时才能为列和列组设置边框
  
• background:只有当单元格及其行有透明背景时，列和列组的背景才可见
  
• width:定义了列和列组的最小宽度
  
• visibility: 如果一个列或列组的visibility为collapse,则该列或列组中所有单元格都不显示

表层

表标题

• 表标题：caption-side,top,bottom
  
• 表单元格边框: border-collapse,separate,collapse;应用于dispaly为table,inline-table的元素
  
• 边框间隔:border-spacing： <length><length>,应用于dispaly为table,inline-table且border-collapse设置为separate的元素
  
• 处理空单元格:empty-cell:show,hide,应用于dispaly为table-cell 的元素，相当于对特定元素应用visibility:hidden;也可以对特定单元格应用display:none

表大小

宽度

• 默认单元格宽度按内容宽度比例分配
  
• table-layout设置fixed(应用于dispaly为table,inline-table的元素),单元格宽度会平均分配

对齐

• 水平:text-align
  
• 垂直:vertical-align

列表

标志类型:list-style-type

• 可以应用到ul,li
  
• disc, circle, square, decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, lower-roman

列表项图像

• list-style-image: url()
  
• 应用于display为list-item的元素(li)

简写

• list-style,|list-style-type|list-style-image|list-style-position|

生成内容

插入生成内容

• :before,:after
  
• 插入图片:content: url()
  
• 可以将其设置为块级元素
  
• 生成引号:content: open-quote