html怎么设置表格边框

html设置表格边框的方法:首先创建一个HTML示例文件;然后通过table定义一张表格;最后通过添加css代码为“tr td,th{border:1px solid red;}”来设置表格边框即可。

html怎么设置表格边框

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

准备一段表格的html代码,通过该段代码,显示浏览器对table标签的默认渲染。代码如下:

col_1 col_2 col_3
value_1 value_2 value_3

bbb66c9a9e6bcd39966b210ed8565b4.png

为table设置内边框,可以看出table标签的默认样式是没有边框的。现在我们为table添加一个边框,只需要在style标签添加如下代码:

立即学习“前端免费学习笔记(深入)”;

 

tr td,th{border:1px solid red;}

5b35f2533fb061c8201267cb273950c.png

8d4b4247a891e5a0a4833939c2b9ffd.png

取消单元格间的空白,上一步骤中, 虽然设置行内的边框,但是单元格之间的空白往往不是我们想要的,所以我们可以通过下面的代码设置:

tr td,th{border:1px solid red;}/*取消table标签中的单元格空白*/.mt{ border-collapse:collapse;}

92d9e8318081e3a7602d16b65aaeb77.png

3ef205a739a696fe55a998d9e4c1575.png

为表格设置外边框,代码如下:

.mt{ border-collapse:collapse; border:1px solid black; /*设置表格的外边框*/}

2b39d9ed6604df587d033c98111d7d0.png

设置行边框,相对对于单元格边框设置,行边框的设置更加常见。我们只需要使用如下代码

  .mt{ border-collapse:collapse; border:1px solid black;}/*设置行边框*/.mt tr{border-bottom:1px solid black;}

0b17e9462201f363552bc8bed373127.png

103a27232a1a365658f8152be190fae.png

【推荐学习:HTML视频教程】

以上就是html怎么设置表格边框的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1549744.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 20:36:03
下一篇 2025年12月21日 20:36:16

