table边框（HTML5中Table如何消除边框（TD）间距）

：暂无数据 2026-09-04 07:40:01 ：0

“table边框”相关信息最新大全有哪些，这是大家都非常关心的，接下来就一起看看table边框（HTML5中Table如何消除边框（TD）间距）！

本文目录

HTML5中Table如何消除边框（TD）间距
如何隐藏table的左/右/上/下边框
html怎么显示table表格边框
如何让table表格边框成为单线
在html的表格中，怎么把表格的边框设置为实线框具体的代码是什么谢谢
html怎样设置table的边框
HTML5 table布局的边框问题
html中table怎么加边框
我的table怎么没有边框怎么办
html表格怎么去掉内边框

HTML5中Table如何消除边框（TD）间距

1、border里不要带单位就可以，具体操作如下，首先新建一个HTML文件，写入基本的结构，创建一个带边框的表格：

2、接下来设置table的属性border的值为0，即可消除边框，然后在style标签中设置css样式，给表格一个border-collapse的属性，属性值为collapse即可合并表格的边框，显得跟紧凑，最后给表格设置颜色，字体颜色等样式美化一下：

3、最后打开浏览器预览效果，表格就是不带边框的了。以上就是html去除表格的操作了：

一、表格中单元格之间分隔线的隐藏方法第一行第二行第三行这个表格去掉了单元格之间的纵向分隔线第第第一二三列列列这个表格去掉了单元格之间的横向分隔线横线竖线都没了这个表格去掉了单元格之间的纵向分隔线和横向分隔线其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到《TABLE》标签中都有rules。它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。二、表格边框的隐藏普表通格这是一普通的表格不怕下雨只显示上边框下起雨来该怎么办只显示下边框上不着天下不着地只显示左、右边框两边走开老子姓王只显示上、下边框左右为难只显示左边框左右为难只显示右边框光秃秃全脱了不显示任何边框表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。
只显示上边框《table frame=above》
只显示下边框《table frame=below》
只显示左、右边框《table frame=vsides》
只显示上、下边框《table frame=hsides》
只显示左边框《table frame=lhs》
只显示右边框《table frame=rhs》
不显示任何边框《table frame=void》三、表格边框普表通格这是一普通的表格《table border="1" width="200" cellpadding="0" cellspacing="0"》《tr align="center"》《td》普《/td》《td》表《/td》《/tr》《tr align="center"》《td》通《/td》《td》格《/td》《/tr》《/table》细表线格表格加上了漂亮的细线
(利用cellspacing1像素间隙和表格与单元格背景的不同) 《table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000" 》《tr align="center" bgcolor="#FFFFFF"》《td bgcolor="#FFFFFF"》细《/td》《td bgcolor="#FFFFFF"》表《/td》《/tr》《tr align="center" bgcolor="#FFFFFF"》《td bgcolor="#FFFFFF"》线《/td》《td bgcolor="#FFFFFF"》格《/td》《/tr》《/table》细表线格这和上面那个可不一样，它用的是CSS，效果却一样。
(对单元格border的定义) 《table width="200" cellspacing="0" cellpadding="0"》《tr align="center"》《td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove"》细《/td》《td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove"》表《/td》《/tr》《tr align="center"》《td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove"》线《/td》《td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove"》格《/td》《/tr》《/table》细表线格再进一步，把边框变成虚线，同样是CSS的神奇作用。《table width="200" cellspacing="0" cellpadding="0"》《tr align="center"》《td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted"》细《/td》《td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted"》表《/td》《/tr》《td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted"》线《/td》《td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted"》格《/td》《/tr》《/table》细线表格的扩展应用，奥妙就是在第个单元格中再套入一个表格。《table width="200" border="0" cellspacing="2" cellpadding="0"》《tr》《td》《table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"》《tr》《td bgcolor="#FFFFFF"》《wbr》《/td》《/tr》《/table》《/td》《td》《table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"》《tr》《td bgcolor="#FFFFFF"》《wbr》《/td》《/tr》《/table》《/td》《/tr》《tr》《td》《table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"》《tr》《td bgcolor="#FFFFFF"》《wbr》《/td》《/tr》《/table》《/td》《td》《table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"》《tr》《td bgcolor="#FFFFFF"》《wbr》《/td》《/tr》《/table》《/td》《/tr》《/table》立表体格立体感的表格
(简单的亮暗边框设置，注意只有IE支持这种效果) 《table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0"》《tr align="center"》《td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" 》立《/td》《td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" 》表《/td》《/tr》《tr align="center"》《td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" 》体《/td》《td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" 》格《/td》《/tr》《/table》无名表格给表格加上一个表头
(应用《fieldset》和《/legend》标签) 《table width="200" cellpadding="0" cellspacing="0"》《tr》《td》《fieldset style="width:200" align="center"》《legend》无名表格《/legend》《p align="right"》《/fieldset》《/td》《/tr》《/table》表中表效果Ⅰ 给表头再加个框
(用CSS为《legnd》定义一个边框) 《table width="200"" cellspacing="0" cellpadding="0"》《tr》《td》《fieldset style="width: 200; color: #B7B7B7; border-style: groove" align="center"》《legend style="color: blue; border: 1 solid #000000"》表中表效果Ⅰ《/legend》《br》《/fieldset》《/td》《/tr》《/table》表中表效果Ⅱ 看起来和上面的一样，可是这个才是真正的表中表哦。
(在《legnd》中插入一个表格) 《table width="200"》《tr》《td》《fieldset style="width:200" align="center"》《legend》《table style="border: 1 solid #000000" width="80" cellspacing="1" cellpadding="0" height="20"》《tr》《td》《font color=blue》表中表效果Ⅱ《/font》《/td》《/tr》《/table》《/legend》《br》《/fieldset》《/td》《/tr》《/table》这一节要靠你自己去发现了，因为这样学到的东西才是真正属于自己的（我的一个偷懒的借口）。我已经在每个表格的下面写出了重点，并在右边给出它的源代码，你可以对照着看。下面还有一个边框会自己变颜色闪动的表格，有兴趣也研究研究吧 ^o^

