html加边框（HTML加边框怎么加）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
今天给各位分享html加边框的知识，其中也会对HTML加边框怎么加进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
html样式（边框）
1.所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。
有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。
元素的 padding 控制元素内容 content和元素边框 border 之间的距离
在这儿，我们可以看到绿方块和红方块都位于黄方块之中，但是红方块比绿方块具有更大的 padding。
当你加大绿方块的 padding, 它将扩大元素内容和元素边框的距离。
style
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: red;
padding: 20px;
}
.green-box {
background-color: green;
padding: 10px;
}
/style
h5 class="injected-text"margin/h5
div class="box yellow-box"
h5 class="box red-box"padding/h5
h5 class="box green-box"padding/h5
/div
2.元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离
3.如果你将一个元素的 margin 设置为负值，元素将会变大。
4.有时你想要自定义元素，使它的每一个边具有不同的 padding。
CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding
style
.green-box {
background-color: green;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}
/style
div class="box yellow-box"
h5 class="box red-box"padding/h5
h5 class="box green-box"padding/h5
/div
5.有时你想要自定义元素，使它的每一个边具有不同的 margin。
CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。
style
.green-box {
background-color: green;
margin-top: 40px;
margin-left: 40px;
margin-right: 20px;
margin-bottom: 20px;
}
/style
div class="box yellow-box"
h5 class="box red-box"padding/h5
h5 class="box green-box"padding/h5
/div
6.除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，举例如下：
padding: 10px 20px 10px 20px;
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左
style
.red-box {
background-color: red;
padding: 20px 40px 20px 40px;
}
/style
7.除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外，你还可以集中起来指定它们，举例如下：
margin: 10px 20px 10px 20px;
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左
style
.red-box {
background-color: red;
margin: 20px 40px 20px 40px;
}
/style
如何在html的表格中加入边框线
html的表格中加入边框线方法：
一、如何在html的表格中加入边框线
只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。
案例详细如下：
1、对应css代码
style
.table-a table{border:1px solid #F00}
/* css注释：只对table标签设置红色边框样式 */
/style
2、对应html代码片段
div class="table-a"
table width="400" border="0" cellspacing="0" cellpadding="0"
tr
td width="105"站名/td
td width="181"网址/td
td width="112"说明/td
/tr
tr
tdDIVCSS/td
td域名/td
tdCSS学习/td
/tr
tr
tdCSS5/td
td域名/td
tdCSS切图/td
/tr
/table
/div
3、案例截图
二、对td设置边框
对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。
详细案例教程如下：
1、对应css代码
style
.table-b table td{border:1px solid #F00}
/* css注释：只对table td标签设置红色边框样式 */
/style
2、对应html源代码片段
3、案例截图
三、对table和td技巧性设置表格边框 -
如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。
解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。
解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下 边框解决显示右侧和下侧td剩下未显示边框。
1、对应css代码：
style
.table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00}
.table-c table td{border-left:1px solid #F00;border-top:1px solid #F00}
/*
css 注释：
只对table td设置左与上边框；
对table设置右与下边框；
为了便于截图，我们将css 注释说明换行排版
*/
/style
2、对应html源代码片段：
div class="table-c"
table width="400" border="0" cellspacing="0" cellpadding="0"
tr
td width="105"站名/td
td width="181"网址/td
td width="112"说明/td
/tr
tr
tdDIVCSS/td
td域名/td
tdCSS学习/td
/tr
tr
tdCSS5/td
td域名/td
tdCSS切图/td
/tr
/table
3、表格边框实现案例截图
四、对table和td设置背景，实现完美表格边框
1）、先设置table css背景为红色
2）、设置table单元之间间距为1
使用DW软件辅助设置table表格单元间距为1，具体DW软件可视化操作步骤简要说明，首先（视图模式）选中表格后，对应DW软件编辑窗口底部会“属性”面板会出现对应table表格属性设置地方，我们将“间隔”填写为“1”。这个时候我们会看到table表格标签里cellspacing值为“1”（cellspacing="1"）。
借助DW软件设置表格单元之间间距
或
直接对table标签内cellspacing="1"即可，得到：
table width="400" border="0" cellspacing="1" cellpadding="0"
3）、设置table td背景为白色
2、css代码：
style
.table-d table{ background:#F00}
.table-d table td{ background:#FFF}
/*
css注释：设置table背景为红色，td背景为白色 */
/style
3、对应html源代码：
div class="table-d"
table width="400" border="0" cellspacing="1" cellpadding="0"
tr
td width="105"站名/td
td width="181"网址/td
td width="112"说明/td
/tr
tr
tdDIVCSS/td
td域名/td
tdCSS学习/td
/tr
tr
tdCSS5/td
td域名/td
tdCSS切图/td
/tr
/table
/div
4、表格边框案例截图
五、css table表格边框实现总结
以上四种方式实现table表格边框样式方法，推荐使用第三和第四种方法来解决表格边框样式。table边框布局方法并能掌握，平时需要时灵活运用。
在HTML中如何设置边框?
HTML中设置边框方法：
方法/步骤
1、一个普通的表格如下：
相关设置
2、单元格边距(表格填充)(cellpadding) -- 代表单元格外面距离,用于隔开单元格与单元格之间的空间 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离。
具体代码如下：
table border='1'cellspacing="0" cellpadding="0" tr td width="200"1/td td width="200"2/td td width="200"3/td /tr tr tda/td tdb/td tdc/td /tr tr td中国/td td我/td td爱你/td /tr /table
效果如图
文字不居中？
3、设置一下就好了。
代码如下：
style type="text/css".onecenter{text-align:center;width:200px;}/styletable border='1'cellspacing="0" cellpadding="0" tr td class='onecenter'1/td td class='onecenter'2/td td class='onecenter'3/td /tr tr td class='onecenter'a/td td class='onecenter' b/td td class='onecenter' c/td /tr tr td class='onecenter' 中国/td td class='onecenter' 我/td td class='onecenter' 爱你/td /tr /table
4、为了方便一点我直接把样式写在上面了。
效果如图：
5、每一个表格都是一个完整的方框，如果想要线条更细。
6、看如下代码：
style type="text/css".onecentertext-align:center;width:200px;height:50px;}#sebackground-color:#006699 ;padding:20px;color:#FFF;}/styletable border='1'cellspacing="0" cellpadding="20" tr td class='onecenter'1/td td class='onecenter' style='border-left:0px;border-right:0px;' 2/td td class='onecenter'3/td /tr tr td class='onecenter'a/td td class='onecenter' style='border:0px' b/td td class='onecenter' c/td /tr tr id='se' td class='onecenter' 中国/td td class='onecenter' 我/td td class='onecenter' 爱你/td /tr /table
7、这段代码主要是针对某些表格做了些设置，让某些表格不显示出来。
html边框线怎么设置？
1.打开编辑器，新建一个HTML文档，并且编写基本框架。
2.新建一个CSS文档，并且关联刚刚创建的HTML文档。
3.新建一个div标签，可以看到这个div默认是没有边框的。
4.border:1pxsolidred;这是我们设置边框的常用格式。
5.我们可以把边框改为点状式的。
6.也可以修改为虚线形状的。
HTML中正确设置表格table边框border的三种办法
html中如果设置table的border为1px，实际会产生双线，十分不美观，那么在HTML中如何正确设置表格table边框border呢？
第一种方法：
1、将table的属性设置为：BORDER=0 、cellspacing=1 ；
2、设置table的背景色为即你要设置的table的边框颜色；
3、设置所有td背景色为#ffffff白色；
第二种方法：
1、设置BORDER=0 ；
2、再通过CSS，给Table加上1px的border-top,border-left；
3、然后再设置所有的td的border-right,border-bottom；
第三种方法（推荐）：
1、设置table的CSS为{border-collapse:collapse;border-style: solid;border-width: 1px;}
注：border-collapse:collapse;
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。
2、再设置td的CSS为{border-style: solid;border-width: 1px;}
转自：
html加边框的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于HTML加边框怎么加、html加边框的信息别忘了在本站进行查找喔。