相关推荐

  • html如何转换为pdf

    html转换为pdf的方法:1、使用【html2canvas+jsPDF】是一种专门在前端js生成pdf的方法;2、iText方法生成的pdf质量会更高;3、wkhtmltopdf软件生成pdf支持多种方式。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 html转换为p…

    2025年12月21日
    000
  • html怎么设置透明度

    html设置透明度的方法:1、通过“background-color:rgba(0,152,50,0.7);”设置不透明度;2、使用半透明粒子图片或者渐变半透明PNG图片;3、使用透明度以及背景颜色或者背景图片来实现。 本文操作环境:windows7系统、HTML5&&CSS3版、D…

    2025年12月21日 好文分享
    000
  • html格式如何转doc

    html格式转doc的方法:首先点击网页选择“网页另存为”,将HTML网页文件保存至电脑指定位置;然后从WORD文档内打开文件,文件类型中选择“所有网页”;最后将文件保存为doc或者docx格式即可。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 html格式转doc的方…

    2025年12月21日 好文分享
    000
  • html如何改变字体大小

    html改变字体大小的方法:1、在body标签中添加文字,并设置css样式;2、用“font-size”属性设置字体大小,这时“演示文本”字体将会变大。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 html改变字体大小的方法: 1、新建html文件,在body标签中添加…

    2025年12月21日
    000
  • html调用js方法有哪些

    html调用js方法:1、点击调用JavaScript,代码为【$(document).click(function ()】;2、直接调用JavaScript,代码为【$(document).ready(function ()】。 本教程操作环境:windows7系统、html5版,DELL G3电…

    2025年12月21日
    000
  • html如何加注释

    html加注释的方法:1、单行注释,格式为【..】;2、多行注释,格式为【】;3、条件注释,格式为【..】。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 html加注释的方法: 1、单行注释 html 注释标签的详细介绍 说明:通过注释一看就知道前面是文章的标题。 立即…

    2025年12月21日
    000
  • html怎么设置文字大小

    html设置文字大小的方法:1、通过font-size后面加px值的方式设置文字大小;2、通过inherit继承父元素的字体大小;3、通过固定的值设置文字大小,如“xx-smal”。 本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。 方法: 第一种:…

    2025年12月21日 好文分享
    000
  • html如何使用不换行标签

    html使用不换行标签的方法是用nobr标签来实现,语法为【内容】,不换行内容放入【】与【】之间即可。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 html使用不换行标签的方法: 可以用nobr标签来实现。 nobr语法 立即学习“前端免费学习笔记(深入)”; 内容 不…

    2025年12月21日
    000
  • html li怎么去掉点

    html li去掉点的方法:1、使用“list-style:none”方式;2、通过“list-style-type:none”去除;3、在li标签里面直接加入列表样式;4、通过“.a1{list-style-type:none;}”去除。 本文操作环境:windows7系统、HTML5&&…

    2025年12月21日 好文分享
    000
  • html显示乱码怎么办

    html显示乱码的解决办法是在head节点加入【】标签,把字符声明为【UTF-8】,代码为【】。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 html显示乱码的解决办法: 在head节点加入标签,把字符声明为UTF-8 或者简写: 立即学习“前端免费学习笔记(深入)”;…

    2025年12月21日
    000
  • 如何将html转换成excel

    将html转换成excel的方法:1、打开文档,点击文件;2、在弹出来的窗口中选择打开“另存为”;3、点击打开“保存类型”,然后选择“Excel工作薄”即可。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 将html转换成excel的方法: 一、打开需要转换的htm文档,…

    2025年12月21日 好文分享
    000
  • html怎么添加图片

    html添加图片的方法:首先打开编辑器,新建img标签;然后给img标签的属性【src添加一张图片的地址】;最后把html文件拖到浏览器中即可。 本教程操作环境:windows7系统、Sublime Text 3版,DELL G3电脑。 html添加图片的方法: 点击打开html编辑器sublime…

    2025年12月21日 好文分享
    000
  • html页面如何实现自动跳转

    html页面实现自动跳转的方法:1、使用meta标签,负责提供文档的元信息;2、使用header函数,可以重定向URL;3、使用JavaScript,可以做出功能非常强大的程序脚本。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 html页面实现自动跳转的方法: 方法一:…

    2025年12月21日
    000
  • html如何隐藏元素

    html隐藏元素的方法:1、利用定位隐藏元素;2、opacity设置元素透明度为0;3、visibility设置元素是否可见。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 html隐藏元素的方法: 1、利用定位隐藏元素。     优点:只要通过将元素的left和top设…

    2025年12月21日
    000
  • html如何删除元素

    html删除元素的方法:1、找到被删元素的父元素,通过父元素将其需要删除的子元素删除;2、使用JQuery,直接找到并删除。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 html删除元素的方法: 1、使用DOM对象 首先需要找到被删元素的父元素,通过父元素将其需要删除的…

    2025年12月21日
    000
  • 如何将html转换成jsp

    将html转换成jsp的方法:首先新建文档,右键html文件弹出列表;然后在显示的列表,指出的名称,弹出窗口;最后把html改成jsp,就把html文件转换成jsp文件了。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 将html转换成jsp的方法: 1、先准备一个htm…

    2025年12月21日 好文分享
    000
  • html如何清除浮动

    html清除浮动的方法:1、给浮动元素的父级高度和宽度;2、父级元素加上【overflow:hidden】;3、给兄弟元素加一个【clear:both】;4、利用伪类去除浮动。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 html清除浮动的方法: 方法一:(给父级元素宽…

    2025年12月21日 好文分享
    000
  • html如何设置图片位置

    html设置图片位置的方法:1、新建文件,在head标签中设置输入style标签;2、设置body的样式,给body加一张图片;3、在浏览器就会看到图片是在浏览器的右上方的。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 html设置图片位置的方法: 1、可以使用back…

    2025年12月21日 好文分享
    000
  • html如何设置按钮大小

    html设置按钮大小的方法是可直接给input元素添加宽、高,具体代码如【】。 本教程操作环境:windows7系统、html5版,DELL G3电脑。 html设置按钮大小的方法: html中设置按钮的大小:可直接给input元素添加宽、高,具体代码如下: 下面是未设置input按钮大小和设置了按…

    2025年12月21日
    000
  • html隐藏属性如何使用

    html隐藏属性的使用方法:1、使用disabled禁用input元素;2、readonly规定输入字段是否为只读;3、hidden属性值为true时,元素在界面上处于隐藏状态;4、display值为none表示此元素不会被显示。 本教程操作环境:windows7系统、html5版,DELL G3电…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信