一个简单的HTML table样式

最新推荐文章于 2024-06-19 10:23:02 发布

爱吃肉真是太好了呀

最新推荐文章于 2024-06-19 10:23:02 发布

阅读量1.2k

点赞数 3

分类专栏： HTML 文章标签： html css 前端

本文链接：https://blog.csdn.net/zcm545186061/article/details/129782188

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>My Table Style</title>
	<style>
		table {
			font-family: Arial, sans-serif;
			border-collapse: collapse;
			width: 100%;
			border: 1px solid #ddd;
		}
		
		th, td {
			text-align: left;
			padding: 8px;
			border: 1px solid #ddd;
		}
		
		tr:nth-child(even) {
			background-color: #f2f2f2;
		}
		
		th {
			background-color: #4CAF50;
			color: white;
		}
		
		caption {
			font-weight: bold;
			font-size: 1.2em;
			padding: 10px;
			background-color: #ddd;
			border: 1px solid #ddd;
		}
	</style>
</head>
<body>
	<table>
		<caption>My Table</caption>
		<thead>
			<tr>
				<th>Column 1</th>
				<th>Column 2</th>
				<th>Column 3</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Row 1, Cell 1</td>
				<td>Row 1, Cell 2</td>
				<td>Row 1, Cell 3</td>
			</tr>
			<tr>
				<td>Row 2, Cell 1</td>
				<td>Row 2, Cell 2</td>
				<td>Row 2, Cell 3</td>
			</tr>
			<tr>
				<td>Row 3, Cell 1</td>
				<td>Row 3, Cell 2</td>
				<td>Row 3, Cell 3</td>
			</tr>
		</tbody>
	</table>
</body>
</html>