重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
对table设置css样式边框,分为几种情况:1、只对table设置边框;2、对td设置边框;3、对table和td技巧性设置表格边框;4、对table和td设置背景,实现完美表格边框。
创新互联主营贵池网站建设的网络公司,主营网站建设方案,成都App定制开发,贵池h5小程序制作搭建,贵池网站营销推广欢迎贵池等地区企业咨询
代码如下:
1、只对table设置边框;
style .table-a table{border:1px solid #F00} /* css注释:只对table标签设置红色边框样式 */ /style2、对td设置边框;
style .table-b table td{border:1px solid #F00} /* css注释:只对table td标签设置红色边框样式 */ /style3、对table和td技巧性设置表格边框;
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 注释说明换行排版 */ /style4、对table和td设置背景,实现完美表格边框。
style .table-d table{ background:#F00} .table-d table td{ background:#FFF} /* css注释:设置table背景为红色,td背景为白色 */ /style
总结:
以上四种方式实现table表格边框样式方法,推荐使用第三和第四种方法来解决表格边框样式。希望此html table边框布局方法对大家有帮助并能掌握,平时需要时灵活运用。
下面来个例子,你可以复制到你的编辑器里修改测试
style type="text/css"
table.gridtable {}{
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {}{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {}{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
/style
!-- Table goes in the document BODY --
table class="gridtable"
tr
thInfo Header 1/ththInfo Header 2/ththInfo Header 3/th
/tr
tr
tdText 1A/tdtdText 1B/tdtdText 1C/td
/tr
tr
tdText 2A/tdtdText 2B/tdtdText 2C/td
/tr
/table
CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
1、首先打开vscode编辑器,新建一个html文件,定义一个两行两列的表格,在浏览器打开的效果。
2、然后给表格添加边框,这里给table标签和td标签都设置边框,不过两个标签的边框颜色值不一样。
3、最后可以用width属性给表格设置宽度,用height属性设置单元格的高度,设置好后可以在浏览器看到效果。
指定的table为细边框,把table放在div中即可。
一、首先新建表格,代码如下:
table width="500" border="1" trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td /trtr tdnbsp;/td tdnbsp;/tdtdnbsp;/td/tr/table。
二、在table里加css样式,代码如下:
table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" tr tdnbsp;/tdtdnbsp;/td tdnbsp;/td /tr tr tdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/table。
三、单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间。单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离,border-collapse:collapse表示表格的两边框合并为一条即可。
这是设置的边框,将边框的样式设置为 dashed就行,举个例子:
table{
width: 320px;
height: 320px;
}
tr td{
border:1px dashed #333;
}
可以这样写