[CSS]-7-表格与列表
引言
这篇文章介绍表格与列表的CSS样式设置。
文章目录
- 0×1.表格css样式
- a.表格宽高与文字居中
- b.表格边框间距
- c.表格边框样式
- d.表格标题位置
- e.隐藏无数据单元格
- f.表格垂直拉升
- g.表格内容垂直对齐方式
- 0×2.列表css样式
- a.列表前标样式
- b.前标相对文本位置
- c.使用图像替换前标
- d.三种属性的简写方式
0×1.表格css样式
a.表格宽高与文字居中
下面新建一个三行三列的表格，使用css来控制它的宽度高度与文字对其方式：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表格css配置实例</title>
<style type="text/css">
<!--配置表格总宽高，文字未居中显示-->
#t1{
width: 200px;
height: 120px;
}
<!--设置每个单元格中的文字居中显示-->
#t2{
width: 200px;
height: 120px;
text-align: center;
}
</style>
</head>
<body>
<table id="t1" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>弓长</td>
<td>16</td>
<td>男</td>
</tr>
<tr>
<td>木子</td>
<td>15</td>
<td>女</td>
</tr>
</tbody>
</table>
<br>
<table id="t2" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>弓长</td>
<td>16</td>
<td>男</td>
</tr>
<tr>
<td>木子</td>
<td>12</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
显示效果：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 弓长 | 16 | 男 |
| 木子 | 15 | 女 |
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 弓长 | 16 | 男 |
| 木子 | 12 | 女 |
b.表格边框间距
在上面的实例中，如果不在table中配置border="1"，默认表格是没有边框的，css中允许使用border-spacing属性来调整边框的间距（厚度），请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表格css配置实例</title>
<!--配置表格边框间距为15px-->
<style type="text/css">
#t1{
width: 250px;
height: 120px;
text-align: center;
border-spacing: 15px;
}
</style>
</head>
<body>
<table id="t1" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>弓长</td>
<td>16</td>
<td>男</td>
</tr>
<tr>
<td>木子</td>
<td>15</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
显示效果：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 弓长 | 16 | 男 |
| 木子 | 15 | 女 |
c.表格边框样式
在现实环境中，大多数的表格边框都是实线，css允许使用border-collapse属性来将border的边框调整成实线显示，除此之外，配合border属性还能够调整成边框允许的所有样式（实线，虚线，点线等），请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表格css配置实例</title>
<style type="text/css">
<!--实线边框表格-->
#t1{
width: 200px;
height: 100px;
text-align: center;
border-collapse: collapse;
}
#t2{
width: 250px;
height: 150px;
text-align: center;
border-spacing: 10px;
}
<!--使用nth-child选择器，分别选择表格th中的三个子标签，设置成不同的边框样式-->
#t2 th:nth-child(1) {
border: 3px dotted green;
}
#t2 th:nth-child(2){
border:3px double yellow;
}
#t2 th:nth-child(3){
border:3px dashed red;
}
<!--将所有td设置成脊线边框-->
#t2 td{
border:3px ridge pink;
}
</style>
</head>
<body>
<table id="t1" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>弓长</td>
<td>16</td>
<td>男</td>
</tr>
<tr>
<td>木子</td>
<td>15</td>
<td>女</td>
</tr>
</tbody>
</table>
<br>
<table id="t2" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>弓长</td>
<td>16</td>
<td>男</td>
</tr>
<tr>
<td>木子</td>
<td>15</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
显示效果：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 弓长 | 16 | 男 |
| 木子 | 15 | 女 |
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 弓长 | 16 | 男 |
| 木子 | 15 | 女 |
d.表格标题位置
默认情况下，如果设置了表格标题，它将出现在表格顶部，css允许使用caption-side属性调整表格标题的位置，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表格css配置实例</title>
<style type="text/css">
#t1{
width: 200px;
height: 100px;
text-align: center;
border-collapse: collapse;
}
<!--"caption-side: bottom;"属性让表格标题显示在表格下方-->
#t2{
width: 200px;
height: 100px;
text-align: center;
border-collapse: collapse;
caption-side: bottom;
}
</style>
</head>
<body>
<table id="t1" border="1">
<caption>人员名单</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>弓长</td>
<td>16</td>
<td>男</td>
</tr>
<tr>
<td>木子</td>
<td>15</td>
<td>女</td>
</tr>
</tbody>
</table>
<br>
<table id="t2" border="1">
<caption>人员名单</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>弓长</td>
<td>16</td>
<td>男</td>
</tr>
<tr>
<td>木子</td>
<td>15</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
显示效果：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 弓长 | 16 | 男 |
| 木子 | 15 | 女 |
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 弓长 | 16 | 男 |
| 木子 | 15 | 女 |
e.隐藏无数据单元格
使用empty-cells属性，能够将没有数据的单元格隐藏，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表格css配置实例</title>
<style type="text/css">
<!--将没有数据的单元格隐藏，在实线边框的表格中没有区别，但如果给边框设置了间距（border-spacing），就可以看出区别，没有使用empty-cells属性的表格会显示一个内边框，而使用了这一属性的表格会隐藏掉表格的内边框-->
#t1{
width: 200px;
height: 150px;
text-align: center;
border-spacing: 10px;
empty-cells: hide;
}
</style>
</head>
<body>
<table id="t1" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>弓长</td>
<td>16</td>
<td>男</td>
</tr>
<tr>
<td>木子</td>
<td></td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
显示效果：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 弓长 | 16 | 男 |
| 木子 | 女 |
f.表格垂直拉升
默认情况下，当我们设置了表格的总宽高，每个单元格会自动平均分配总宽高，但如果我们在单元格中的内容超出了这个平均宽高，这个单元格将会被水平拉升来容纳这些超出的数据，从而将后面的单元格的宽度挤压，直到挤压成只能容纳一个字符为止，再垂直扩充高度，这是默认采取的方式，如果我们希望table中的单元格不被水平拉升，永远保持平均宽度，可以使用css提供的table-layout属性，让表格垂直拉升，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表格css配置实例</title>
<style type="text/css">
#t1{
width: 200px;
height: 100px;
text-align: center;
border-collapse: collapse;
}
<!--配置表格垂直拉升，每个单元格宽度保持不变-->
#t2{
width: 200px;
height: 100px;
text-align: center;
border-collapse: collapse;
table-layout: fixed;
}
</style>
</head>
<body>
<table id="t1" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>弓长是一个上进的好青年</td>
<td>16</td>
<td>男</td>
</tr>
<tr>
<td>木子</td>
<td>12</td>
<td>女</td>
</tr>
</tbody>
</table>
<br>
<table id="t2" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>弓长是一个上进的好青年</td>
<td>16</td>
<td>男</td>
</tr>
<tr>
<td>木子</td>
<td>12</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
显示效果：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 弓长是一个上进的好青年 | 16 | 男 |
| 木子 | 12 | 女 |
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 弓长是一个上进的好青年 | 16 | 男 |
| 木子 | 12 | 女 |
g.表格内容垂直对齐方式
默认情况下，表格中的内容是垂直居中显示的（但水平不居中），可以使用vertical-align属性来调整内容垂直显示位置，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表格css配置实例</title>
<style type="text/css">
#t1{
width: 200px;
height: 150px;
text-align: center;
border-collapse: collapse;
}
<!--设置tbody中表格第一行文字在底部显示-->
#t1>tbody tr:nth-child(1){
vertical-align: bottom;
}
<!--设置tbody中表格第二行文字在顶部显示-->
#t1>tbody tr:nth-child(2){
vertical-align: top;
}
</style>
</head>
<body>
<table id="t1" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>弓长</td>
<td>16</td>
<td>男</td>
</tr>
<tr>
<td>木子</td>
<td>12</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
显示效果：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 弓长 | 16 | 男 |
| 木子 | 12 | 女 |
0×2.列表css样式
css使用list-style属性控制列表的显示样式，这个属性有三个比较常用的子属性，分别是：
list-style-type 类型值，列表中的标记类型；
list-style-image 使用图片作为列表标记；
list-style-position 位置值，排列的相对位置；
list-style-type属性有如下类型值：
none 没有标记，用于取消前置的标记（常用）；
disc 实心圆；
circle 空心圆；
square 实心方块；
decimal 阿拉伯数字；
lower-roman 小写罗马数字；
upper-roman 大写罗马数字；
lower-alpha 小写英文字母；
upper-roman 大写英文字母；
a.列表前标样式
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>列表css配置实例</title>
<!--将列表前标配置成空心圆-->
<style type="text/css">
ul{
list-style-type: circle;
}
</style>
</head>
<body>
<ul>
<li>苹果</li>
<li>菠萝</li>
<li>榴莲</li>
</ul>
</body>
</html>
显示效果：
- 苹果
- 菠萝
- 榴莲
读者可以将本文提供的那些类型值代入，看看都是什么样的显示效果。
b.前标相对文本位置
ul是块状元素，可以设置宽度，默认情况下，如果设置了宽度并且其中的文字超出了宽度，文字会自动换行，换行后的文字和第一行文字对齐，使用list-style-position属性，我们可以让换行后的文字和前标对齐：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>列表css配置实例</title>
<style type="text/css">
<!--默认的list-style-position属性值outside-->
#u1{
width: 100px;
list-style-type: square;
}
<!--属性"list-style-position: inside;"让换行后的文字与前标对齐，配置了这个属性后，列表会缩进显示，列表前标部分对齐了第一个列表的文字部分，就好像前标也是文字的一部分-->
#u2{
width: 100px;
list-style-type: disc;
list-style-position: inside;
}
</style>
</head>
<body>
<ul id="u1">
<li>苹果是非常有营养的水果</li>
<li>菠萝</li>
<li>榴莲</li>
</ul>
<br>
<ul id="u2">
<li>苹果是非常有营养的水果</li>
<li>菠萝</li>
<li>榴莲</li>
</ul>
</body>
</html>
显示效果：
- 苹果是非常有营养的水果
- 菠萝
- 榴莲
- 苹果是非常有营养的水果
- 菠萝
- 榴莲
c.使用图像替换前标
css允许使用一张图片来代替列表的前标显示，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>列表css配置实例</title>
<!--url中可以是相对或绝对地址，本例使用了本站logo中的一个24px的小图标-->
<style type="text/css">
#u1{
list-style-image: url("../logo/web.png");
}
</style>
</head>
<body>
<ul id="u1">
<li>苹果</li>
<li>菠萝</li>
<li>榴莲</li>
</ul>
</body>
</html>
显示效果：
- 苹果
- 菠萝
- 榴莲
d.三种属性的简写方式
上面介绍的三种属性可以一次性配置在list-style属性中，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>列表css配置实例</title>
<style type="text/css">
<!--语法："list-sytle:list-style-type list-style-position list-style-image;"-->
#u1{
list-style:none inside url("../logo/web.png");
}
</style>
</head>
<body>
<ul id="u1">
<li>苹果</li>
<li>菠萝</li>
<li>榴莲</li>
</ul>
</body>
</html>