24.CSS表格与列表
第十八掌 CSS表格与列表
一、表格样式
属性 值 说明 CSS版本
border-collapse 边框样式 相邻单元格的边框样式 2
border-spacing 长度值 相邻单元格边框间距 2
caption-side 位置名称 表格标题位置 2
empty-cells 显示值 空单元格是否显示边框 2
table-layout 布局样式 指定表格的布局样式 2
1、border-collapse ：
值 说明 CSS版本
（1）separate ： 默认值，单元格边框独立 2 //单元格边框是空心的
（2）collapse ： 单元格相邻边框被合并 2 //单元格边框是实心的，一条黑线。
2、border-spacing ：
（1）长度值 ： 表示间距，其他使用CSS长度值 2 //单元格边框线空心的间距
3、caption-side ：
（1）top ： 默认值，标题在上方 2
（2）bottom ： 标题在下方 2
4、empty-cells ：
（1）show :默认值，显示边框 2
（2）hide :不显示边框 2 //如果单元格内没有内容，则不显示边框。
5、table-layout ：
（1）auto ： 默认值，内容过长时，拉伸整个单元格 2
（2）fixed ： 内容过长时，不拉伸整个单元格 2
二、列表样式
列表有四种独有样式
1、list-style-type:
（1）、none : 没有标记 1
（2）、disc : 实心圆 1
（3）、circle : 空心圆 1
（4）、square : 实心方块 1
（5）、decimal : 阿拉伯数字 1
（6）、lower-roman : 小写罗马数字 1
（7）、upper-roman : 大写罗马数字 1
（8）、lower-alpha : 小写英文字母 1
（9）、upper-roman : 大写英文字母 1
例、·张三
·李四 //变化的是前方到实心圆
·王五
·马六
2、lise-type-position
（1）outside 默认值，标记位于内容框外部 1
（2）inside 标记位于内容框内部 1
例、（1）：·张三，是一个 （2）：·张三，是一个
好青年 好青年
·李四 ·李四
·王五 ·王五
3、list-type-image
（1）none 不使用图像 1
（2）url 通过url使用图像 1
4、list-style （简写形式）
ul{
list-style： lower-alpha inside url（bullet.png）;
}
三、其他功能
在<table>中<td>单元格，我们可以使用text-align属性水平对齐，但是垂直对齐就无法操作了。CSS为我们提供了vertical-align属性用于垂直对齐。
值 说明 CSS版本
baseline 内容对象与基线对齐 1
top 内容对象与顶端对齐 1
middle 内容对象与中部对齐 1
bottom 内容对象与底部对齐 1
//内容在表格中实现移动 例如内容紧贴上边框。
sub 垂直对齐文本下标 1
super 垂直对齐文本上标 1
//脚标
长度值 设置上下值的偏移量 1
百分比 同上 1
