HTML&CSS基础学习笔记1.18-表格的边框

csscode 2016-08-10

今天的内容比较简单~来看看HTML里表格的边框是怎么设置的吧

表格的边框

前面为了方便观察表格单元格的情况，我们给<table>加了border属性。
<table>的border属性规定围绕表格的边框的宽度。
 

[border]属性会为每个单元格绘制边框，并用边框围绕表格。如果border属性的值发生改变，只有表格周围边框的尺寸会发生变化，表格内部的边框不受影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的边框 border</title>
</head>
<body>
    <h2>观察border的作用</h2>
    <table border="10">
        <tr><td>第一个单元格</td><td>第二个单元格</td><td>第三个单元格</td></tr>
        <tr><td>第四个单元格</td><td>第五个单元格</td><td>第六个单元格</td></tr>
        <tr><td>第七个单元格</td><td>第八个单元格</td><td>第九个单元格</td></tr>
    </table>
</body>
</html>

结果会是？

HTML&CSS基础学习笔记1.18-表格的边框

更多学习内容，就请前往码芽网吧http://www.mayacoder.com/lesson/index

想要尝试、调整不同的边框设置，就去试试吧~

csscode

csscode

相关推荐

CSS盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素。该属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。如上图，出现了取两个值中的较大者的现象，即为相邻块元素垂直外边距的合并。这

myloveqiqi / 0评论 2020-08-09

CSS盒模型（重点）

CSS三个大核心模块：盒模型 、浮动和定位，其余的都是细节。就是把网页元素资源放入盒子里，利用CSS合理摆放盒子的过程。盒模型就是把HTML页面中的元素看成是一个个矩形的盒子，里面装着内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。在网页中，

福叔 / 0评论 2020-06-02

CSS盒模型（重点）

CSS三个大核心模块：盒模型 、浮动和定位，其余的都是细节。就是把网页元素资源放入盒子里，利用CSS合理摆放盒子的过程。盒模型就是把HTML页面中的元素看成是一个个矩形的盒子，里面装着内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。在网页中，

CaiKanXP / 0评论 2020-06-02

【CSS】CSS 页面布局：盒子模型（内容区、边框、内边距、外边距）

页面中所有元素都可以看做是一个盒子，包含“内容”、“边框”、“内边距”和“外边距”四部分。主要有三个属性：。当 content 中的信息太多，超出内容区所占范围时，可通过 overflow 属性来指定溢出内容的处理方式。默认值，溢出内容不会被裁剪，会呈现在

xiaohuli / 0评论 2020-05-18

table边框表头单元格空间合并等设置

表格由<table>标签来定义,每个表格均有若干行，每行被分割为若干单元格。字母 td 指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。HTML 表格和边框属性,如果不定义边框属性，表格将不显示

HSdiana / 0评论 2020-03-28

巧妙实现带圆角的渐变边框

border-image是 CSS 规范CSS Backgrounds and Borders Module Level 3 新增的一个属性值。顾名思义，我们可以给 border 元素添加 image，类似于background-image，可以是图片也可

jiedinghui / 0评论 2020-02-20

解决Td内容为空时不显示边框的问题-兼容IE、firefox、chrome

创建好table，给table、td等设置好边框后，无意间发现td里没有内容的时候，边框竟然不会显示。开始的时候很懒，就在每个td里都先加一个空格， 然后再把内容加到这个空格后面，这些，就算本身没有内容，但是有了空格，边框就会被显示。遇到问题还是要找直接的

cfang00 / 0评论 2013-05-15

css中如何使用border属性与display属性

border属性设置元素边框。边框3个要素如：粗细、线型、颜色。不过应用于表时除外，对于表，hidden 用于解决边框冲突。在大多数浏览器中呈现为实线。双线的宽度等于 border-width 的值。其效果取决于 border-color 的值。定义 3D

impress / 0评论 2020-01-06

盒子模型

对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

wangjie / 0评论 2019-11-08

CSS表格笔录

DOCTYPE，以上属性可能产生意想不到的结果。collapse（缩合）边框会合并为一个单一的边框，会忽略 border-spacing 和 empty-cells 属性。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。<caption&g

尚衍亮 / 0评论 2018-02-01

《CSS揭秘》-背景与边框

值描述border-box背景被裁剪到边框盒padding-box背景被裁剪到内边距框content-box背景被裁剪到内容框border: 20px solid hsla;支持逗号分割语法，我们可以创建任意数量的投影。box-shadow是层层叠加的，第

Alisa0 / 0评论 2019-06-30

CSS表格笔录

DOCTYPE，以上属性可能产生意想不到的结果。collapse（缩合）边框会合并为一个单一的边框，会忽略 border-spacing 和 empty-cells 属性。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。如果显示，就会绘制出单元格

淡风wisdon大大 / 0评论 2018-02-01

html表格间距和border属性

