HTML - 表格样式

上一页
下一页

HTML 表格样式是为了增强制表器内容的可读性。有几种表格样式可以使表格可读，例如，将表格宽度设置为 100% 可确保表格适合各种屏幕尺寸。在本文中，我们将学习设置 HTML 表格样式的不同方法。

普通 HTML 表格

普通的 HTML 表格是指没有任何预定义样式的表格。在这里，我们将创建一个普通的 HTML 表格，并在该表格上使用样式。将对 atble 进行修改作为样式。

定义一个普通的 HTML 表格

在这里，我们创建了一个具有某些属性的普通表格，用于设置表格每个单元格的边框，并提到了将来需要选择这些 id 来设置表格样式时的 puspose。


<!DOCTYPE html>
<html>

<head>
	 <title>普通HTML表格</title>
</head>

<body>
	 <table id="table1" border="1">
			<tr>
				 <th>名字</th>
				 <th>工资</th>
			</tr>
			<tr>
				 <td>小明</td>
				 <td>5000</td>
			</tr>
			<tr>
				 <td>小白</td>
				 <td>7000</td>
			</tr>
	 </table>
	 <br />
	 <table id="table2" border="1">
			<tr>
				 <th>名字</th>
				 <th>工资</th>
			</tr>
			<tr>
				 <td>小明</td>
				 <td>5000</td>
			</tr>
			<tr>
				 <td>小白</td>
				 <td>7000</td>
			</tr>
	 </table>
</body>

</html>

HTML 表格样式

有多种样式可以设置 HTML 表的样式，这里我们列出了执行此操作的流行样式。我们可以结合下面提到的样式，根据要求进行所需的样式。

HTML 表格样式示例

在这里，我们已经涵盖了上述所有样式以及方法和完整的考试代码。您也可以操作提供的代码，以在现有样式上尝试自己的样式。

HTML 表格 - 边框折叠

我们可以通过操作 CSS 中的“border-collapse”属性来调整表格边框之间的空间。通过调整边框折叠的值，可以控制表中边框之间的间距或间隙。边界折叠可能有两个值。defulat 值“separate”将在表格单元格之间带来额外的间隙，值“collapse”可防止表格单元格之间出现额外的间隙。


<!DOCTYPE html>
<html>

<head>
	 <style>
			#table1 {
				 border-collapse: separate;
			}
			#table2 {
				 border-collapse: collapse;
			}
	 </style>
</head>

<body>
	 <table id="table1" border="1">
			<tr>
				 <th>名字</th>
				 <th>工资</th>
			</tr>
			<tr>
				 <td>小明</td>
				 <td>5000</td>
			</tr>
			<tr>
				 <td>小白</td>
				 <td>7000</td>
			</tr>
	 </table>
	 <br />
	 <table id="table2" border="1">
			<tr>
				 <th>名字</th>
				 <th>工资</th>
			</tr>
			<tr>
				 <td>小明</td>
				 <td>5000</td>
			</tr>
			<tr>
				 <td>小白</td>
				 <td>7000</td>
			</tr>
	 </table>
</body>

</html>

HTML 表格 - 水平斑马条纹

Zebra Stripes - 水平技术是 Microsoft Word 中使用的一种常用表格样式技术，这涉及使用交替颜色设置表格行的样式，以增强表格内容的视觉吸引力和可读性。在以下代码中，：nth-child（even） 选择器每隔一行就以为目标，并应用背景色以创建条纹效果。


<!DOCTYPE html>
<html>

<head>
	 <style>
			tr:nth-child(even) {
				 background-color: #ffebcd;
			}
	 </style>
</head>

<body>
	 <table border="1">
			<tr>
				 <th>名字</th>
				 <th>工资</th>
			</tr>
			<tr>
				 <td>小明</td>
				 <td>5000</td>
			</tr>
			<tr>
				 <td>小白</td>
				 <td>7000</td>
			</tr>
			<tr>
				 <td>小曾</td>
				 <td>700</td>
			</tr>
			<tr>
				 <td>小宁</td>
				 <td>17000</td>
			</tr>
			<tr>
				 <td>小江</td>
				 <td>1700</td>
			</tr>
			<tr>
				 <td>小胡</td>
				 <td>7100</td>
			</tr>
			<tr>
				 <td>小张</td>
				 <td>9000</td>
			</tr> 			 
	 </table>
</body>

</html>

HTML 表格 - 垂直斑马条纹

