前端学习 -- Html&Css -- 表格
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单。在网页中也可以来创建出不同的表格。
在HTML中，使用table标签来创建一个表格，在table标签中使用tr来表示表格中的一行，有几行就有几个tr，在tr中需要使用td来创建一个单元格，有几个单元格就有几个td，rowspan用来设置纵向的合并单元格，colspan横向的合并单元格。
border-collapse可以用来设置表格的边框合并，如果设置了边框合并，则border-spacing自动失效。
table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离。
可以使用th标签来表示表头中的内容，它的用法和td一样，不同的是它会有一些默认效果。
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部。
在HTML中为我们提供了三个标签：
- thead 表头；
- tbody 表格主体；
- tfoot 表格底部。
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
- thead中的内容，永远会显示在表格的头部；
- tfoot中的内容，永远都会显示表格的底部；
- tbody中的内容，永远都会显示表格的中间。
如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素通过table > tr 无法选中行 需要通过tbody > tr。
以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了：
- 表格的列数由td最多的那行决定；
- 表格是可以嵌套，可以在td中在放置一个表格。
子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素,使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。
经过修改后的clearfix是一个多功能的，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠。
demo:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> table {
width: 300px;
/*居中*/
margin: 0 auto;
border-spacing: px;
border-collapse: collapse;
/*设置背景样式*/
/*background-color: #bfa;*/
} td,
th {
border: 1px solid black;
}
/*
* 设置隔行变色
*/ tr:nth-child(even) {
background-color: #bfa;
}
/*
* 鼠标移入到tr以后，改变颜色
*/ tr:hover {
background-color: #ff0;
}
</style>
</head> <body> <table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr> <tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<!--
rowspan用来设置纵向的合并单元格
-->
<td rowspan="2">纵向的合并单元格</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<!--
colspan横向的合并单元格
-->
<td colspan="2">横向的合并单元格</td>
</tr>
</tbody>
</table> </body> </html>
效果：
clearfix使用：
demo:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background-color: #bfa;
} .box2 {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 100px;
} .box3 {
border: 10px red solid;
} .box4 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
} .clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
} .clearfix {
zoom: 1;
}
</style>
</head> <body> <div class="box3 clearfix">
<div class="box4"></div>
</div> <div class="box1 clearfix">
<div class="box2"></div>
</div> </body> </html>
效果图：
前端学习 -- Html&Css -- 表格的更多相关文章
- 前端学习：CSS的学习总结(图解）
前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位
- HTML 学习笔记 CSS(表格)
CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...
- 2016.01.22 前端学习 HTML/CSS
学习HTML/CSS http://edu.51cto.com/course/course_id-3116.html 明日实践
- 前端学习笔记--CSS样式--列表和表格
1.列表 2.表格 odd:奇数 even:偶数
- 前端学习 之 CSS（三）
九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...
- 前端学习笔记 - Css初级篇
有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...
- HTML学习笔记 CSS表格及轮廓案例 第八节 （原创）参考使用表
#tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collaps ...
- 前端学习之CSS
CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...
- 前端学习 -- Html&Css -- 条件Hack 和属性Hack
条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...
随机推荐
- cp 命令有坑
cp 是个很常用的命令, 基本语法为 cp -v a b 把文件a 复制为文件b(-v为显示做了什么,这是非常安全的做法,建议新手添加此参数) 参数说明: -a:此选项通常在复制目录时使用, ...
- CrackMe005-下篇 | 逆向破解分析 | 160个CrackMe（视频+图文）深度解析系列
作者:逆向驿站微信公众号:逆向驿站知乎:逆向驿站 CrackMe005,上篇说了具体方法,下篇来发逆向分析过程,看看老夫是如何得到上篇的具体方法的! 准备 [环境和工具] win7/xp虚拟机环境 C ...
- CEPH Object Gateway
参考文档: CEPH OBJECT GATEWAY:http://docs.ceph.com/docs/master/radosgw/ 一．环境准备 1. Ceph Object Gateway框架 ...
- MongoDB集群运维笔记
前面的文章介绍了MongoDB副本集和分片集群的做法,下面对MongoDB集群的日常维护操作进行小总结: MongDB副本集故障转移功能得益于它的选举机制.选举机制采用了Bully算法,可以很方便从分 ...
- better-scroll的参数和方法
格式:let obj = new BScroll(object,{[option1,],.,.}); 注意,如果在某一个组件内创建了一个BScroll的实例,在组件生命周期结束前要注意调用destro ...
- M2项目测试
更为详细的测试报告,我们会在后续整理出来. 在M1的基础上,我们新增加了两个个数据表来存放问答对以及标签信息的表:C705question表 与 tag表 第二次迭代中,我们积极地同第三组沟通,了解到 ...
- dxteam团队项目终审报告
一． 团队成员的简介和个人博客地址 M1阶段 http://www.cnblogs.com/dxteam/p/3991514.html M2阶段 新成员 邓亚梅 http://www.cnblogs. ...
- 【CV】ICCV2015_Unsupervised Visual Representation Learning by Context Prediction
Unsupervised Visual Representation Learning by Context Prediction Note here: it's a learning note on ...
- <构建之法>8,9,10章的读后感
第八章 这一章主要讲的是需求分析,主要介绍在客户需求五花八门的情况下,软件团队如何才能准确而全面地找到这些需求. 第九章 问题:我们现在怎样培养才能成为一名合格的PM呢? 第十章 问题:如果典型用户吴 ...
- [转帖]新的Linux后门开始肆虐 主要攻击中国服务器
新的Linux后门开始肆虐 主要攻击中国服务器 https://www.cnbeta.com/articles/tech/815639.htm 一种新的 Linux 系统后门已经开始肆虐,并主要运行在 ...