有时候这很有用，但是多数时候我们希望显示边框。想要显示一个有边框的表格，需要使用border属性。cellspacing属性来增加/减小单元格间距。cellpadding属性在表格内容和边框之间留出更多空白/减少空白。align属性规定段落中文本的对齐方式

帅的相对论 / 0评论 2017-03-11

【丛林】CSS 边框浅谈

定义和用法围绕元素内容和内边距的一条或多条线。如果边框样式是 none，边框宽度实际上会重置为 0。不过应用于表时除外，对于表，hidden 用于解决边框冲突。在大多数浏览器中呈现为实线。双线的宽度等于 border-width 的值。其效果取决于 bor

yibawuqing / 0评论 2019-06-28

【丛林】HTML Table 表格浅谈（边框、隔行变色

此例子已经包含本文大部分内容，请对照参考。定义和用法table标签定义 HTML 表格。创建表格的四要素：table、tr、th、td<table>整个表格以<table>标记开始、</table>标记结束。表格的一行，

冯二爷 / 0评论 2019-06-28

CSS如何设置html table表格边框样式

对table设置css样式边框，分为几种情况： 1、只对table设置边框 2、对td设置边框 3、对table和td技巧性设置表格边框 4、对table和td设置背景，实现完美表格边框。以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例

randyjin / 0评论 2015-03-12

CSS 技巧01

<table rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线

cssuperman / 0评论 2014-12-16

htm表格使用心得

表格用于展示表格式数据，表格的作用不在于外观，外观是css的工作。我们需要在表格数据和单元格之间添加补白，使得单元格数据更易阅读。表格单元的确包含了补白和一个边框，不过没有边界。表格单元不存在边界，它只有边框四周的空间而已，而这个空间是为整个表格设置的。所

LadyZhong / 0评论 2014-09-27

table中td加边框后,各个td之间有空隙

在table中添加<table style="border-collapse:collapse">即可。css手册这么描述border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML

libowen0 / 0评论 2014-05-23

table tr td边框去除

