首页 > 代码库 > 第18章 CSS表格与列表
第18章 CSS表格与列表
第 18章 CSS表格与列表
学习要点：
1.表格样式
2.列表样式
3.其他功能
本章主要探讨 HTML5中 CSS表格和列表，通过表格和列表的样式设置，让表格和列表显示更加多元化。
一．表格样式
表格有五种独有样式，样式表如下：
属性 值 说明 CSS版本
border-collapse 边框样式 相邻单元格的边框样式 2
border-spacing 长度值 相邻单元格边框的间距 2
caption-side 位置名称 表格标题的位置 2
empty-cells 显示值 空单元格是否显示边框 2
table-layout 布局样式 指定表格的布局样式 2
1.border-collapse
值 说明 CSS版本
separate 默认值，单元格边框独立 2
collapse 单元格相邻边框被合并 2
table {
border-collapse: collapse;
}
解释：单元格相邻的边框被合并。
2.border-spacing
值 说明 CSS版本
长度值 表示间距，使用CSS长度值 2
table {
border-spacing:10px;
}
解释：border-collapse: separate;的状态下才有效。因为要设置间距，不能合并。
3.caption-side
值 说明 CSS版本
top 默认值，标题在上方 2
bottom 标题在下方 2
table {
caption-side: bottom;
}
解释：设置表格标题。
4.empty-cells
值 说明 CSS版本
show 默认值，显示边框 2
hide 不显示边框 2
table {
empty-cells: hide;
}
解释：单元格内容为空是隐藏边框。
5.table-layout
值 说明 CSS版本
auto 默认值，内容过长时，拉伸整个单元格 2
fixed 内容过长时，不拉伸整个单元格 2
fixed
table {
table-layout: fixed;
}
解释：内容过长后，不会拉伸整个单元格。
二．列表样式
列表有四种独有样式，样式表如下：
属性 值 说明 CSS版本
list-style-type 类型值 列表中的标记类型 1/2
list-style-image none或 url 图像作为列表标记 1
list-style-position 位置值 排列的相对位置 1
list-style 简写属性 列表的简写形式 1
1.list-style-type
值 说明 CSS版本
none 没有标记 1
disc 实心圆 1
circle 空心圆 1
square 实心方块 1
decimal 阿拉伯数字 1
lower-roman 小写罗马数字 1
upper-roman 大写罗马数字 1
lower-alpha 小写英文字母 1
upper-roman 大写英文字母 1
ul {
list-style-type: square;
}
解释：列表前缀的标记类型，这里是 CSS1版本的。CSS2版本还包含比如日文、亚美
尼亚数字、希腊文等前缀。有兴趣的可以参考 CSS手册。
2.list-type-position
值 说明 CSS版本
outside 默认值，标记位于内容框外部 1
inside 标记位于内容框内部 1
ul {
width: 120px;
list-style-position: inside;
}
解释：标记位于内容框的内部。
3.list-type-image
值 说明 CSS版本
none 不使用图像 1
url 通过 url使用图像 1
ul {
list-style-image: url(bullet.png);
}
解释：使用图片作为前缀的标记。
4.list-style
ul {
list-style: lower-alpha inside url(bullet.png);
}
解释：简写形式。
三．其他功能
在<table>中<td>单元格，我们可以使用 text-align属性水平对齐，但是垂直对齐就
无法操作了。CSS提供了 vertical-align属性用于垂直对齐。
值 说明 CSS版本
baseline 内容对象与基线对齐
top 内容对象与顶端对齐
middle 内容对象与中部对齐
bottom 内容对象与底部对齐
table tr td {
vertical-align: bottom;
}
解释：将单元格内的内容对象实现垂直对齐。
值 说明 CSS版本
sub 垂直对齐文本的下标 1
super 垂直对齐文本的上标 1
b {
}
vertical-align: super;
解释：文本上下标设置。
值 说明 CSS版本
长度值 设置上下的偏移量，可以是负值 1
百分比 同上 1
div span {
vertical-align: -200px;
}
解释：负值往下，正值往上。如果默认基线在上面，用负数。如果默认基线在下面，用
正值。
例子：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS表格与列表</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/style.css">
</head>
<body>
<table border="1">
<caption>人员档案</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td class="sex">男</td>
<td></td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>28</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>32</td>
</tr>
</table>
<ul>
<li>张三，是一个非常好的青年</li>
<li>李四</li>
<li>王五<b>2</b></li>
<li>马六</li>
</ul>
<div><span>我是HTML5</span></div>
<em>内容简介：</em><textarea rows="10"></textarea>
</body>
</html>
@charset "utf-8";
table {
width: 400px;
height: 300px;
text-align: center;
/*border-collapse: separate;*/
/*border-collapse: collapse;*/
/*border-spacing: 10px;*/
/*caption-side: bottom;*/
/*empty-cells: hide;*/
/*table-layout: fixed;*/
border: 1px solid red;
}
table tr th, table tr td {
border: 1px solid red;
}
ul {
width: 120px;
/* list-style-type: square;
list-style-position: inside;
list-style-image: url(bullet.png);*/
list-style: square inside url(bullet.png);
}
.sex {
/*vertical-align: bottom;*/
/*vertical-align: baseline;*/
/*vertical-align: middle;*/
}
b {
/*vertical-align: sub;*/
vertical-align: super;
}
div {
width: 300px;
height: 300px;
background: silver;
text-align: center;
}
div span {
background: green;
/*vertical-align: -50px;*/
/*vertical-align: -200%;*/
}
em {
vertical-align: 80px;
}
第18章 CSS表格与列表