0

0

css表格怎么添加边框样式?css表格边框样式总结(附完整实例)

寻∝梦

寻∝梦

发布时间:2018-09-07 13:38:17

|

9834人浏览过

|

来源于php中文网

原创

本篇文章主要讲述的就是关于css表格添加边框样式,这里还有关于css表格边框样式的总结,还有css表格边框的完整实例。接下来就让我们一起来看这篇文章吧

首先我们先看看如何利用css来给表格添加边框:

还记得我们在学html表格的时候也学过用border属性来给表格添加边框的,现在我们也是这样,我们来看下border在CSS样式中是如何使用的:

我们看下添加边框的属性:border-style属性。现在我们先来看个完整实例:





PHP中文网



1122
2244
1122
2244

上面的这个代码你知道效果吗?我们一起来看看效果吧:

立即学习前端免费学习笔记(深入)”;

tuyi.png

看着效果图大家应该都能明白吧,这里还是要解释下代码的用处:

border-style:定义了表格加边框(table表格的边框,如果在用table{}这个的话就会没有那么多线了,就只会出现边框线,中间的那些线都不会出现的,所以这里我加上了td标签,让它也在里面显示出线来)

  • dotted:dotted属性定义了点状边框,所以出现了这么多的点。(当然还有别的属性,也是显示边框的,我们一起来看下)

  • solid:solid属性定义实线边框

  • double:double属性定义双线边框

  • dashed:dashed属性定义虚线边框

看完这些大家应该都能明白吧,图中我只介绍了一种点状边框,还有双线边框还有虚线边框等,大家也可以一个一个的试试,看的出来也很明显的。

企奶奶
企奶奶

一款专注于企业信息查询的智能大模型,企奶奶查企业,像聊天一样简单。

下载

现在我们继续说说边框样式,当然还有几种样式,不然怎么能叫总结呢:

  • border-spacing 属性设置相邻单元格的边框间的距离

  • caption-side 属性设置表格标题的位置

今天就介绍两种属性把,加上上面的border-style 属性刚好就三种了。(推荐PHP中文网css学习手册栏目去学习更多css样式知识)

先看看border-spacing属性:

border-spacing属性设置相邻单元格的边框间的距离(length 水平间隔/length垂直间隔)




1122
2244
1122
2244

和上图一样,但是这个设置的是垂直间隔,所以我们看到的可能不太一样,所以这里就没有效果图展示了,大家可以自己实践,最后还有个caption-side属性,这个是设置表格标题的位置,可以设置在上面也可以设置在下面。这样都可以的。

所以有了这几种属性还是挺方便的,好了,后面的知识我们以后再做介绍了。

今天的这篇关于css表格添加边框样式的总结的文章到这里就结束了(想学更多的CSS样式的知识,就到PHP中文网css学习手册栏目学习),有问题的同学可以在下面留言提问

【小编推荐】

如何利用css来设置文本的背景颜色?css设置背景颜色代码详解

css怎么设置无序列表?css的列表样式总结

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c++怎么把double转成int
c++怎么把double转成int

本专题整合了 c++ double相关教程,阅读专题下面的文章了解更多详细内容。

73

2025.08.29

C++中int、float和double的区别
C++中int、float和double的区别

本专题整合了c++中int和double的区别,阅读专题下面的文章了解更多详细内容。

101

2025.10.23

length函数用法
length函数用法

length函数用于返回指定字符串的字符数或字节数。可以用于计算字符串的长度,以便在查询和处理字符串数据时进行操作和判断。 需要注意的是length函数计算的是字符串的字符数,而不是字节数。对于多字节字符集,一个字符可能由多个字节组成。因此,length函数在计算字符串长度时会将多字节字符作为一个字符来计算。更多关于length函数的用法,大家可以阅读本专题下面的文章。

924

2023.09.19

html边框设置教程
html边框设置教程

本教程将带你全面掌握HTML/CSS边框设置,从基础的border属性讲起,涵盖所有边框样式、圆角设置及高级技巧,帮助你快速上手实现各种边框效果。

35

2025.09.02

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

109

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

16

2026.01.26

苹果官方查询网站 苹果手机正品激活查询入口
苹果官方查询网站 苹果手机正品激活查询入口

苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行,可用于查询序列号(SN)对应的保修状态、激活日期及技术支持服务。此外,查找丢失设备请使用 iCloud.com/find,购买信息与物流可访问 Apple (中国大陆) 订单状态页面。

131

2026.01.26

npd人格什么意思 npd人格有什么特征
npd人格什么意思 npd人格有什么特征

NPD(Narcissistic Personality Disorder)即自恋型人格障碍,是一种心理健康问题,特点是极度夸大自我重要性、需要过度赞美与关注,同时极度缺乏共情能力,背后常掩藏着低自尊和不安全感,影响人际关系、工作和生活,通常在青少年时期开始显现,需由专业人士诊断。

7

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS深入理解之border视频教程
CSS深入理解之border视频教程

共7课时 | 1.3万人学习

CSS高级实例视频教程
CSS高级实例视频教程

共40课时 | 8.2万人学习

CSS  在线手册
CSS 在线手册

共40课时 | 52.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号