HTML中CSS 添加左缩进和表格边框说明（去掉左右下边框）

最新推荐文章于 2024-08-07 02:17:51 发布
最新推荐文章于 2024-08-07 02:17:51 发布
阅读量1w 收藏
点赞数
分类专栏： HTML 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/drbing/article/details/52096430
版权
1、在HTML中加自定义的格式
（第一段代码）
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>*****表</title>
  <STYLE>
      BODY  {  background-color : #FFFFFF;  font-family : Verdana;  font-size : 10pt;color : Black;}
      TR,TD{  font-family : Verdana;  font-size : 10pt;  color : Black;}
 #noborder{border:0;} 
 #topborder{border-left:none;border-right:none; border-bottom:none;}
 leftindent2{margin-left:2em;}
 leftindent5{margin-left:5em;}
  </STYLE>                   
 </head>
其中，<style></style>标签中自定义了BODY，TR,TD格式，以及自定义noborder（没有周围边框），topborder（只有顶边框），leftindent2（左缩进两个字符），leftindent5（左缩进5个字符），另外在引用时，body，TR,TD，leftindent2，leftindent5直接以对应标签来引用（<body></body>    <tr></tr>   <td></td>   <leftindent2></leftindent2>   <leftindent5></leftindent5>），标签当中的内容会以标签设置好的格式显示。
2、引用设置好的标签
（第二段代码）
<body>  
  <H1 align=center><font size="5">*******表</font></h1>
  <P>***元</P>  
  <table width="100%" border="1" style="BORDER-COLLAPSE: collapse" bordercolorlight="#000000" bordercolordark="#000000" id="noborder">      


///注：首先表是分外面大表的边框和各个单元格的边框。当border="1"时，大表和里面各个单元格的边框都显示；border="0"时，大表和里面各个单元格的边框都不显示；border>"1"时，只有外面大表的边框变粗，单元格边框不变。style="BORDER-COLLAPSE: collapse"意思是各个单元格边框与外面边框和其他单元格边框进行覆盖（即只显示一条线（两个边框线显示一条，一条与无边框显示一条，无边框与无边框显示无边框）），而如果是把style="BORDER-COLLAPSE: collapse"换成cellspacing="0"，那么是相邻边框进行重叠（两个边框线显示一条加粗线，一条与无边框显示一条，无边框与无边框显示无边框）。id="noborder"，这里是引用上面定义好的无边框线，因为是在table标签中出现，这样的话就会把大表的外边框去掉，但单元格边框是不变的，这样由于有style="BORDER-COLLAPSE: collapse"照样会显示线条的（但其实已经把外边框去掉了），另外当定义那里用的是#noborder则引用时写id="noborder"；而当 定义那里用的是 .noborder则引用时写calss="noborder"；当没有点和#号时，用<noborder>内容</noborder>。/
  
<tr>
  <td align="center">列1</td>
  <td align="center">列2</td>
  <td align="center">列3</td>
  <td align="center">列4</td>
  <td align="center">列5</td>
  </tr>
  <tr>
  <td align="left">一、*******行</td>
  <td align="center">1</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td align="left">二、*******行</td>
  <td align="center">2</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td align="left">三、*******行</td>
  <td align="center">3</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td><leftindent2>1.*******二行</leftindent2></td>     ///注：在这里缩进用的是<leftindent2></leftindent2>，因为前面定义的是没有加点和#号，如果加的话后面即使用id， class调用好像也不行，不知道为什么///
  <td align="center">4</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td><leftindent2>2.*******二行</leftindent2></td>
  <td align="center">5</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td><leftindent2>3.*******二行</leftindent2></td>
  <td align="center">6</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td><leftindent2>4.*******二行</leftindent2></td>
  <td align="center">7</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td><leftindent2>*******二行</leftindent2></td>
  <td align="center">8</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td><leftindent5>*******三行</leftindent5></td>
  <td align="center">9</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td align="left">四、*******行</td>
  <td align="center">10</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td><leftindent2>1.*******二行</leftindent2></td>
  <td align="center">11</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td><leftindent2>2.*******二行</leftindent2></td>
  <td align="center">12</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td><leftindent2>3.*******二行</leftindent2></td>
  <td align="center">13</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td><leftindent2>4.*******二行</leftindent2></td>
  <td align="center">14</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td align="left">五、*******行</td>
  <td align="center">15</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td align="left">六、*******行</td>
  <td align="center">16</td>
  <td align="center"></td>
  <td align="center"></td>
  <td align="center"></td>
  </tr>
  <tr>
  <td colspan="5" align="left" id="topborder">补充说明：</td>    ///注：只保留上边框
  </tr>
  <tr>
  <td colspan="5" align="left" id="noborder">1.末尾行</td>      ///注：去掉所有边框
  </tr>
  <tr>
  <td colspan="5" align="left" id="noborder">2.末尾行</td>     ///注：去掉所有边框
  </tr>
  </table>
 </body>
</html>


3、结果：
图片
drbing
关注
专栏目录
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6476
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
HTML 与 CSS
LemonStars的博客
07-13 739
新手所学基础：html与css样式
在html 中 缩进怎么写,html怎么缩进
weixin_32145817的博客
06-03 1万+
html实现缩进效果的方法：首先创建一个HTML示例文件；然后在body中输入一些文本内容；最后通过“text-indent”属性规定文本块中首行文本的缩进即可。本文操作环境：windows7系统、HTML5&&CSS3版，DELL G3电脑html怎么缩进?首先我们先要了解属性text-indent，这个标签就是用来首行缩进的，它的单位是长度单位或百分比.text-indent ...
html怎么居中后再向左缩进,为什么这个HTML元素开始缩进，我怎样才能让它从左边的页边开始？...
weixin_32060671的博客
06-17 351
我有一个HTML元素，它坚持从上面的元素的右端下方开始缩进，我希望它从左页边开始。我怎样才能做到这一点？为什么这个HTML元素开始缩进，我怎样才能让它从左边的页边开始？由于我不明白的原因，例如如果下面的代码中的“Hello”被重复14次的单词“Hello”替换，问题就会消失。我已经将代码降低到了最低限度，并且存在问题。html,body,div,span {vertical-align: base...
HTML中正确设置表格table边框border的三种办法
最新发布
weixin_37087311的博客
08-07 1310
html中如果设置table的border为1px，实际会产生双线，十分不美观，那么在HTML中如何正确设置表格table边框border呢？第一种方法：　　1、将table的属性设置为：BORDER=0 、cellspacing=1 ；　　2、设置table的背景色为即你要设置的table的边框颜色；　　3、设置所有td...
table tr td边框去除
ych0108的博客
10-12 1万+
[code="html"] table{ width:500px; } table tr td{ border-top:#FF0000 solid 1px; width:50%; background-color:#00CC33; text-align:center; line-height:24px;} 1 1 2 2 追加点哈 ...
HTML+CSS实现表格去除上下左右边框详细介绍
乐逍遥
08-25 1万+
表格线常见问题： 去除上边框border-top:none 去除下边框border-bottom:none 去除左边框border-left:none 去除右边框border-right:none 表格边框与表格单元格线的重叠 border-collapse:collapse 嵌套表格与被嵌套表格对不齐的问题 table-layout: fixed border-collapse有两个属性，separate...
CSS-12.css边框属性（border）
别忘了缩进的博客
01-29 6005
在盒子模型中我们通常会给盒子设置边框属性，使之完成某些功能和样式 我们会使用css中的border属性来设置边框 一般会通过连写来设置border，他下面还有width,style,color的属性， 在开发中，我们会使用连写。 写法1：（按照方向） 快捷键：bd+ border: 1px solid #000; 这样的属性设置，四个边框属性值是相同 当然我们也可以分别设置四个边
段落首行缩进2个字符。html表格的背景颜色为白色，没有边框，cellspacing和cellpadding的值都为0
04-07
回答：好的，段落首行...而HTML表格的背景颜色可以通过CSS中的background-color属性设置为白色，同时设置border属性为none来去除边框，将cellspacing和cellpadding属性的值都设置为0可以去除单元格之间和内部的间距。
HTML和CSS常用元素
mjkkhjl的博客
04-13 615
网页设计 网站制作到前端开发 Web 1.0时代指的的网站制作，那时候的页面主要是静态页面，仅供用户浏览，而无法提供用户进行交互（无法与服务器进行数据交互）。 而到了Web 2.0时代，已经从网页制作到了前端开发，以前的网页“三剑客”（Fw、Dw、Fl）已经满足不了我们的需求，所以我们要学习新的技术。 分别是：HTML、CSS、JavaScript也是新“三剑客”。 HTML:超文本标记语言，是一门描述型语言。 CSS：层叠样式表，是控制网页外观的一门技术。 JavaScript：是嵌入HTML的一种脚
HTML结合CSS实现文字左右单侧或同时缩进
闲石观江的博客
03-17 1004
HTML结合CSS实现文字左右单侧或同时缩进。
设置首行缩进 .html
Mr.Xiao的专栏
11-28 1156
〈style type="text/css"〉 〈!-- .style1 { text-indent: 2em} --〉 〈/style〉
vue饿了么--- 一像素边框--border-bottom的实现（伪类加缩放）
qq_22317389的博客
07-18 3831
DPR手机端物理像素是设备像素的两倍，在stylus下定义一个mixin.styl； 在styl中定义一个函数，并且可以传入一个color border-1px($color) position : relative &amp;:after display: block position: absolute left: 0 bottom: 0 ...
边框，首行缩进
m0_73903826的博客
02-09 97
边框，首行缩进
CSS基础-CSS文本
08-18 353
CSS 文本属性可定义文本的外观。 通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。 缩进文本 把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。 CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。 通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该...
html段落缩进怎么设置？
qq_23835463的博客
08-11 9156
在 CSS中 可以用text‐indent段落首行文字缩进。 语法如下： 选择器 {text‐indent:25px} /*代表是首行缩进25个像素*/ text‐indent的值是 数字+单位组成缩进样式 实例： <!DOCTYPE html> <html lang="zh‐cn"> <head> <meta charset="UTF‐8"> <title>text‐indent段落首行文字缩进 xinbiancheng.cn</t
HTML首行缩进两字符
热门推荐
郭大侠的专栏
03-08 9万+
缩进2字符 p{ text-indent:2em;} 善良是你的本性，漂亮是你的天性，聪明是你的优点，贤惠是你的资本，温柔是你的标志，真诚是你的品格，妇女节，提前祝你开心幸福，年轻美丽一辈子！ 温暖三月，春回大地，阳光明媚，绿草青青，整理好思绪，收拾好心情，感受美好生活，品味妇女节精彩，女人就是要对自己好点，节日快乐，祝你永远年轻！
CSS之设置p段落中的文字与页面左侧缩进两个字符!...
friendan的专栏
04-12 5150
p{     padding-left:2em;   /*p段落中的字符与页面左侧缩进两个字符*/ }
使用CSS美化HTML表格：边框设置技巧
在HTML中，表格（Table）是数据展示的重要元素，而通过CSS（层叠样式表）可以对表格进行更细致的样式控制，特别是边框设置。这篇文章主要讲解了如何通过CSS语法来美化HTML表格的边框效果。 首先，对于1px边框的设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值