Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >table如何设置边框4*16_html设置表格边框

table如何设置边框4*16_html设置表格边框

作者头像
全栈程序员站长
发布于 2022-11-05 03:03:07
发布于 2022-11-05 03:03:07
4.1K00
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

table如何设置边框:

1.通过table标签的属性来设置,border=”1″ 边框设置为1,cellspacing=”0″ 单元格间距设置为0.

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<table border="1" cellspacing="0"></table>,效果如图

2.通过css样式设置,而且用css可以自动设置边框的粗细、颜色等。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
table{
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-collapse: collapse; /*设置单元格的边框合并为1*/
}
td{
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
}

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  table td{
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
  }
  table tr:first-child td{
    border-top: 1px solid #000000;
  }
  table tr td:first-child{
    border-left: 1px solid #000000;
  }

表格的隔行变色:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
table tr:nth-child(odd){background:#F4F4F4;} //奇数
table tr:nth-child(even){color:#C00;} //偶数

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/191613.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年9月19日 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
表格行与列边框样式处理的原理分析及实战应用
导语: table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己意愿渲染冲突边框。在这篇文章中都有
韩宇波
2017/10/30
5.2K6
表格行与列边框样式处理的原理分析及实战应用
表格列的hover状态与选中状态
组织表格列的交互状态一直是很头疼的事情,他不像行那样有天然的tr包裹可控,只有一个虚无缥缈的col元素可以操作,而且原生的col样式在操作的时候也是有各种坑。
练小习
2018/01/15
3K0
gridview属性_GridView
GridView在生成HTML代码的时候会自动加上style=”border-collapse:collapse;”以及border=1,rules=”all”这些属性,这些在IE下都没什么影响,但是在FF下就会影响显示,style=”border-collapse:collapse;”;是由于设置了CellSpacing=”0″产生的,当设置CellSpacing=”1″后就没有,可以去掉style=”border-collapse:collapse;”;默认情况下CellSpacing=”0″,所以默认情况下会有style=”border-collapse:collapse;”这个属性生成。GridLines=”Both”会带来border=1,rules=all这两个属性,设置GridLines=”None”后border=0,rules属性则不会出现。
全栈程序员站长
2022/11/08
1.6K0
一篇文章带你了解CSS Pseudo-classes(伪类 )
CSS伪类选择器根据其他条件匹配组件,而不一定由文档树定义。CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。
前端进阶者
2021/01/22
2.1K0
「趣学前端」优雅又精致,来看看别人家的表格样式是怎样实现
我身边一些非互联网技术从业的朋友,偶尔看我转发到朋友圈的文章,会表示出一定的兴趣。前段时间,有朋友问我公众号的问题,所以我来了灵感,准备写一个趣学前端系列,适用于零基础、新手前端或者想把编程当做兴趣培养的人。
叶一一
2023/03/31
1.7K0
「趣学前端」优雅又精致,来看看别人家的表格样式是怎样实现
请不要忘了,有一个值叫 inherit
该文章展示了一个简单的表格,表格中包含三个单元格,每个单元格中包含一个标题和一段描述文字。表格的样式使用了CSS样式表进行设置,包括单元格的边框、背景颜色、字体颜色和字号等。在表格中,还使用了一些伪元素来添加一些特效,如阴影和渐变等。此外,文章还介绍了一些常用的CSS属性,如float、position、display和flex等,以及如何使用它们来布局和样式表格和其他元素。
练小习
2017/12/29
1.1K0
请不要忘了,有一个值叫 inherit
全栈之前端 | 10.CSS3基础知识之表单表格学习
通过本章将学习如下表单以及表格相关样式属性,您可以改变表单(input、form)或者(table)表格的样式等。
全栈工程师修炼指南
2024/01/15
3080
全栈之前端 | 10.CSS3基础知识之表单表格学习
CSS重要的盒子模型
新浪导航栏的核心就是因为里面的字数不一样多,所以我们不方便给宽度,还是给padding ,撑开盒子的。
乐心湖
2020/07/31
1.1K0
CSS重要的盒子模型
一篇文章带你了解HTML表格及其主要属性介绍
标签定义表中的每一行使用。使用标签定义表头。默认情况下,表标题是粗体和居中的。一个表的数据/单元使用 标签定义。
前端皮皮
2020/11/26
2.5K0
一篇文章带你了解HTML表格及其主要属性介绍
常用的 CSS 技巧
你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:
ACK
2020/01/14
7320
表格属性及合并
html中我们学习了表格,到网页中只有文字,并不像平时网页中见到的标题头带有背景和边框线的表格,今天我们就学习表格的样式如何设置
呆呆
2021/09/29
1.4K0
两款非常漂亮的markdown格式css样式
如果你用了laravel 框架 你需要在 resources/views/vendor/mail/html/themes声明文件.css例如repayment.css
美团骑手
2021/01/18
9K0
手把手教你使用Java开发在线生成pdf文档
在实际的业务开发的时候,研发人员往往会碰到很多这样的一些场景,需要提供相关的电子凭证信息给用户,例如网银/支付宝/微信购物支付的电子发票、订单的库存打印单、各种电子签署合同等等,以方便用户查看、打印或者下载。
Java极客技术
2022/12/02
1.9K0
手把手教你使用Java开发在线生成pdf文档
Html中table的属性总结
border= “1”:给整个表格(包括表格及每一个单元格)加上1像素的黑色边框, 其等同于css中的: table,table tr th, table tr td { border:1px solid #0094ff; }
用户2323866
2021/06/24
1.9K0
【Web前端】CSS 样式化表格
表格在网页设计中扮演了重要角色,尤其是在展示数据和信息时。尽管 HTML 表格提供了结构化的数据展示,但要使其看起来既美观又实用,CSS 样式化至关重要。
一条晒干的咸鱼
2024/11/19
1610
【Web前端】CSS 样式化表格
PHP生成Mysql数据字典
<?php /** * 生成mysql数据字典 */ //配置数据库 $dbserver = "192.168.1.12"; $dbusername = "erp"; $dbpassword =
用户7657330
2020/08/14
1.6K0
Asp.net使用Table标签填充数据库数据
在网站的开发过程中,将数据以表格的形式填充至页面中时一般会选择Asp.net自带的GridView控件,但如果我们需要简介的框线表格填充数据时(如打印预览),最简单的方法就是使用html中的Table标签来自己绘制一个表格,这样的好处是简单明了,可以自由调整数据的分类,进行表盒横向与纵向的单元格合并,下面就为大家讲解一下将数据库数据填充至Table标签构成的表格的具体过程。
code2roc
2023/07/19
3240
Asp.net使用Table标签填充数据库数据
WEB入门 四 CSS样式表深入
上一章学习了CSS的语法基础及文字效果,学习了3种选择器,选择器是CSS中非常重要的概念,本章将深入学习选择器的知识,主要包括选择器的集体声明和嵌套。面向对象编程语言中有为了实现代码的重用有继承的特性,而CSS中也有可以使用继承的特性实现代码的重用。
张哥编程
2024/12/17
2010
【HTML/CSS篇】牛客题库练习
【HTML/CSS】牛客题库练习 1. HTML 1.1 FED1-表单类型 ⭐方法1 🌸注意 1.2 FED2-表格结构 ⭐方法1 🌸注意 1.3 FED3-图像标签属性 ⭐方法1 🌸注意 1.4 FED4-新窗口打开文档 ⭐方法1 🌸注意 1.5 FED5-自定义列表 ⭐方法1 🌸注意 1.6 FED73-加粗字体 ⭐方法1 🌸注意 1.7 FED6-语义化标签 ⭐方法1 🌸注意 1.8 FED7- 音频媒体标签属性 ⭐方法1 🌸注意 1.9 FED7- 音频媒体标签属性 ⭐方法1 🌸注意 2. CS
司六米希
2022/11/15
1.2K0
【HTML/CSS篇】牛客题库练习
常用样式制作思路
table设置固定宽度,table-layout 为fixed——由单元格的宽度决定表格的宽度,不受内容的影响   单元格设置固定宽度,剩下的单元格实现自适应
超然
2018/08/03
4900
常用样式制作思路
相关推荐
表格行与列边框样式处理的原理分析及实战应用
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验