用CSS 方式设置 table 样式
在现代Web开发中,使用CSS来设置table
的样式是一种常见且强大的方法,它能让你的表格数据既美观又易于阅读。下面我将通过一个示例来展示如何使用现代CSS技巧来美化表格。
效果图
HTML 结构
首先,我们定义一个基本的HTML表格结构:
<table class="styled-table"><thead><tr><th>姓名</th><th>年龄</th><th>城市</th></tr></thead><tbody><tr><td>张三</td><td>28</td><td>北京</td></tr><tr><td>李四</td><td>34</td><td>上海</td></tr><!-- 更多行 --></tbody>
</table>
CSS 样式
接下来,我们编写CSS来设置这个表格的样式。这里,我将展示一些基本但实用的样式设置,包括边框、背景色、文字对齐等。
.styled-table {border-collapse: collapse;margin: 25px 0;font-size: 0.9em;font-family: sans-serif;min-width: 400px;box-shadow: 0 0 20px rgba(0,0,0,0.15);
}.styled-table thead tr {background-color: #009879;color: #ffffff;text-align: left;
}.styled-table th,
.styled-table td {padding: 12px 15px;
}.styled-table tbody tr {border-bottom: 1px solid #dddddd;
}.styled-table tbody tr:nth-of-type(even) {background-color: #f3f3f3;
}.styled-table tbody tr:last-of-type {border-bottom: 2px solid #009879;
}.styled-table tbody tr.active-row {font-weight: bold;color: #009879;
}/* 可选:悬停效果 */
.styled-table tbody tr:hover {background-color: #f1f1f1;
}
解释
border-collapse: collapse;
:这个属性将表格的边框合并为一个单一的边框,而不是每个单元格都有边框。margin
、font-size
、font-family
:这些属性用于设置表格的外边距、字体大小和字体族。box-shadow
:为表格添加阴影效果,使其更加突出。thead
和tbody
的样式:分别为表头和表体设置不同的背景色和文本颜色,增加可读性。th
和td
的padding
:为表头和表单元格添加内边距,让内容看起来更加舒适。- 交替行背景色:使用
:nth-of-type(even)
选择器为表格的偶数行设置不同的背景色,增强视觉区分。 - 悬停效果:通过
:hover
伪类为表格行添加鼠标悬停时的背景色变化,提升用户体验。