之前在 HTML 基础部分,我们讲解了表格的结构和写法HTML 表格的使用,收藏这1篇就够了!。简单回顾下。
本文,我们来给它们增加一些漂亮的样式。图为增加样式前,增加样式后的效果,是不是确实漂亮多了。
ok,那我们一起来看看这些表格标签的样式属性吧。
通过 CSS 的 border 属性可以设置表格的边框样式、宽度和颜色。例如:
table {
border-collapse: collapse; /* 合并表格边框 */
border: 1px solid #ccc; /* 设置表格边框样式和颜色 */
}
可以使用 margin 属性CSS基础:margin属性4种值类型,4个写法规则详解来设置表格的外边距。例如:
table {
margin: 20px; /* 设置表格外边距 */
}
、
使用 background 属性可以设置表格或单元格的背景。例如,设置颜色。
table {
background-color: #f8f8f8; /* 设置表格背景颜色 */
}
使用 color,text-align,line-height,可以统一设置表格内文本的颜色,文字位置,行高等。例如:
table {
color: #fff; /* 设置表格文字颜色 */
text-align: center; /* 设置表格文字居中 */
line-height: 40px; /* 设置表格行高 */
}
通过 CSS 的 width,height 属性可以设置表格的宽,高。例如:
table {
width: 500px; /* 设置表格宽度 */
height: 300px; /* 设置表格高度 */
}
设置表格的高度(height)会影响表格在页面中的布局和显示效果,具体影响有以下几点。
总的来说,设置表格的高度可以根据实际布局需求来调整表格在页面中的显示效果,保证内容的完整展示并且符合页面整体布局。
下面是一个综合应用上述样式的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse; /* 设置表格边框合并 */
margin-top: 20px;
border: 10px solid #1916e3;
background: #c1c1df;
color: #fff; /* 设置表格文字颜色 */
text-align: center; /* 设置表格文字居中 */
line-height: 40px; /* 设置表格行高 */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>数学成绩</th>
<th>语文成绩</th>
<th>英语成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>85</td>
<td>78</td>
<td>92</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>92</td>
<td>87</td>
<td>88</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>78</td>
<td>80</td>
<td>85</td>
</tr>
...可以多复制几行 tr ...
</tbody>
</table>
</body>
</html>
效果如图:
很多时候呢,表头的样式是要区别于表格的其他部分的。当为表头单元格设置特殊样式时,可以使用以下 CSS 属性:
下面是代码,来看一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表格样式演示</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #007bff; /* 蓝色背景 */
color: #fff; /* 白色字体 */
font-weight: bold; /* 粗体字 */
text-align: center; /* 居中对齐 */
padding: 10px; /* 设置内边距 */
}
td {
border: 1px solid #ccc; /* 设置边框 */
padding: 10px; /* 设置内边距 */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
效果如图:
为表格的行设置样式可以通过 CSS 的伪类选择器来实现,常用的包括:
以下是一个示例的 CSS 代码,演示了如何为表格的行设置奇偶行样式和鼠标悬停样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
border: 1px solid #333;
}
th,
td {
border: 1px solid #333;
}
/* 奇偶行样式 */
tr:nth-child(even) {
background-color: #f2f2f2; /* 偶数行背景色 */
}
tr:nth-child(odd) {
background-color: #fff; /* 奇数行背景色 */
}
/* 鼠标悬停样式 */
tr:hover {
background-color: #29ec8b; /* 鼠标悬停时背景色 */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td class="highlight">张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
<tr>
<td class="highlight">张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
<tr>
<td class="highlight">张三</td>
<td>25</td>
<td>男</td>
</tr>
...(自己多复制几行 tr,不在这里写了,浪费空间。)
</tbody>
</table>
</body>
</html>
效果如图:
以下是代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
}
/* 单元格样式 */
td {
color: #333; /* 白色文字 */
border: 1px solid #ccc; /* 边框样式 */
padding: 8px; /* 内边距 */
text-align: right; /* 文字居右对齐 */
}
td.highlight {
background-color: #ec638a; /* 特殊的红色背景 */
color: #fff; /* 文字变成白色 */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td class="highlight">张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
效果如图:
那你可能会说,表格,表格行,和单元格都能设置背景,文字,行高,它们写在什么元素上最合理呢?我有以下 3 条建议,可做参考:
对于表格整体的样式,如背景色、边框等,可以直接在 table 元素上设置。
table {
background-color: #f8f8f8; /* 设置表格背景色 */
border-collapse: collapse; /* 合并表格边框 */
border: 1px solid #ddd; /* 设置表格边框样式和颜色 */
line-height: 30px; /* 设置表格行高 */
}
th {
background-color: #333; /* 设置表头背景色 */
color: #fff; /* 设置表头文字颜色 */
text-align: center; /* 设置文字居中对齐 */
}
对于表格的行样式,如奇偶行背景色、鼠标悬停效果等,可以使用 tr 元素或指定的类选择器进行样式设置。
tr:nth-child(even) {
background-color: #f2f2f2; /* 偶数行背景色 */
}
tr:nth-child(odd) {
background-color: #fff; /* 奇数行背景色 */
}
tr:hover {
background-color: #ddd; /* 鼠标悬停时背景色 */
}
对于表格的单元格样式,如背景色、文字样式和行高等,可以使用 td 元素或指定的类选择器进行样式设置。
td {
padding: 10px; /* 设置单元格内边距 */
text-align: center; /* 设置文字居中对齐 */
line-height: 30px; /* 设置行高 */
}
/* 设置特定类的单元格样式 */
.highlight-cell {
background-color: #ffc; /* 设置单元格背景色 */
font-weight: bold; /* 设置文字加粗 */
color: #f00; /* 设置文字颜色 */
}
最后,咱们来一个综合应用的案例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>学生成绩单</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 80%;
margin: 30px auto; /* 让表格居中 */
border-collapse: collapse;
border: 2px solid #ddd; /* 整体边框颜色 */
}
th,
td {
line-height: 40px; /* 行高 */
border: 1px solid #ddd; /* 每行边框 */
text-align: center;
font-size: 16px;
}
th {
background-color: #007bff; /* 表头背景色 */
color: #ffffff;
}
/* 这次奇偶行用 class 来写 */
tr.even {
background-color: #eee; /* 偶数行浅灰色 */
}
tr:hover {
background-color: #ccc; /* 鼠标悬停时的背景色:蓝色 */
}
/* 把90分以上的要特殊标识绿色 */
td.perfect {
background-color: #00ff00; /* 绿色背景 */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>数学成绩</th>
<th>语文成绩</th>
<th>英语成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>85</td>
<td>78</td>
<td class="perfect">98</td>
</tr>
<!-- 给2,4,6行数据,加上even(偶数)的class名称,做斑马条纹 -->
<tr class="even">
<td>1002</td>
<td>李四</td>
<td class="perfect">92</td>
<td>87</td>
<td>88</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>78</td>
<td>80</td>
<td>85</td>
</tr>
<tr class="even">
<td>1001</td>
<td>张三</td>
<td>85</td>
<td>78</td>
<td>92</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>89</td>
<td>87</td>
<td>88</td>
</tr>
<tr class="even">
<td>1003</td>
<td>王五</td>
<td>78</td>
<td>80</td>
<td>85</td>
</tr>
<!-- 其他行以此类推 -->
</tbody>
</table>
</body>
</html>
效果如下。