html怎么显示table表格边框

《table width="400" style="border:1px solid #ccc"》
《tr》
《td width="105"》站名《/td》
《td width="181"》网址《/td》
《td width="112"》说明《/td》
《/tr》
《/table》
style="border:1px solid #ccc" 即可设置边框。

如何让table表格边框成为单线

方法1：原理：表格和单元格都用背景，但互相颜色不同，单元格背景遮住了和表格重合的部分，就出现了边框。但要注意，表格的属性一定要设置为边距为1（cellspacing＝"1"）。不然效果不好
方法二：语法： border-collapse : separate | collapse 取值： separate :　默认值。边框独立（标准HTML） collapse :　相邻边被合并
《style type="text/css"》
.td{border:1px #0066ff solid;}
.table{border-collapse:collapse;}
《/style》
《table width="300" class="table"》
《tr》
《td class="td"》1《/td》
《td class="td"》2《/td》
《/tr》
《tr》
《td class="td"》3《/td》
《td class="td"》4《/td》
《/tr》
《/table》

在html的表格中，怎么把表格的边框设置为实线框具体的代码是什么谢谢

《style type="text/css"》
《!--
.tableborder {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
/*以上分别设置的是表格边框中上右下左的边框宽度*/
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
/*设置边框的表现样式，solid为实线*/
border-top-color: #0000FF;
border-right-color: #0000FF;
border-bottom-color: #0000FF;
border-left-color: #0000FF;
/*设置边框的颜色*/
}
--》
《/style》
《table width="300" height="100" border="0" align="center" cellpadding="0" cellspacing="0" class="tableborder"》
《tr》
《td》class="tableborder"是对样式的调用，写在table标签内《/td》
《td》《/td》
《/tr》
《/table》

html怎样设置table的边框

html设置table的边框的方法是使用border 属性实现。

说明：

border 属性规定表格单元周围是否显示边框。
值 "1" 指示应该显示边框，且表格不用于布局目的。
在 HTML5 中，border 属性仅用于指示表格是否用于布局目的，且只允许属性值 "" 或 "1"。

完整用法举例：

1、html中的table代码如下：

《!DOCTYPE html》

《html》

《head》

《meta charset="utf-8"》

《title》table的边框《/title》

《/head》

《body》

《table border="1"》

《tr》

《th》Month《/th》

《th》Savings《/th》

《/tr》

《tr》

《td》January《/td》

《td》$100《/td》

《/tr》

《tr》

《td》February《/td》

《td》$80《/td》

《/tr》

《/table》

《/body》

《/html》

2、运行后的效果：

HTML5 table布局的边框问题

这个边框是属于《table》标签的，想要去掉的话，就要设置成这样《table border="0" cellpadding="0" cellspacing="0"》

楼主加上这一条 cellpadding="0" cellspacing="0"就可以了

回答：

我用的你的代码？body也没有白色那层了。我想问问楼主你看的是有些老的视频了吧，现在这些视频代码很多和现在的浏览器不兼容，要不你看个浏览器试试！下面是我的浏览器用你代码实现出来的效果

html中table怎么加边框

《html》
《head》
《style type="text/css"》
.tab{border-top:1px solid #000;border-left:1px solid #000;text-align:center}
.tab td{border-bottom:1px solid #000;border-right:1px solid #000;}
《/style》
《/head》
《body》
《table class="tab" cellspacing="0" cellpadding="0" width="300" 》
《tr》
《td》1《/td》《td》2《/td》《td》3《/td》
《/tr》
《tr》
《td》1《/td》《td》2《/td》《td》3《/td》
《/tr》
《tr》
《td》1《/td》《td》2《/td》《td》3《/td》
《/tr》
《tr》
《td》1《/td》《td》2《/td》《td》3《/td》
《/tr》
《tr》
《td》1《/td》《td》2《/td》《td》3《/td》
《/tr》
《tr》
《td》1《/td》《td》2《/td》《td》3《/td》
《/tr》
《/table》
《/body》
《/html》