10.CSS笔记：表格、列表属性
本系列内容由ZouStrong整理收录
整理自 《写给大家看的CSS书（第2版）》、《CSS权威指南（第3版）》、《精彩绝伦的CSS》、《精通CSS：高级Web标准解决方案（第2版）》、CSS参考手册 css.doyoe.com
表格和列表是组织数据的有效手段
一. 表格
CSS对待表元素（table）和表内部元素（caption、tr、td、th、thead、tbody、tfoot）有很大的区别
- 表元素生成块级框，可以定义所有块级框应有的属性
- 表内部元素虽然也生成块级框，可以定义宽高，边框，内边距，但是外边距定义无效（标题除外,caption是可以定义外边距的）
因此，不能通过指定外边距来定义单元格之间的间隔
- 一列中的单元格的宽度总是与最宽的单元格保持同宽
- 一行中的单元格的高度总是与最高的单元格保持同高
1. table-layout属性
- 作用：指定表格的布局算法
- 默认值：auto
- 适用于：只适用于table元素
- 继承性：有
- 动画性：无
- 取值： auto、fixed
auto——默认的自动算法，布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来，所以速度很慢
fixed——固定布局的算法，在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关（内容可能被裁切）
table { table-layout : fixed ;}2. border-collapse属性
- 作用：指定表格边框和单元格边框是合并还是独立
- 默认值：separate
- 适用于：只适用于table元素
- 继承性：有
- 动画性：无
- 取值： separate、collapse（相邻边被合并）
示例：
table { border-collapse : collapse ;}表格默认不显示边框，需指定
3. border-spacing属性
- 作用：指定表格单元格的边框之间的间距
- 默认值：0
- 适用于：只适用于table元素
- 继承性：有
- 动画性：无
- 取值： 所有长度值
示例：
table { border-spacing : 10px ;}该属性等同于HTML标签属性cellspacing
两个参数时，第一个用于横向，第二个用于纵向
只有border-collapse属性为separate时，border-spacing属性才起作用
4. caption-side属性
- 作用：指定表格标题（<caption>）的位置
- 默认值：top
- 适用于：只适用于caption元素
- 继承性：有
- 动画性：无
- 取值： top、bottom
示例：
table { caption-side : bottom ;}IE6、7不支持该属性（IE6、7下，可对caption元素使用vertical-align:bottom），并且由于该属性可以继承，因此可以应用于caption的任意父元素上，但最终只对caption有效
5. empty-cells
- 作用：指定表格单元格无内容时，是否显示该单元格的边框
- 默认值：show
- 适用于：只适用于td、th元素
- 继承性：有
- 动画性：无
- 取值： show、hide
示例：
table { empty-cells : hide ;}当border-collapse 属性为separate时，empty-cells属性才会有效
IE6、IE7默认隐藏无内容的单元格边框（要想显示，应该给该单元格加占位符 ）
小结
使用表格时，应该设置声明
table {
table-layout:fixed; /*改善呈现性能*/
empty-cells:show; /*确保兼容性*/
border-collapse:collapse; /*显示精致合理*/
}二. 列表
1. list-style-type属性
- 作用：指定列表项符号的形式
- 默认值：disc（实心圆）
- 适用于：display:list-item的元素
- 继承性：有
- 动画性：无
- 取值：none(不显示列表项)、disc（实心圆）、circle（空心圆）、square（方块）、decimal（数字）、decimal-leading-zero（以0开头的数字）、upper-alpha（大写字母）、lower-alpha（小写字母）...
示例：
li { list-style-type : none ; }2. list-style-image属性
- 作用：指定列表项符号的图片显示
- 默认值：none
- 适用于：display:list-item的元素
- 继承性：有
- 动画性：无
- 取值：none、url
示例：
li { list-style-image : url(1.jpg) ; }设置list-style-image属性会覆盖list-style-type的值，如果图像地址无效， 才会显示list-style-type的值
3. list-style-position
- 作用：指定列表项符号的位置
- 默认值：outside
- 适用于：display:list-item的元素
- 继承性：有
- 动画性：无
- 取值：outside、inside
示例：
li { list-style-position : outside ; }列表项的符号 默认是在列表项内容之外的，也是在整个列表元素(ul，ol)之外的
符号不会影响其他元素的布局，就好像是相对于列表项的内容绝对定位一样
4. 简写list-style属性
- 作用：指定列表项相关内容
- 默认值：由单独属性决定
- 适用于：display:list-item的元素
- 继承性：有
- 动画性：无
- 取值：由单独属性决定
示例：
li { list-style : url(1.jpg) circle inside ; }使用简写属性时，[ list-style-image ] 属性必须放在最后，否则所有的webkit/blink内核浏览器将会解析出错