2023-03-30 17:08:36 HTML表格可以使用CSS样式来设置表格的样式和布局。以下是一些常用的CSS样式示例。
HTML表格可以使用CSS样式来设置表格的样式和布局。以下是一些常用的CSS样式示例：
1、表格边框样式和间距：
table {
border-collapse: collapse; /* 合并边框 */
border-spacing: 0; /* 边框间距为0 */
border: 1px solid #ccc; /* 表格边框为1像素灰色实线 */
}
2、表头样式：
th {
background-color: #eee; /* 背景颜色为浅灰色 */
font-weight: bold; /* 字体加粗 */
text-align: center; /* 居中对齐 */
padding: 10px; /* 内边距为10像素 */
border: 1px solid #ccc; /* 边框为1像素灰色实线 */
}
3、表格数据样式：
td {
text-align: center; /* 居中对齐 */
padding: 10px; /* 内边距为10像素 */
border: 1px solid #ccc; /* 边框为1像素灰色实线 */
}
将上述CSS样式添加到<style>标签或外部CSS文件中即可应用到表格中。
以下是一个完整的HTML表格和CSS样式示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ccc;
}th {
background-color: #eee;
font-weight: bold;
text-align: center;
padding: 10px;
border: 1px solid #ccc;
}td {
text-align: center;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
上面的代码将会生成一个带有表头和表格数据的表格，并应用了上述CSS样式。