Html-浅谈如何正确给table加边框（转）

最新推荐文章于 2025-06-11 08:30:00 发布
最新推荐文章于 2025-06-11 08:30:00 发布
阅读量2.3w 收藏 17
点赞数 7
CC 4.0 BY-SA版权
分类专栏： Mysql 梦想
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/myflysun/article/details/81387710
本文详细介绍了HTML中表格的三个关键属性：border、cellspacing和cellpadding的作用与效果。通过实例展示了这些属性如何影响表格外观，包括边框、单元格间距及内容边距。

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

https://www.cnblogs.com/leona-d/p/6125896.html

一、 <table border="1"> 表格边框

如图：，也就是border=1，意思就是给表格的每一格，及边框加上1像素的边框

 

二、 <table border="1" cellspacing="0"> cellspacing单元格间距

如图：这时表格大小为：200*118px

cellspacing 属性用来指定每个单元格之间的距离

 

三、<table border="1" cellspacing="0" cellpadding="0"> cellpadding单元格边距

如图： 这时表格大小为：200*110px

cellpadding 属性用来指定单元格内容与单元格边界之间的空白距离的大小

前端面试题----HTML与CSS(随机排序)
m0_64337756的博客
04-27 498
1 Doctype 作用？ 严格模式与混杂模式如何区分？它们有何意义？ （1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 （2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 （4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。 2 五大浏览器以及内核？ Chrome 内核 Blink Safari 内核
HTML5andCSS3面试题大全
donglize521521的博客
03-08 6079
文章目录1.CSS引入(1)有哪些引入方式？通过link和@import引入有什么区别？（* ）(2)Style 标签写在 body 后和 body 前有什么区别？(3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC2.CSS选择器(1) CSS选择器种类(2)CSS选择器的优先级3.CSS伪类和伪元素4.CSS盒模型4.有哪些方式（CSS）可以隐藏页面元素？4.**em\px\rem区别？****5.块级元素水平居中的方法？** 1.CSS引入 (1)有哪些引
CSS样式简单实现Table没有外边框只有内边框
09-25
Table默认是有外边框，有内边框的，那么如何通过css样式简单实现Table没有外边框，只有内边框呢？下面有个不错的示例，大家可以看看
table 表格 细边框 最简单样式
04-23 236
table 表格细边框的效果实现方法虽然不难，但网上简单有效的方法却很少，在此记录一下 css 样式 /** table 细边框 **/ table{border-collapse: collapse; border: none; width: 100%;} td{border: solid #BCB0B0 1px; vertical-align: top;} html 代码 ...
HTML ：Table元素与表格布局详解
最新发布
qq_45925548的博客
06-11 831
本文系统介绍了HTML表格的构建与优化技巧。主要内容包括：1）基础表格元素（table、tr、th/td等）和结构化标签（caption、thead等）；2）布局技巧如边框控制、斑马纹效果和表头固定；3）响应式设计方案（水平滚动/堆叠布局）；4）高级特性包括列样式、排序指示和单元格合并。
table表格边框
CrossThePony的博客
06-20 1172
一、 1、显示表格的4个边框：&lt;table border frame=box&gt; 2、只显示上边框: &lt;table border frame=above&gt; 3、只显示下边框: &lt;table border frame=below&gt; 4、只显示上下边框: &lt;table border frame=hsides&gt; 5、只显示左右边框: &lt;table b...
table显示内边框
weixin_34212762的博客
08-16 966
今天做个表格，需要显示黑体内边框，弄了半天弄不出来，怒了！直接拼揍 <title>无标题文档</title> <style type="text/css"> table{ border-top:black 1px solid; border-left:black 1px solid;} table td{ border-bottom:black ...
table 表格细边框
卡尔，小嫩肉
03-25 147
[size=large] 1 2 3 4 ============================================================= border=1 cellpadding="0" cellspacing="0" bordercolor="#00...
浅谈html table 标签
09-28
HTML中的table标签是用于创建表格的标准标签，它可以让用户在网页上以行和列的形式来排列和展示数据。尽管CSS样式化的表格现在越来越多地用于更复杂的设计，但在数据展示方面，表格标签依然扮演着重要的角色。了解...
ym——Andorid-15k+的面试题。
陈宇明
08-07 3万+
最近才开的博客，希望大家多多关注，andorid开发也做了3年有余了，也面试很多加企业，借此机会分享一下，我们中遇到过的问题以及解决方案吧，希望能够对正在找工作的andoird程序员有一定的帮助。学完本人博客发表《ym--andorid从零开始教程》+面试题目全理解，年薪18w以上绝对没问题。 特别献上整理过的50道面试题目 1.listView的优化方式 重用conve
2021 HTML面试题（最新）不定时更新
一只蒻蒻的博客
02-02 4745
HTML面试题 DOCTYPE有什么作用？ DOCTYPE声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。 在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。 标准模式（又称严格模式）与兼容模式（又称混杂模式）各有什么区别？ 在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以
CSS控制Table内外边框、颜色、大小示例
12-11
其实按照常理来说，现在的网站应该早已经抛弃什么表格了，现在肯定是DIV+CSS当道嘛！不过客户的网站在添加内容的时候始终不满意那些边框效果：要么没有，要么很粗。看得出来，这位客户是位完美主义者。 在默认的情况下，我们的CSS将Table的边框清除掉了，是没有的，看到的效果是这样的。 无边框Table 为了给，表格加一个边框，我在CSS里面写了这样一句： .table{border:solid 1px #add9c0;} 哎，看来是我太天真了，浏览器里看到的效果是这样的： 只有外边框的Table 好吧，我承认，我确实已经有些年头没有动过Table了，不过这完全不是我的责任，因为Table其实
table边框
技术研究中心
12-19 865
通过灵活运用CSS属性，我们能够创造出各式各样的表格边框效果，提升用户对数据的感知和理解。希望通过这篇文章，你对Table边框的设计有了更深入的了解！在网页设计中，表格（Table）是一个常见且功能强大的元素，而表格的边框样式则是设计中不可忽视的一环。本文将深入探讨Table边框的各种细节，为你揭示表格设计的奥秘。表格是展示数据和信息的重要工具，而其边框样式直接影响页面的整体美观和用户体验。通过更改颜色、样式和宽度等属性，我们可以赋予Table边框更多的设计可能性。属性设置了边框的样式，
html表格兼容性,兼容性很好的表格边框设置----table的边框
weixin_39624774的博客
06-22 362
效果图：方法一姓名性别住址电话张三男...设置边框-webkit-appearance: none;border:1px solid #BBBBBB;框线制作常用代码代码含义方式1设置边框的BORDER=0、cellspacing=1...
table边框设置
chenmoquan的专栏
11-27 775
一、表格的常用属性 基本属性有：width（宽度）、height（高度）、border（边框值）、cellspacing（表格的内宽，即表格与tr之间的间隔）、 cellpadding（表格内元素的间隔，即tr与tr之间的间隔）、bordercolorlight（表格的亮边框颜色）、 bordercolordark（表格的暗边框颜色）、bgcolor（表格的背景色）、background（表格的
HTML】Table边框使用总结 ，只显示你要显示的边框(内边框，外边框)
hxmandzzx的博客
02-23 3万+
转载地址 http://blog.sina.com.cn/s/blog_6721f25c0101e0l8.html 一、表格的常用属性 基本属性有：width（宽度）、height（高度）、border（边框值）、cellspacing（表格的内宽，即表格与tr之间的间隔）、 cellpadding（表格内元素的间隔，即tr与tr之间的间隔）、bordercolorlight（表格的亮
table 原生表格添加、修改某一个单元的边框样式
m0_73008551的博客
04-18 608
原生table，动态控制单元格的点击样式，设置单元格的边框，自定义单元格样式
Table边框使用总结 ，只显示你要显示的边框
热门推荐
jaylongli的专栏
11-02 6万+
一、表格的常用属性基本属性有：width（宽度）、height（高度）、border（边框值）、cellspacing（表格的内宽，即表格与tr之间的间隔）、 cellpadding（表格内元素的间隔，即tr与tr之间的间隔）、bordercolorlight（表格的亮边框颜色）、 bordercolordark（表格的暗边框颜色）、bgcolor（表格的背景色）、backgr
js基础-批量生成标签 100个小方框
姗姗的博客
07-08 2029
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
掌握table嵌套table边框样式的代码实现
接着，在这个`div`内部，我们放置了一个父表格，通过给它添加类名`outer-table`并设置边框样式，让其边框和子表格的边框有所区别。 ### 2. table嵌套table的边框样式高级技巧 对于复杂的页面设计，可能需要对表格...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值