HTML中正确设置表格table边框border的三种办法

2022-12-27 09:13| 来源: 网络整理| 查看: 265

如何实现单线边框

一、导入

table表格添加边框后，它的默认效果如下：

table { width: 400px; } table, table td, table th { border: 1px solid #000000; }

二、解决方案（3种方法）

【方法一】

核心思想：

1、设置BORDER=0 ；

2、再通过CSS，给Table加上1px的border-top,border-left；

3、然后再设置所有的td的border-right,border-bottom；

css代码：

table { border-right: 1px solid #000000; border-bottom: 1px solid #000000; text-align: center; } table th { border-left: 1px solid #000000; border-top: 1px solid #000000; } table td { border-left: 1px solid #000000; border-top: 1px solid #000000; }

html代码：

姓名科目成绩操作小王高数 98 删除小深高数 86 删除小濛高数 65 删除

效果图：

【方法二】

核心思想：

1、给table设置css为border-collapse: collapse

2、设置所有td及th的css为border: 1px solid #000000;

css代码：

table { width: 400px; margin: 0 auto; border: 1px solid #000000; border-collapse: collapse; } th, td { border: 1px solid #000000; text-align: center; }

html代码：

姓名科目成绩操作小王高数 98 删除小深高数 86 删除小濛高数 65 删除

效果图:

【方法三】

核心思想：

1、将table的属性设置为：BORDER=0 、cellspacing=1 ；

2、设置table的背景色为即你要设置的table的边框颜色；

3、设置所有td背景色为#ffffff白色；

css代码

table { background-color: black; text-align: center; } table th { background-color: #ffffff; } table td { background-color: #ffffff; }

html代码：

姓名科目成绩操作小王高数 98 删除小深高数 86 删除小濛高数 65 删除

效果图:

【表格属性小结】

属性名属性值描述 align left、center、right 规定表格相对周围元素的对齐方式 border 1或0

规定表格是否有边框默认无边框

border="1"表示有边框，意思给表格每一格加上1像素边框

border="0"表示无边框

cellspacing 像素值规定单元格之间的空白，默认2px cellpadding 像素值规定单元边沿与其内容之间的空白区域，默认1px width 像素值或百分比规定表格的宽度

【本文地址】

公司简介

联系我们