HTML表格

最新推荐文章于 2025-05-01 23:03:21 发布

pi5458

最新推荐文章于 2025-05-01 23:03:21 发布

阅读量115

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/miaosanpi/article/details/108035073

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>HTML表格</title>
		<style>
			table{/*为页面中所有table标签添加样式*/
				width: 700px;/*设置table宽度*/
				margin: 0 auto;/*设置table水平居中*/
				border: black 1px solid;/*添加边框*/
				border-spacing: 0px;/*设置边框之间空隙为0px*/
				border-collapse: collapse;/*去掉重合线*/				
			}
			th{/*为页面中所有th标签添加样式*/
				border: black 1px solid;/*添加边框*/
			}
			td{/*为页面中所有td标签添加样式*/
				border: black 1px solid;/*添加边框*/
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<!--th:table head的缩写-->
				<th>学号</th>
				<th>姓名</th>
				<th>号码</th>
				<th>地址</th>
			</tr>
			<tr>
				<!--th:table date的缩写-->
				<td style="text-align: center;">111</td>
				<td>keeuy</td>
				<td>1234567890</td>
				<td>郑州市</td>
			</tr>
			<tr style="text-align: center;">
				<td>222</td>
				<td>jin</td>
				<td>1234567891</td>
				<td>郑州市</td>
			</tr>
			<tr>
				<td style="height: 300px; vertical-align: bottom;">333</td>
				<td style="height: 300px; vertical-align: top;">tim</td>
				<td>1234567892</td>
				<td>郑州市</td>
			</tr>
		</table>
		<br />
		<table>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>号码</th>
				<th>地址</th>
			</tr>
			<tr>
				<td rowspan="2">111</td>
				<td>keeuy</td>
				<td>1234567890</td>
				<td>郑州市</td>
			</tr>
			<tr>
				<td>jin</td>
				<td>1234567891</td>
				<td>郑州市</td>
			</tr>
			<tr>
				<td>333</td>
				<td>tim</td>
				<td colspan="2">1234567892</td>
			</tr>
		</table>
	</body>
</html>