web写一个看起来高级一点的表格请提供源码
以下是一个简单的HTML表格的源代码,具有一些基本的样式和设计元素,看起来比较高级。
<!DOCTYPE html>
<html>
<head>
<title>高级表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
font-family: Arial, sans-serif;
font-size: 14px;
margin-bottom: 20px;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
font-weight: bold;
color: #333;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>高级表格</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>国籍</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
<td>中国</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
<td>美国</td>
</tr>
<tr>
<td>王五</td>
<td>40</td>
<td>男</td>
<td>英国</td>
</tr>
<tr>
<td>赵六</td>
<td>35</td>
<td>女</td>
<td>澳大利亚</td>
</tr>
</tbody>
</table>
</body>
</html>
这个表格有以下特点:
- 使用了
border-collapse: collapse属性来使表格边框合并在一起,看起来更整洁。 - 使用了
width: 100%属性使表格宽度占据整个屏幕。 - 使用了
font-family: Arial, sans-serif属性来设置表格字体,看起来更专业。 - 使用了
background-color属性来设置表头和每行的背景颜色,使其易于区分。 - 使用了
nth-child(even)伪类来使每个偶数行的背景颜色不同,增加对比度。 - 使用了
font-weight: bold属性来使表头文字加粗,增加可读性。
原文地址: https://www.cveoy.top/t/topic/b7aG 著作权归作者所有。请勿转载和采集!