CSS（十）——用CSS设置表格样式

最新推荐文章于 2025-04-30 20:17:23 发布

程序员的时光

最新推荐文章于 2025-04-30 20:17:23 发布

阅读量840

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ● Web前端基础篇 Web前端基础文章标签： CSS 表格样式

本文链接：https://blog.youkuaiyun.com/qq_37084904/article/details/88545667

Web前端基础同时被 2 个专栏收录

14 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

● Web前端基础篇

33 篇文章

订阅专栏

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

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

1.设置表格的边框

1.1设置表格边框

1.2设置单元格的间距；

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

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

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序员的时光

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

CSS入门到精通——表格样式

weixin_54327001的博客

12-15

1万+

第1关：表格边框任务描述本关任务：在本关中，我们将学习如何使用CSS设置表格样式，使表格更好看。本关任务完成之后的效果图(index.html)如下：相关知识为了完成本关任务，请大家认真阅读以下内容。在之前的HTML教程中，我们学习了各类基本表格。例如，下面网页代码的表格： HTML 页面： <body> <table width="400">  <caption>通讯录</capti

CSS 样式化表格：从基础到高级技巧

engchina的专栏

01-31

1522

CSS 样式化表格：从基础到高级技巧

参与评论您还未登录，请先登录后发表或查看评论

如何使用 CSS 设置 HTML 表格样式

热门推荐

allway2的博客

05-30

1万+

在 Web 开发的早期，HTML 表格非常基础，缺乏广泛的样式选项。然而，今天，大多数表格的样式都旨在为用户创造更美观和更实用的体验。 CSS 为样式表提供了许多属性。这些属性允许您（除其他外）分隔表格中的单元格、指定表格边框以及指定表格的宽度和高度。本教程将通过示例讨论如何使用 CSS 设置表格样式。在本教程结束时，您将成为这方面的专家。 HTML 表格 HTML 代码定义了表格的结构。您使用 <table> 标记来定义表格。<tr>、<th> 和 <t

CSS基础--设置表格样式和表单样式

2401_85545586的博客

10-09

2094

参数：sparate为默认值表示边框分开不合并，collapse表示边框合并，即如果两个边框相邻则共用同一个边框。用于设置表格的边框是合并成单边框，还是分别有各自的边框。： cursor:pointer可设置鼠标悬停时变手指。CSS--使用CSS修饰页面外观。

CSS(九) 设置表格样式

hlfsunshine的专栏

10-07

618

设置表格的边框 Border：设置表格边框； Border-collapse：设置边框分离或者合并，默认是separate(分离)的，值collapse 为合并； Border-spacing ：设置单元格的间距； Padding：设置单元格内容和边框之间的距离；设置表格的宽度 Table-layout 默认auto 自动方式，根据单元格的内容自动调整宽度； Fixe

css中用来设置表格的一些样式属性

qwguo

05-16

1263

等属性来设置表格的样式，并使用。伪类来交替改变行的背景色。在这个示例中，我们使用了。

css设置表格样式的方法

学习也休闲

11-24

1332

表格常见的应用表格的颜色例如 .datalist { color: #0046a6; background-color: #d2e8ff; font-family: Arial; } .datalist th { color: #003e7e; background-color: #7bb3ff;

我的css框架——base.css(重设浏览器默认样式)

09-22

在网页设计中，CSS框架是必不可少的工具，它们帮助开发者快速构建一致且响应式的界面，减少样式冲突，提高开发效率。本文重点介绍的"base.css"是一个基础的CSS框架，其核心目标是重置浏览器的默认样式，确保跨浏览器...

html纯css实现表格样式

01-04

本教程将深入探讨如何使用纯 CSS 实现美观且功能丰富的表格样式。表格在 HTML 中通常使用 `<table>`、`<tr>`（行）、`<th>`（表头）和 `<td>`（单元格）等标签来创建。CSS 则通过选择器和属性来控制表格的样式。...

CSS修饰页面外观——设置表单表格样式（文本，背景，图像）干货满满！！！

最新发布

Ran_zz的博客

04-30

765

设置表单表格样式（文本，背景，图像）

CSS常用声明＞（下篇）#表格属性#表单样式设置_附练习

Tu_17的博客

11-01

1969

文本域主要用于采集用户在其中编辑的文字信息，通过CSS样式可以对文本域内的字、颜色，以及背景图像加以控制。通过CSS样式可以对按钮的字体、颜色、边框,以及背景图像加以控制。border-collapse属性用来设置表格的边框是合并成单边框，还是分别有各自的边框。empty-cells属性用于设置当表格的单元格无内容时，是否显示该单元格的边框。border-spacing属性用来设置相邻单元格边框间的距离。下面以示例的形式介绍如何使用CSS修饰文本域。下面以示例的形式介绍如何使用CSS修饰按钮。

CSS设置Table的样式

wl_ldy的专栏

01-25

2064

CSS设置Table的样式：文章转载地址：http://blog.youkuaiyun.com/jaylongli/archive/2009/11/02/4757902.aspx CSS颜色代码大全：文章转载地址：http://blog.youkuaiyun.com/jawsy/archive/2008/04/30/2346609.aspx

CSS3表格和表单样式

码说芯语的博客

10-31

5795

表格和表单样式

CSS 表格：Table

梁辰兴的博客

09-19

3595

CSS折叠边框是一种用于实现边框缩小或扩张的CSS技巧，主要通过设置边框的宽度和高度，使边框在需要缩小或扩张时根据实际需要进行折叠。请注意，这只是一种模拟折叠边框的方法，实际的折叠边框效果可能需要使用其他技术或者配合其他属性来实现。如果单元格中的内容超出了单元格的宽度或高度，可以使用CSS的溢出处理方式来处理，例如使用。同时，在表格内部，单元格之间的边框是默认不显示的，如果需要显示，需要给单元格也设置。需要注意的是，对于表格的行高或单元格宽度，可以通过设置单元格的。CSS 表格属性可以用来改变表格的样式。

CSS基础：table的4个标签的样式详解（6000字长文！附案例）

u013179804的博客

04-19

1万+

之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。

CSS 基础教程：表格（一）

m0_65012566的博客

05-14

1328

表格是一个HTML元素，用于以带有行和列的结构化格式显示数据。表格使用HTML中的<table>标签创建，并且可以使用CSS属性进行样式设置。本章讨论如何使用CSS设置HTML表格的不同属性。首先看看下面的示例，它演示了一个简单的HTML表格：</</</</</</</</</</</</</</</</</</上述示例中的表格是数据的简单显示，可以使用CSS进行样式设置。widthheighttext-alignborder让我们看看如何在以下各节中使用这些属性的示例。

css表格和样式

MOONCOM的博客

01-09

712

一、border-collapse 设置表格的边框是否合并为一个单一的边框 separate 默认值，边框会被分开 collapse 边框会合并成一个单一的边框，会忽略border-spacing和empty-cells 二、border-spacing 设置表格单元格边框之间的间距三、caption-

如何用JavaScript动态修改CSS样式表

yangshen998

12-15

192

　　看过我写的《如何用JavaScript动态建立或增加CSS样式表》之后，你就很容易想明白如何修改CSS样式表了。　　正好今天在论坛碰到一位朋友问这样的一个问题： <style> .ls{width=120px;} </style> <script> //在这里加一句来改变.ls中width的值，如何写 </script> 　　...

CSS从入门到精通——表格样式

11-05

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; } /* ...继续调整小屏下的样式... */ } ```