HTML+CSS实现表格

最新推荐文章于 2024-08-12 20:02:47 发布

Ricesgui

最新推荐文章于 2024-08-12 20:02:47 发布

阅读量1.2w

点赞数 4

分类专栏：前端文章标签： CSS3 Table 边框

本文链接：https://blog.csdn.net/weixin_41299929/article/details/79685791

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在学习HTML、CSS在学习表格<table>标签时，发现HTML标签本身并不能修饰好看的表格，这时候需要CSS上场了，此处为内嵌CSS，CSS代码需要写在<style type="text/css">...</style>之间，table为类选择器，满足所有与table有关的标签。没有采用CSS之前如图，可以发现很丑

<!DOCTYPE html>
<html>
<head>
	<title>table</title>
	<style type="text/css">
		table {/*样式实现表格居中*/
	                        border-collapse:collapse;
				width:600px;
				margin-bottom: 0px;
				margin-top: 0px;
				margin-right:auto;
				margin-left: auto;
				text-align: center;
				}
	</style>
</head>
<body>
	
<table border="1">
	<caption>纵向表格</caption>  <!--标题-->
	<tr>
		<td>姓名</td>
		<td>小丽</td>		
	</tr>
	<tr>
		<td>电话</td>
		<td>123</td>	
	</tr>
	<tr>
		<td>性别</td>
		<td>女</td>
	</tr>
	
	
<table border="1">
	<caption>横向表格</caption>  <!--标题-->
	<tr>
		<td>姓名</td>
		<td>电话</td>
		<td>性别</td>
	</tr>
	<tr>
	<td>小丽</td>
	<td>123</td>
	<td>女</td>
	</tr>
</table>
</body>
</html>

最后结果，整个表格都好看起来