//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; /* 表头背景色 */
} /* 你可以根据需要添加更多样式 */
