//test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格与CSS分开示例</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入外部CSS文件 -->
</head>
<body>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>24</td>
</tr>
<!-- 更多行... -->
</tbody>
</table>
</body>
</html>
//styles.css
/* styles.css */
table {
width: 100%; /* 表格宽度为100% */
border-collapse: collapse; /* 边框合并为一个单一的边框 */
}
th, td {
border: 1px solid #ddd; /* 单元格边框 */
padding: 8px; /* 单元格内边距 */
text-align: left; /* 文本左对齐 */
}
th {
background-color: #f2f2f2; /* 表头背景色 */
}
/* 你可以根据需要添加更多样式 */
