<!DOCTYPE html>
<html>
<head>
<title>HTML 表格样式示例</title>
<style>
/* 设置表格的基本样式 */
table {
width: 100%;
border-collapse: collapse;
}
/* 设置表格边框和内边距 */
table, th, td {
border: 1px solid black;
padding: 8px;
}
/* 设置表头背景颜色和文本对齐方式 */
th {
background-color: #f2f2f2;
text-align: left;
}
/* 设置奇数行的背景颜色 */
tr:nth-child(odd) {
background-color: #dddddd;
}
/* 设置鼠标悬停时的行背景颜色 */
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h2>HTML 表格样式示例</h2>
<table>
<tr>
<th>公司</th>
<th>联系人</th>
<th>国家</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
</table>
</body>
</html>table 标签设置表格宽度为 100%，并使用 border-collapse: collapse; 来合并相邻单元格的边框。th) 和单元格 (td) 设置 1 像素的黑色边框，并添加 8 像素的内边距，使内容与边框之间有适当的空间。th) 设置背景颜色为浅灰色 (#f2f2f2)，并将文本左对齐。tr:nth-child(odd) 选择器为奇数行设置不同的背景颜色，以提高可读性。#f5f5f5)，提供交互反馈。上一篇：html的中文
下一篇：html测试
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站