Zebra Stripes - Vertical 技术通过对每隔一列应用交替样式来增强表格的可读性。这是使用表数据 （td） 和表头 （th） 元素的 ：nth-child（even） 选择器实现的。


<!DOCTYPE html>
<html>

<head>
	 <style>
			td:nth-child(even),
			th:nth-child(even) {
				 background-color: #D6EEEE;
			}
	 </style>
</head>

<body>
	 <table border="1">
			<tr>
				 <th>名字</th>
				 <th>工资</th>
				 <th>职务</th>
				 <th>经验</th>
			</tr>
			<tr>
				 <td>小明</td>
				 <td>5000</td>
				 <td>营销</td>
				 <td>1 年</td>
			</tr>
			<tr>
				 <td>小张</td>
				 <td>7000</td>
				 <td>促销</td>
				 <td>5 年</td>
			</tr>
	 </table>
</body>

</html>

水平和垂直斑马条纹

通过在表格中组合水平和垂直斑马条纹图案，可以使表格内容具有良好的可读性。这涉及对行 （：nth-child（even）） 和列 （td：nth-child（even）、th：nth-child（even）） 应用交替样式。为了增强这种效果，您可以考虑使用 rgba（） 函数调整颜色透明度。


<!DOCTYPE html>
<html>

<head>
	 <style>
			tr:nth-child(even) {
				 background-color: rgba(150, 212, 212, 0.4);
			}
			th:nth-child(even),
			td:nth-child(even) {
				 background-color: rgba(212, 150, 192, 0.4);
			}
	 </style>
</head>

<body>
	 <table border="1">
			<tr>
				 <th>名字</th>
				 <th>工资</th>
				 <th>职务</th>
				 <th>经验</th>
			</tr>
			<tr>
				 <td>小明</td>
				 <td>5000</td>
				 <td>营销</td>
				 <td>1 年</td>
			</tr>
			<tr>
				 <td>小张</td>
				 <td>7000</td>
				 <td>促销</td>
				 <td>5 年</td>
			</tr>
			<tr>
				 <td>小李</td>
				 <td>5000</td>
				 <td>营销</td>
				 <td>1 年</td>
			</tr>
	 </table>
</body>

</html>

HTML 表格 - 文本对齐方式

可以使用 text-align 和 vertical-align 属性水平和垂直对齐表格单元格中的文本。


<!DOCTYPE html>
<html>

<head>

	 <style>
			td,
			th {
				 text-align: right;
				 vertical-align: middle;
			}
	 </style>
</head>

<body>
	 <table border="1">
			<tr>
				 <th>名字</th>
				 <th>工资</th>
			</tr>
			<tr>
				 <td>小明</td>
				 <td>5000</td>
			</tr>
			<tr>
				 <td>小张</td>
				 <td>7000</td>
			</tr>
	 </table>
</body>

</html>

HTML 表格 - 水平分隔符

在表格的行之间使用水平分隔线将每行与其他行分开，从而提高表格的整体可读性。您可以使用 CSS 的 border-bottom 属性在表格下设计边框。


<!DOCTYPE html>
<html>

<head>
	 <style>
			table {
				 border-collapse: collapse;
			}
			tr {
				 border-bottom: 5px solid #ddd;
			}
			th,
			td {
				 padding: 10px;
				 /* 添加内容以提高可视性 */
			}
	 </style>
</head>

<body>
	 <table border="1">
			<tr>
				 <th>名字</th>
				 <th>工资</th>
			</tr>
			<tr>
				 <td>小明</td>
				 <td>5000</td>
			</tr>
			<tr>
				 <td>小张</td>
				 <td>7000</td>
			</tr>
	 </table>
</body>

</html>

可悬停的表格行

将鼠标指针悬停在表格上时，制作表格行以更改其颜色可改善用户体验和可读性。下面的 HTML 程序创建一个带有边框的表格。CSS 样式使行在悬停时将背景颜色更改为浅蓝色。


<!DOCTYPE html>
<html>

<head>
	 <style>
			tr:hover {
				 background-color: #D6EEEE;
			}
	 </style>
</head>

<body>
	 <table border="1">
			<tr>
				 <th>名字</th>
				 <th>工资</th>

			</tr>
			<tr>
				 <td>小明</td>
				 <td>5000</td>
			</tr>
			<tr>
				 <td>小张</td>
				 <td>7000</td>
			</tr>
	 </table>
</body>

</html>

结论

还有很多其他样式可以应用于 HTML 表格，上面的样式是十年来最常见的样式。继续练习使用符合您要求的 CSS 创建自己的表格样式。

打印本页
上一页
下一页