Css基本样式表格的详细介绍

这篇文章主要为大家css基本样式表格的详细介绍,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

a.Css表格属性可以帮助我们极大地改善表格的外观

b.表格边框

            姓名         年龄         性别     
            小王         20         男     
            小王         20         男     
            小王         20         男

姓名	年龄	性别
小王	20	男
小王	20	男
小王	20	男

这样可以生成一个没有边框效果的表格

立即学习“前端免费学习笔记（深入）”；

此时可以给表格添加一个边框

但是这种写法并不能应用于所有的table当中

因此可以选择使用Css样式作为一种更好的方式

#tb{ border: 1px solid blue;}

这时可以看到表格最外层的蓝色的外边框

可以设置表格内部：

#tb,tr,th,td{    border: 1px solid blue;}

这里用到了分组选择器。即一个id选择器和3个元素选择器组合在一起，之间用逗号隔开

c.折叠边框

在上面的表格中显示的是双边框

这样显然是不合理的

可以把双边框合成一条线

#tb,tr,th,td{    border: 1px solid blue;    border-collapse: collapse;}

d.表格宽高

#tb{    width: 400px;    height: 400px;    border-collapse: collapse;}#tb,tr,th,td{    border: 1px solid blue;}

e.表格文本对齐

#tb{    width: 400px;    height: 400px;    border-collapse: collapse;}#tb,tr,th,td{    border: 1px solid blue;    text-align:center;}

f.表格内边距

g.表格颜色

#tb{    width: 400px;    height: 400px;    border-collapse: collapse;}#tb,tr,th,td{    border: 1px solid blue;    text-align:center;    background-color: aqua;}

以上就是Css基本样式表格的详细介绍的详细内容，更多请关注创想鸟其它相关文章！

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

css

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

407.1K 文章

0 评论

1 粉丝

这个人很懒，什么都没有留下～

Css基本样式列表的详细介绍

上一篇 2025年12月23日 21:40:35

Css基本样式综合设计：表格的制作的详细介绍

下一篇 2025年12月23日 21:40:44

Css基本样式综合设计：表格的制作的详细介绍

这篇文章主要为大家深度剖析css基本样式综合设计：表格的制作的详细介绍的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下姓名年龄性别小王 20 男小王 20 男小王 20 男小王 20 男 #tb{ border-collapse: collapse; width: 500p…

程序猿
好文分享 2025年12月23日
0000
Css基本样式列表的详细介绍

这篇文章主要为大家详细介绍了css基本样式列表,具有一定的参考价值，感兴趣的小伙伴们可以参考一下一、CSS列表属性允许放置、改变列表标志，或者将图像作为列表项标志二、属性 list-style 简写列表项 list-style-image 列表项图像立即学习…

程序猿
好文分享 2025年12月23日
0000
Css基本样式链接的详细介绍

这篇文章主要为大家详细介绍了css基本样式链接,具有一定的参考价值，感兴趣的小伙伴们可以参考一下一、Css链接的四种状态 1.a:link 普通的、未被访问的链接 2.a:visited 用户已访问的链接 3.a:hover 鼠标指针位于链接的上方…

程序猿
好文分享 2025年12月23日
0000
Css基本样式字体的详细介绍

一、css字体属性定义文本的字体系列、大小、加粗、风格和变形二、属性 font-family 设置字体系列 font-size 设置字体尺寸 font-style 设置字体风格立即学习“前端免费学习笔记（深入）”； fon…

程序猿
好文分享 2025年12月23日
0000
CSS中的绝对定位与相对定位详细介绍

层级关系为：效果图：为改变参照物（橘色框）后的效果层级关系为：效果图：参照物为最顶级的元素情况。层级关系为：效果图：立即学习“前端免费学习笔记（深入）”；仅使用margin属性布局绝对定位元素的情况此情况，margin-bottom 和margin-right的值不再对文档流中的元素产…

程序猿
2025年12月23日 • 好文分享
0000
好文分享

CSS中left属性详细介绍

定义和用法 left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。注释：如果 “position” 属性的值为 “static”，那么设置 “left” 属性不会产生任何效果。说明对于…

程序猿
2025年12月23日
0000
必看高效整洁的CSS代码原则

1.使用全局reset不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：*{ margin:0; padding:0; }　　这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内…

