table表格的两个实现方法(怎样消除内部边框的间距)

在用table写表格的时候我们初学者容易写成这样:

而要写成下面这样:

方法一:
代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">table {width:500px;height: 200px;border: 1px solid red;border-collapse: collapse;}table tr td{border: 1px solid red;}</style>
</head>
<body><table><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
</body>
</html>

可以显示这个效果是这个效果的功劳 border-collapse: collapse;
下面说一下这个属性有什么作用:

为表格设置合并边框模型：

方法二:
代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title><style type="text/css">table {width:500px;height: 200px;}</style>
</head>
<body><table style="background-color:red" ><tr style="background-color:white"><td></td><td></td></tr><tr style="background-color:white"><td></td><td></td></tr><tr style="background-color:white"><td></td><td></td></tr></table>
</body>
</html>

方法三:
代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title><style type="text/css">table {width:500px;height: 200px;}</style>
</head>
<body><table bgcolor="red" ><tr bgcolor="white"><td></td><td></td></tr><tr bgcolor="white"><td></td><td></td></tr><tr bgcolor="white"><td></td><td></td></tr></table>
</body>
</html>

方法四:
代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title><style type="text/css">table {width:500px;height: 200px;background-color:red;}table tr{background-color:white;}</style>
</head><body><table><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
</body>
</html>

方法二三四的区别于联系：
简单说一下:

是内联样式和css中写法上的区别，在html中可以通过style="" 给标签添加css样式，也可以写在css中控制标签

详细介绍请看链接:
https://blog.csdn.net/qq_43290288/article/details/102924012

table表格的两个实现方法(怎样消除内部边框的间距)相关推荐

html/css笔记 table表格文本垂直水平居中对齐方法
简介: 平时工作中开发经常会遇到html网页样式设计,这里记录一下笔记方便后期查看,也顺便给其他人提供一个参考 HTML 文本垂直水平居中对齐方法(一):css样式水平居中 text-align 应 ...
vue中Table表格转为Excel文件的方法
首先要下载file-saver插件.xlsx插件和xlsx-style插件 npm install file-saver npm install xlsx npm install xlsx-style ...
android studio table居中代码_html table表格标签内容如何居中显示？表格的align属性的用法介绍...
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...
vue 利用element的Table 表格实现自制的穿梭框（可以高度自定义）
1. 先看效果图: 2. 其实可以从最后的效果图看出这个自制的穿梭框,只是由两个table表格和两个按钮组成,只需要写其中逻辑事件即可完成穿梭框的效果,其中的事件主要分为"选中", ...
wps带阴影的边框怎么设置_怎么把表格加框_win7系统下wps设置阴影边框的方法
2017-06-20 09:31:11 Excel一款试算表软件,编辑表格或数据都会用到,一些细心的Win7系统用户发现在Excel表格中设置了分页符的文档看起来就比较难看,Excel的分页符线框是粗 ...
html table表格标签内容如何居中显示？表格的align属性的用法介绍
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...
普通table表格样式大全
普通table表格样式及代码大全(全) 普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse&q ...
普通table表格样式及代码大全(全)(一)
普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...
普通table表格样式及代码大全(全)
普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...

table表格的两个实现方法(怎样消除内部边框的间距)

table表格的两个实现方法(怎样消除内部边框的间距)相关推荐

最新文章

热门文章