CSS(十)——用CSS设置表格样式

本文详细介绍了如何使用CSS来美化表格,包括设置表格边框、调整单元格间距、控制边框合并、设定内容与边框距离、设置表格宽度、实现隔行换色、定制列样式以及创建鼠标经过时的行变色效果。通过实例代码演示了各种CSS属性的使用,帮助读者掌握表格样式设计技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

1.设置表格的边框

1.1设置表格边框

1.2设置单元格的间距; 

1.3设置边框分离,合并 默认是 separate(分离) collapse (合并);

1.4设置单元格内容和边框之间的距离;

2.设置表格的宽度

3.设置表格隔行换色

4.设置表格列样式

5.设置鼠标经过时行变色效果;


1.设置表格的边框

border:设置表格边框;

border-spacing :设置单元格的间距; 

border-collapse:设置边框分离,合并 默认是 separate(分离) collapse 合并;

padding:设置单元格内容和边框之间的距离;

我们先来建立一个表格:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
	<!-- 标题caption -->
	<caption>学生信息</caption>
	<!-- 表头thead -->
	<thead>
		<tr>
			<th>序号</th>
			<th>学号</th>
			<th
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值