程序猿
好文分享 2025年12月23日
0000
详解为Drupal 7网站添加自定义CSS的步骤

　　当我们在逛聊天室或者论坛时，经常会碰到有人提问怎么向 drupal 网站中添加自定义css —— 通常来讲，通过 drupal 主题来进行添加最好。不过在某些情况下，因为环境限制或网站管理员没有访问主题文件的权限，而不得不考虑其它办法。　　今天本文就来介绍一下，如何使用CSS Injecto…

程序猿
2025年12月23日 • 好文分享
0000
详解使用CSS气泡框实现方法

气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气…

程序猿
2025年12月23日 • 好文分享
0000
css更改input单选和多选的样式详解

在项目开发中我们经常会遇到需要更改input单选和多选样式的情况，今天就给大家介绍一种简单改变input单选和多选样式的办法。在这之前先简单介绍一下:before伪类 :before 选择器向选定的元素前插入内容。使用content 属性来指定要插入的内容（content是必须的哦）。相信这并不…

程序猿
好文分享 2025年12月23日
0000
关于css选择器知识详解

导入外部css样式表的方法使用link标签导入外部css样式表在样式表中import(导入)外部样式表@import url(“/crazy-html5/06css/css/demo01.css”); 使用内部样式表内部样式表只能作用于某一个网页，定义方式为在head头部添加style标签，在…

程序猿
好文分享 2025年12月23日
0000
如何使用CSS实现分隔线

下面是几种简单实现分隔线的方法，个人比较喜欢第二种，我也给出了最后第五种比较2的写法，请大家拍砖，或者提供其他好的方法。单个标签实现分隔线： .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-lef…

程序猿
好文分享 2025年12月23日
0000
好文分享

CSS中hight属性的详解

目录结构： contents structure [-] hight属性值类型一览表 valuedescribtionauto默认length绝对长度%相对长度inherit继承这里笔者主要介绍相对长度的用法，关于绝对长度读者可以参考CSS尺寸单位px % em rem详解获取更多信息。 hei…

程序猿
2025年12月23日
0000
css3新特性应用之视觉效果详细解读

目录 padding 背景与边框第一部分背景与边框第二部分形状视觉效果字体排印立即学习“前端免费学习笔记（深入）”；用户体验结构与布局过渡与动画源码下载一、单侧阴影 box-shadow属性的应用，格式：h-shadow v-shadow blur spread color in…

程序猿
2025年12月23日 • 好文分享
0000
CSS盒子模型知识总结

本章内容：知识点一：盒子模型：Box Model，由有内容（element content）、填充（padding）、边框（border）、边界（margin）这四个组成部分，这四个部分都包含有top/right/bottom/left四个组成部分。从w3school上下载的图片，以图来看看盒…

程序猿
2025年12月23日 • 好文分享
0000
如何在css中让背景图片拉伸填充避免重复显示

如何让背景图片拉伸填充，这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。比如一个容器（body,p,span）中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。所以实际的结果是只能重复显示，所以出现了repeat,repeat-x,repeat-y,no-r…

程序猿
好文分享 2025年12月23日
0000
好文分享

css中padding填充详解

语法： padding：[ | ]{1,4} 默认值：看每个独立属性适用于：所有元素，除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外继承性：无动画性：是…

程序猿
2025年12月23日
0000
用css3简单的制作3d半透明立方体图片详解

new document //css部分html{font-size:62.5%;}img{width:300px;height:300px;} #stage{//搭建一个舞台margin-top:200px;margin-left:auto;margin-right:auto;width:300p…

程序猿
好文分享 2025年12月23日
0000
好文分享

详细介绍css常用效果总结

font: 14px/26.6px ‘Microsoft Yahei’, ‘Trebuchet MS’, Georgia, ‘Times New Roman’, Times, sans-sercss有不少常用的效果，你在平时浏览…

程序猿
2025年12月23日
0000
详解Css常用操作图片方法

这篇文章主要为大家详解Css常用操作图片方法的相关资料,需要的朋友可以参考下 body{ background-color: #0078b3;} .image{ border: 1px solid darkgray; width: auto; height: auto; float: left; t…

程序猿
好文分享 2025年12月23日
0000

发表回复

登录后才能评论

Css基本样式表格的详细介绍

关于作者

相关推荐

发表回复