table tr td{ border-top:#FF0000 solid 1px; width:50%; background-color:#00CC33; text-align:center; line-height:24px;}. border:#F

Phoebe的学习天地 / 0评论 2013-10-12

CSS clip 属性深入

之前的工作中有用到过clip这个属性。最近工作又再次用到这个属性时，发现自己忘了怎么设置这个属性值的了。看来上次没有真的弄懂这个属性，又去查了查文档学习了一下。这里简单分享，同时加深一下映像。作用w3school是这么说的: clip 属性剪裁绝对定位元

葉無聞 / 0评论 2019-06-25

解决Td内容为空时不显示边框的问题-兼容IE、firefox、chrome

创建好table，给table、td等设置好边框后，无意间发现td里没有内容的时候，边框竟然不会显示。开始的时候很懒，就在每个td里都先加一个空格， 然后再把内容加到这个空格后面，这些，就算本身没有内容，但是有了空格，边框就会被显示。遇到问题还是要找直接的

liusure0 / 0评论 2013-05-15

table 边框完全去掉

<table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线。<TABLE cellSpacing=0 cellPadding=0 width="90%&qu

csstpeixun / 0评论 2013-04-28

去除chrome谷歌浏览器input自带边框

1input,button,select,textarea{outline:none}2textarea{resize:none}

蚊子的逗比世界 / 0评论 2013-02-21

td 无内容显示边框

通过css border-collapse:collapse; 来实现。定义和用法empty-cells 属性设置是否显示表格中的空单元格。说明该属性定义了不包含任何内容的表单元格如何表示。如果显示，就会绘制出单元格的边框和背景。除非 border-col

JenniferMuMu / 0评论 2013-01-18

表格细边框

border-collapse: collapse;border: none;border: solid #99bbE8 1px;

葉無聞 / 0评论 2012-10-17

CSS Table属性

属性描述border-collapse设置是否把表格边框合并为单一的边框。border-spacing设置分隔单元格边框的距离。empty-cells设置是否显示表格中的空单元格。table-layout设置显示单元、行和列的算法。

LadyZhong / 0评论 2012-10-10

css简单总结

div：weight=100%，这样背景才可以全部填充；td{weith=100%}：保证td内部的输入框完全展开；<a></a>的属性，下划线控制：text-decoration:none；table中的分割线：使用空的tr即可，

csstpeixun / 0评论 2012-08-20

为表格中的某一行设置边框

style="border-collapse: collapse;"这句，border-collapse 属性表示设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

wangnan0 / 0评论 2012-03-14

table中 td无内容不显示边框（IE）

table {width:100%;border-collapse: separate;empty-cells:show;} 不过，目前IE6.0持此属性，貌似只能在css2中使用。相应的脚本特性为emptyCells。

xiaohuli / 0评论 2011-11-23

html设置table的边框基础

background: none repeat scroll 0 0 #FFFFFF;border-collapse: collapse;margin-top: 15px;text-align: center;width: 100%;border: 1px

buttonChan / 0评论 2011-08-29

table中cellspacing、cellpadding的css写法

设置或检索当表格边框独立，行和单元格的边框在横向和纵向上的间距。当只指定一个length值时，这个值将作用于横向和纵向上的间距。目前IE5.5尚不支持此属性。

切慕溪水 / 0评论 2011-08-03

关于制作极细1px表格边框

大家在使用css+div布局的时候，table已经被大多数人忽略了，或者说唾弃了。但是偶尔制作表格效果的时候，这是很方便的，对于这一点，我的建议就是该用什么的时候用什么，不是table不存在一点优点的。在使用table的时候，大家也许会发现一些问题。很多人

沉着前进 / 0评论 2011-07-05

扣丁学堂HTML5培训简述HTML5如何做表格只显示表格的外边框

在一个在dreamweaver中，弄了一个登陆的表格，三行一列，想只显示表格的外边框，怎么用代码实现?&lt;table width=”200″ border=”0″ style=”border:1px solid #000000;”&gt

ly / 0评论 2019-02-27

CSS border-width 属性

border-width属性设置一个元素的四个边框的宽度。表格中的数字表示支持该属性的第一个浏览器版本号。值描述thin定义细的边框。length允许您自定义边框的宽度。inherit规定应该从父元素继承边框宽度。如您还有不明白的可以在下面与我留言或是与我

huakaiwuxing / 0评论 2017-01-06

CSS border-style 属性

border-style属性设置一个元素的四个边框的样式。表格中的数字表示支持该属性的第一个浏览器版本号。不过应用于表时除外，对于表，hidden 用于解决边框冲突。dotted定义点状边框。在大多数浏览器中呈现为实线。双线的宽度等于 border-wid

CaiKanXP / 0评论 2017-01-05

CSS border-color 属性

border-color属性设置一个元素的四个边框颜色。border-color:红，绿，蓝,粉红色;元素必须在您改变其颜色之前获得边框。表格中的数字表示支持该属性的第一个浏览器版本号。在CSS颜色值查找颜色值的完整列表transparent指定边框的颜色

李鴻耀 / 0评论 2017-01-01

CSS3 边框

用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。我们不得不在每个角落使用不同的图像。border-image属性允许你指定一个图片作为边框！-webkit-border-image:url 30 30 r

尚衍亮 / 0评论 2016-12-20

JS实现控制表格只显示行边框或者只显示列边框的方法

本文实例讲述了JS实现控制表格只显示行边框或者只显示列边框的方法。分享给大家供大家参考。通过下面的JS代码你可以控制表格只显示行与行之间的分隔线，也可以只显示列与列之间的分隔线，主要用到了表格对象的rules属性。</html>希望本文所述对大

longmeifeng / 0评论 2015-03-31

CSS border属性边框用法揭秘

元素的边框是围绕元素内容和内边距的一条或多条线，跟表格table的border类似。CSS border属性允许你规定元素边框的样式、宽度和颜色。在HTML中，我们使用表格来创建文本周围的边框，但是通过使用CSS边框属性，我们可以创建出效果出色的边框，并且

houzimanjjt / 0评论 2010-08-26

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

table,table tr th, table tr td { border:1px solid #0094ff; }. table { width: 200px; min-height: 25px; line-height: 25px; text-al

BitTigerio / 0评论 2017-11-29

小米6暴力测试 不锈钢边框果然很结实

国外玩家JerryRigEverything专门对手机做残暴测试，用个硬度的刀进行耐刮擦测试、还有火烤，最刺激的莫过于最后进行的徒手弯折测试。在最后的徒手弯折测试中，小米6完美挺过，正背面都能很好的抵御压力。小米6之所以有如此良好的表现，主要还是得益于奥氏

BAT 批处理程序 / 0评论 2017-05-15

border-style 属性

border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。不过应用于表时除外，对于表，hidden 用于解决边框冲突。在大多数浏览器中呈现为实线。双线的宽度等于 border-wi

编程爱好者联盟 / 0评论 2016-11-15

table 鼠标移上去改变单元格边框颜色。

表格定义了border-collapse:collapse;边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。搜索了好久，没有找到好的方法，用左右边框也不完美。于是就在想，移上去的时候给加个伪元素after

前端开发 / 0评论 2016-11-10

CSS属性 table 的 border-collapse 边框合并

边框分开，不合并。即如果相邻，则共用同一个边框。虽然在DIV+CSS 时代 table 的权重越来越低，但是有时候，还是局部地方table 还是挺好用的。特别是制表方面，还是table 比较的方便。当然，制表肯定少不了边框，但是如果你直接在td上加边框，就

前端开发探路者 / 0评论 2016-09-29