css中table标签详解(一)
css中table标签详解(一)
什么是table标签,以及table标签的组成?
不叨叨,直接上代码
<table><tr><td></td></tr></table>
我们可以看到table标签的组成是由table tr td 构成的.
其中table指的是整个表格,tr指的是行,td指的是列.
那我们如果要表示三行四列要如何表示呢?
三行肯定要三个tr,四列肯定要四个td,那它们如何嵌套的呢?看代码!
<table><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table>
我们可以看到tr里面要嵌套td,表示的意义也就是第一行中有四个列,第二行中有四个列…所以最终就是四行四列.
我们现在看一下在浏览器上的效果?
我们发现这里面毛都没有,这是因为我们没有给table设置属性.
那我们可以给table设置哪些属性呢?
(1).设置height width属性:
<1>给table设置:
<style>table{width: 200px;height: 150px;border: 1px solid black;}</style>
可以看到给table设置宽高是指整个表格的宽高!
<2>给tr设置
<style>table{width: 200px;height: 150px;border: 1px solid black;}tr{width:50px;height: 50px;border: 1px solid red;}</style>
我们可以看到给tr设置宽高毛效果都没有.
<3>给td设置
<style>table{width: 200px;height: 150px;border: 1px solid black;}td{width:50px;height: 50px;border: 1px solid red;}</style>
给td设置就有效果了,可以看到有三行四列,但每个单元格的宽高是50吗?答案显然不是,我们可以看到每个单元格之间都有一定的边距.!
那我们把table的宽高去掉,只留下border看一下效果:
table{border: 1px solid black;}td{width:50px;height: 50px;border: 1px solid red;}
现在每个单元格的宽高就是50了.
注意:table标签和td标签都需要设置border,不然默认情况下不会显示!
2.水平居中属性
<1>table标签(方便查看,我给每个单元格加上了序列)
table{border: 1px solid black;margin: 0 auto;}td{width:50px;height: 50px;border: 1px solid red;}
使用margin : 0 auto;
<2>td: text - align : center;(让文本居中)
table{border: 1px solid black;margin: 0 auto;}td{width:50px;height: 50px;border: 1px solid red;text-align: center;}
<3>tr使用text - a text - align : cente;也可以让文本居中,我们使用td就可以了,我这里就不演示了!
3.垂直居中:这里主要看一下td的,tr同样也可以!
因为已经垂直居中了,为了看到效果,我先改一下!
现在是顶部对齐!
现在我再改一下:
现在就已经是水平和垂直都居中了!
4.
table{border: 1px solid black;margin: 0 auto;border-collapse:collapse;}td{width:50px;height: 50px;border: 1px solid red;text-align: center;/* vertical-align: top; */vertical-align: center;}
<2>如果我们不想要将内外边框合并,那就要用到这一个属性:
table{border: 1px solid black;margin: 0 auto;}td{width:50px;height: 50px;border: 1px solid red;text-align: center;/* vertical-align: top; */vertical-align: center;}
所以这个值的默认值就是 border-spacing: 2px;那我们现在修改一下:
table{border: 1px solid black;margin: 0 auto;border-spacing: 10px;}td{width:50px;height: 50px;border: 1px solid red;text-align: center;/* vertical-align: top; */vertical-align: center;}
我们可以看到箭头处的间隙明显大了!
5.padding属性:
<1>table:
table{border: 1px solid black;margin: 0 auto;padding: 10px;}td{width:50px;height: 50px;border: 1px solid red;/* text-align: center; *//* vertical-align: top; *//* vertical-align: center; *//* padding: 10px; */}
我们可以看到给table加padding属性,与border-spacing: 10px;还有些不一样,这个只是改变四周的距离,不是改变每个单元格之间的距离!
<2>td
未加padding属性:
table{border: 1px solid black;margin: 0 auto;/* padding: 10px; */}td{width:50px;height: 50px;border: 1px solid red;/* text-align: center; *//* vertical-align: top; *//* vertical-align: center; *//* padding: 10px; */}
可以看到文本距离边框的间距很小!
加上padding之后:
table{border: 1px solid black;margin: 0 auto;/* padding: 10px; */}td{width:50px;height: 50px;border: 1px solid red;/* text-align: center; *//* vertical-align: top; *//* vertical-align: center; */padding: 10px;}
我们可以看到间距大了很多!
总结:今天主要说了一下table td 的各个标签的宽高设置,以及table tr td的边框设置,如何合并,如何设置宽度,以及各个标签的居中,还有padding的设置!
css中table标签详解(一)相关推荐
- marquee标签 html5,HTML+CSS入门 marquee标签详解
本篇教程介绍了HTML+CSS入门 marquee标签详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 在W3C官方文档中找不到这个标签,也就是说不是官方推荐的标签 但 ...
- CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解 基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
- W3C中meta标签详解
2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...
- Maven中scope标签详解
概述 scope元素的作用:控制 dependency 元素的使用范围.通俗的讲,就是控制 Jar 包在哪些范围被加载和使用.具体值如下: compile:默认值.表示被依赖项目需要参与当前项目的编译 ...
- css中em单位详解,说明
em详解 em可以理解成"倍". em会以父级元素中所设置的字体像素值为基准值进行成倍放大: 字体大小=(父级元素中的字体像素 * em的值) 例: 网页部分代码如下: ...
- Table 标签详解
<table> 在HTML 中定义了表格布局.说到 table 标签,我们可以想到的大致有以下几个元素:<tr>.<th>.<td>.<thead ...
- css实例 css中id/class 详解样式表(外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解)[第一天]
文章目录 css实例 css中的id css中的class 样式表 外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...
- css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性 发布时间:2020-09-23 14:26:58 来源:亿速云 阅读:83 作者:小新 这篇文章主要介绍css中如何使用counter-reset属性, ...
最新文章
- mysql怎么用_面试官都是这样发问的,连环冲锋炮,看你怎么抵挡(上)
- 驰骋工作流引擎设置消息收听
- 窗体的Alpha通道透明色支持
- CRM webClient UI搜索参数里max hit是怎么被后台服务器处理的
- poj1251 Jungle Roads Kruskal算法+并查集
- redis工具类_SpringBoot 操作 Redis 数据
- Java 读取文件大写和格式化输出字串
- HDU/HDOJ 1800 Flying to the Mars 搜索
- QQ能上网页打不开解决办法
- 一款强大的红队资产测绘工具
- MSP430 G2553 Launchpad实现电容测量
- curl伪造ip请求
- CentOS的U盘安装,vim主题设置,笔记本合盖不休眠
- 【网络】RPC通信之Apache Thrift
- python二分法求最值_数值分析之二分法、试值法 python
- navicat 连接linux mysql_如何在windows下用Navicat Premium连接linux下的Mysql
- 仿百度搜索热点列表的实现
- 数据结构实践项目:校园路线导航图
- Excel函数之countifs函数(统计给定的多个条件下的数据)
- POS共识机制竟然漏洞这么多 | 分析POS共识机制的原理带来的思考
热门文章
- LaTeX表格制作(表格内多行组合数据的输入)
- python心跳包原理_心跳包机制设计详解 转载
- 爱奇艺前端实习生一面
- 月薪两万设计师推荐UI设计学习方法!
- 常见半导体制程洁净车间洁净室测试仪有哪些
- 解决edge浏览器bing无法使用的问题
- YOLOv7: Trainable bag-of-freebies sets new state-of-the-art for real-time object detectors
- 行测-判断推理-图形推理-位置规律-旋转、翻转
- Python量化交易实战-29什么是价格动量效应
- iphone修改运营商名称_iPhone上的“运营商设置更新”弹出窗口是什么?