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
CSS(层叠样式表)中的表格样式主要用于控制网页中的数据展示,使表格看起来更专业和易读。以下是基本的表格样式步骤: 1. **基本结构**: 开始一个HTML表格标签 `<table>`,包含 `<tr>` () 和 `<td>` 或 `<th>` (单元格)。`<th>` 用于表头,`<td>` 用于普通内容。 ```html <table> <thead> <tr> <th>列标题1</th> <th>列标题2</th> </tr> </thead> <tbody> <tr> <td>行1, 列1</td> <td>行1, 列2</td> </tr> <!-- 更多行... --> </tbody> </table> ``` 2. **样式设置**: - `border`: 设置边框宽度、样式和颜色; - `width` 和 `height`: 控制单元格大小; - `text-align` 和 `vertical-align`: 文字对齐; - `padding` 和 `margin`: 内外间距调整; - `background-color` 或 `background-image`: 背景颜色或图片。 ```css table { border-collapse: collapse; /* 合并相邻单元格边框 */ } th, td { border: 1px solid #ccc; padding: 8px; text-align: left; } th { background-color: #f2f2f2; font-weight: bold; } /* 可选:美化表格 */ tr:nth-child(even) { background-color: #f2f2f2; } ``` 3. **高级样式**: 使用伪元素如 `::before`, `::after` 添加行/列编号,或者使用媒体查询针对不同屏幕尺寸优化布局。 ```css th::before { content: counter(column); /* 这里counter(column)需要在HTML里通过属性data-column-count设置计数 */ } @media screen and (max-width: 600px) { table, thead, tbody, th, td, tr { display: block; } /* ...继续调整小屏下的样式... */ } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值