html中给table加css,HTML+CSS:曾辉煌一时的
上篇文章介绍了div标签的作用,我们这篇文章主要来看下过气表格标签table的语法与使用。
1)table的曾经
在div没有出现之前,table曾是做网页的中坚力量。记得在开始学网页的时候,div是神马,我不造呀!做网页还用div吗,就只用table就可以了,各种表格嵌套加嵌套,一个网页就拼凑出来了。但table写的布局页面做维护就比较令人头痛欲裂了。因为table是一层一层嵌套,标签量冗余过多。所以修改起来就是动一发而牵全身。维护起来格外麻烦,往往是拆东墙补西墙。所以它后来就慢慢被div所替代。但是在数据列表上还是用table形式来写比较的合理,所以现在table多用于网站后台的表格数据处理中。
2)表格标签table使用
简单的表格由table元素以及一个或多个tr(行标签)、th(表头单元格标签)、td(普通单元格标签)等标签所组成,当然复杂的表格还包括caption(表格标题)、col(定义列)、colgroup(对表格中的列进行组合)、thead(组合表头的内容)tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)等这里我们先简单了解下即可。
定义表格:
创建表行:
创建列(单元格):
(表头)、(表格单元)
注意:默认情况下,每行中的列数是统一的。
比如我们想创建一个姓名、年龄、分数和日期的数据表格,并设置border为1,我们可以使用table来制作。具体的表格代码如下图所示:
在网页中呈现的效果就如下图所示:
3)为表格添加简单样式
这时候有的人就会说了,为什么这个表格看起来这么奇怪,边框都是有空隙的呢?我们只需要给表格添加一些特殊的样式,即可制作一个比较漂亮好看的表格了。添加的样式代码:
在网页中呈现的效果就如下图所示:
现在我们的表格是不是看着比较的清新了,上面的css代码中为表格添加了背景、边框以及去掉了粗的边线。具体的css代码我们会在以后的课程中为大家介绍,大家在这里只需要知道并了解table标签的作用以及使用就可以了。没事可以多用table写一写表格,熟能生巧。
附赠一句经典语录:每天早上,你有两个简单的选择:是睡回笼觉,还是起身追逐 梦想 。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。
举报/反馈
html中给table加css,HTML+CSS:曾辉煌一时的相关推荐
- webpack中的style-resources-loader加载全局css变量
我们在项目中经常会遇到这种场景,抽离了一些公用的样式,并且还会定义一些变量,比如:variables , mixins , function,之前都是在每个样式文件中手动的@import导入.styl ...
- html中div怎么加内边框,css怎么加内边框?
css怎么加内边框?下面本篇文章就来给大家介绍一下使用css加内边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以使用border属性配合box-sizin ...
- 在html中怎么写加起来的,css可以在html里面写吗?
css可以在html里面写吗?答案是可以的.那么如何在HTML中写CSS?下面给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 下面我们来看一下在HTML中写css的方 ...
- html中给图片加边框带,CSS如何给图片加边框效果?
直接粘贴到BODY里面去事实 style="BORDER-RIGHT: #eeeeee 3px solid; BORDER-TOP: #eeeeee 3px solid; BORDER-LE ...
- 怎么在css中加横线分层,CSS分层
为什么要分层? SMACSS BEM SUIT ACSS 原因 CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理 大量的样式,覆盖.权重和很多!importa ...
- html中表格布局还是div布局,Table布局 VS Div+CSS布局,选哪个?
Table布局 和 Div+CSS布局的争论,过了7-8年了,今天看到一篇文章<为什么我们不建议用Table布局>,又想发表下自己的见解,供初学 <为什么我们不建议用Table布局& ...
- html给按钮加颜色代码,css按钮属性 html中按钮的字体颜色怎么设置?
css 属性设置input 中type为button 的属性 css中什么属性可以控制按钮的形状 1.dispaly 适用于css1和css2,用于设置目标对象是否及如何显示.该属性的常用值为none ...
- html中加下划虚线,CSS虚线下划线及虚线列表教程
1.CSS边框虚线 这里通过边框属性的虚线边框border控制虚线.以下配置的css 高度(css height)与css 宽度(css width)为350像素是为了便于观察迟疑演示 别的意义. 一 ...
- html中井号的作用,html5 css选择器 井号, 句点的区别
一.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成: 1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响: 2.属性(如实例 ...
最新文章
- java泛型解析(转)
- 【KMP】重复子串(ybtoj KMP-2)
- centos7如何安装cloud-init
- 人名和成绩一起排序_EXCEL基础知识——排序功能的使用
- InnoSQL/MySQL并行复制的实现与配置
- 蓝桥杯BASIC-28 基础练习 Huffuman树
- Android studio毕设制作液体动画Animation(毕业设计2048小游戏)
- excel转置怎么操作_EXCEL的矩阵运算
- 计算机入职规划,入职后的工作生涯规划范文
- 手机qq怎么添加相册表情包_手机qq怎么制作表情包配文字
- Nature、Science、Cell、Plos系列顶级学术杂志解析
- 使用selenium自动登录126/163邮箱并自动发送邮件
- i7 13700k和i7 12700k差距
- IEEE754的理解归纳
- 中国保险中介行业市场规模调研及投资可行性研究报告2022-2027年
- Java 实现视频时间维度剪切 | Java工具类
- Intel® Xeon® Processor Scalable Family Technical Overview(转译)
- 惠普硬盘测试工具_超好用的电脑硬件检测工具
- Mysql之常见可视化管理工具
- java hadoop mahout_hadoop 之Mahout 数据挖掘