CSS（七）——CSS 列表和CSS Table（表格）

CSS 列表

列表

作为列表项标记的图像

列表 - 简写属性

移除默认设置

所有的CSS列表属性

CSS 表格

表格边框

折叠边框（border-collapse）

表格宽度和高度

表格文字对齐

表格填充

表格颜色

CSS 列表

CSS 列表属性作用如下：

设置不同的列表项标记为有序列表

设置不同的列表项标记为无序列表

设置列表项标记为图像

列表

在 HTML中，有两种类型的列表：

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）

有序列表 ol - 列表项的标记有数字或字母

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>
ul.a{list-style-type: circle;
}ul.a1{list-style-type: square;
}ol.b{list-style-type: upper-roman;
}ol.b1{list-style-type: lower-alpha;
}</style>
</head><body><h1>无序列表</h1><ul class="a"><li>第一项</li><li>第二项</li><li>第三项</li></ul><ul class="a1"><li>第一项</li><li>第二项</li><li>第三项</li></ul><h1>有序列表</h1><ol class="b"><li>第一项</li><li>第二项</li><li>第三项</li></ol><ol class="b1"><li>第一项</li><li>第二项</li><li>第三项</li></ol></body></html>

运行结果：

作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性

比如：

ul
{list-style-image: url('sqpurple.gif');
}

这样就会在列表的前面显示图像，把图像作为前面的小圆点，比如这样：

列表 - 简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。

为列表使用简写属性，列表样式属性设置如下：

ul
{list-style: square url("sqpurple.gif");
}

可以按顺序设置如下属性：

list-style-type

list-style-position

list-style-image 如果上述值丢失一个，其余仍在指定的顺序，就没关系。

移除默认设置

list-style-type:none 属性可以用于移除小标记。默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除

ul {list-style-type: none;margin: 0;padding: 0;
}

所有的CSS列表属性

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

CSS 表格

使用 CSS 可以使 HTML 表格更美观

表格边框

指定CSS表格边框，使用border属性。

比如：border: 1px solid black;

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>
table,th,td{border: 1px solid black;text-align: center;
}</style>
</head><body><table><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>

运行结果：

在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

为了显示一个表的单个边框，使用 border-collapse属性。

折叠边框（border-collapse）

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

border-collapse:collapse;

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>table {border-collapse: collapse;}table,th,td {border: 1px solid black;text-align: center;}</style>
</head><body><table><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>

运行结果：

表格宽度和高度

Width和height属性定义表格的宽度和高度。

示例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>table {width:100%;}table,th,td {border: 1px solid black;text-align: center;}th{height: 50px;}</style>
</head><body><table><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>

运行结果：

表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左 text-align:left;

，右 text-align:right;

，或中心 text-align:center;

垂直对齐属性设置垂直对齐，比如顶部 vertical-align:top;

，底部 vertical-align:bottom;

或中间 vertical-align:medium;

表格填充

如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性 padding: XXpx;

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>table {width: 100%;}table,th,td {border: 1px solid black;text-align: center;}th {height: 50px;}td {padding: 20px;}</style>
</head><body><table><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>

运行结果：

表格颜色

可以指定边框的颜色，和th元素的文本和背景颜色

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>table {width: 100%;}table,th,td {border: 1px solid green;text-align: center;}th {background-color: green;color: red}</style>
</head><body><table><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>

运行结果：

如果想给表格设置一个标题：

需要： <caption>name</caption>

使用示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>table {width: 100%;}table,th,td {border: 1px solid green;text-align: center;}th {background-color: green;color: red}</style>
</head><body><table><caption>Table1</caption><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>

运行结果：

还可以修改标题所在的位置：

caption-side:;属性

比如caption-side:bottom; 标题在下方

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>table {width: 100%;}table,th,td {border: 1px solid green;text-align: center;}th {background-color: green;color: red}caption {caption-side: bottom;}</style>
</head><body><table><caption>Table1</caption><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>

运行结果：