以下是一个简单的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属性来使表头文字加粗,增加可读性。
web写一个看起来高级一点的表格请提供源码

原文地址: https://www.cveoy.top/t/topic/b7aG 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录