html5表格样式代码实现实例

涛哥
Html代码

以下是一个HTML5表格的基本结构，以及一些CSS样式代码来美化它：

<!DOCTYPE html>
<html>
<head>
	<title>HTML5表格样式示例</title>
	<style>
		table {
			border-collapse: collapse;
			width: 100%;
			margin-bottom: 20px;
			background-color: #f5f5f5;
			font-size: 18px;
			font-family: Arial, sans-serif;
		}

		th, td {
			border: 1px solid #dddddd;
			text-align: left;
			padding: 8px;
		}

		th {
			background-color: #dddddd;
			font-weight: bold;
			color: #555555;
		}

		tr:nth-child(even) {
			background-color: #ffffff;
		}

		tr:hover {
			background-color: #dddddd;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>城市</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>张三</td>
				<td>25</td>
				<td>北京</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>30</td>
				<td>上海</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>28</td>
				<td>广州</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

这段代码创建了一个带有表头和数据行的基本表格，并添加了一些CSS样式来美化它，例如：

设置表格的边框样式为border-collapse: collapse;，让单元格之间的间隙消失，使表格看起来更紧凑。

设置表格的宽度为width: 100%;，使它在容器中占据全部可用宽度。

设置表格的背景颜色为background-color: #f5f5f5;，用于增强表格的可读性。

设置表头单元格（th元素）的背景颜色为background-color: #dddddd;，加粗字体并设置颜色，以区别于数据单元格。

设置数据单元格（td元素）的边框样式为border: 1px solid #dddddd;，使其与表头单元格区别开来。

设置表格的字体大小和字体家族为font-size: 18px;和font-family: Arial, sans-serif;，使表格看起来更整洁。

设置隔行背景颜色为tr:nth-child(even) { background-color: #ffffff; }，使表格更易读。

设置当鼠标悬停在表格行上时的背景颜色为tr:hover { background-color: #dddddd; }，增加交互。

html实现验证码功能

html代码如何实现拨打电话及代码详解

html基本结构代码

html如何注释代码

 
  • 验证码功能
  • 加粗
  • 背景颜色
  • 表格