css的表格属性以及边框属性

最新推荐文章于 2024-04-15 17:18:49 发布

Camellia——

最新推荐文章于 2024-04-15 17:18:49 发布

阅读量496

点赞数

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

本文链接：https://blog.csdn.net/weixin_57219176/article/details/126571639

版权

前端专栏收录该内容

40 篇文章 0 订阅

订阅专栏

表格属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS的表格</title>
		<!-- 
			CSS表格属性：
				等价于table标签中属性：cellspacing:将单元格和边框之间的空袭合并单一边框
				border-collapse:collapse;
		 -->
		 <style>
			 
			 table{
				 border-collapse: collapse;
			 }
		 </style>
	</head>
	<body>
		<table border="1px" align="center" width="500px" height="300px" >
			<caption >学生信息</caption>
			<tr>
				<th>学号</th>
				<th>年龄</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			
			<tr>
				<td align="center">1</td>
				<td align="center">20</td>
				<td align="center">张三</td>
				<td align="center">男</td>
			</tr>
			
			<tr>
				<td align="center">2</td>
				<td align="center">16</td>
				<td align="center">丽萨</td>
				<td align="center">女</td>
			</tr>
		</table>
	</body>
</html>

边框属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css边框属性</title>
		<style>
			div{
				/* 要想显示边框：必须指定边框的样式属性：单实线(solid),双实线（double）,虚线dashed,点dotted */
				/*border-style: solid;*/
				/* 边框颜色的简写属性 
					默认的方向 上右下左（边框的样式/边框的宽度都遵循这个特点），某一边如果没有设置颜色，宽度，样式都会补齐对边的颜色，宽度以及样式
				*/
				/* border-color: aliceblue rebeccapurple beige darkblue; */
				/* 边框宽度的简写属性 */
				/* border-width: 5px 6px 5px 7px; */
				/* 边框的简写属性
					border:border-width border-style border-color;
				 */
				border: 1px solid skyblue;
				/* 整个 容量大小*/
				width: 200px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div>div1</div>
	</body>
</html>