CSS表格与列表
一.表格样式
这里只介绍表格的一些独有的属性
1.border-collapse
设置表格的单元格之间的边框是否合并
可选的参数
separte 分开的
collapse 合并的
2.border-spacing
设置单元格边框之间的距离 这个选项必须在 border-collapse:separate时才有用
3.caption-side
设置表格的标题的位置
可选的参数
bottom top(默认)
4.empty-cells
隐藏内容为空的单元格
5.table-layout
设置内容过长后,是否拉伸单元格的长度
auto 拉伸
fixed 不拉伸
6.通过CSS设置表格的边框
表格的边框分为外边框和单元格边框
分别通过两者即可设置表格的所有边框
二.列表样式
1.list-style-type
设置li前面的图形的形状
可选的参数 none(用的比较多)
disc(实心圆) circle(空心圈) square(实心方块) decimal(数字) lower-roman(小写罗马数字) upper-roman(大写罗马数字)
lower-alpha(小写英文字母) upper-alpha(大写英文字母)
2.list-style-position
设置标记的位置
可选的参数
outside 标记位于内容框外面
inside 标记位于内容框里面
3.list-style-image
设置标记的图片
4.list-style
简写形式
list-style:[type][position][image]
三.其他
垂直对齐
表格中单元格的垂直对齐直接使用
vertical-align
表格中vertical-align
sub与supper
上下标
对于非表格单元格的元素
可以使用vertical-align设置为负值来慢慢调整位置
一.表格样式
这里只介绍表格的一些独有的属性
1.border-collapse
设置表格的单元格之间的边框是否合并
可选的参数
separte 分开的
collapse 合并的
2.border-spacing
设置单元格边框之间的距离 这个选项必须在 border-collapse:separate时才有用
3.caption-side
设置表格的标题的位置
可选的参数
bottom top(默认)
4.empty-cells
隐藏内容为空的单元格
5.table-layout
设置内容过长后,是否拉伸单元格的长度
auto 拉伸
fixed 不拉伸
6.通过CSS设置表格的边框
表格的边框分为外边框和单元格边框
分别通过两者即可设置表格的所有边框
二.列表样式
1.list-style-type
设置li前面的图形的形状
可选的参数 none(用的比较多)
disc(实心圆) circle(空心圈) square(实心方块) decimal(数字) lower-roman(小写罗马数字) upper-roman(大写罗马数字)
lower-alpha(小写英文字母) upper-alpha(大写英文字母)
2.list-style-position
设置标记的位置
可选的参数
outside 标记位于内容框外面
inside 标记位于内容框里面
3.list-style-image
设置标记的图片
4.list-style
简写形式
list-style:[type][position][image]
三.其他
垂直对齐
表格中单元格的垂直对齐直接使用
vertical-align
表格中vertical-align
sub与supper
上下标
对于非表格单元格的元素
可以使用vertical-align设置为负值来慢慢调整位置