前端学习 -- 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 ...
随机推荐
- koa2入门（3）mongoose 增删改查
项目地址:https://github.com/caochangkui/demo/tree/koa-mongoose 连接数据库 数据库名字为:koa-mongoose const mongoose ...
- python第二周。2019.4.13
1, 我绘制大蟒蛇就是..保存也对着呢,你要是打开文件的话,先闪个黑屏,再闪个白屏..自动退出,然后啥都没了. 我觉得是我代码编错了...再来一遍! 这次到可以,但是这个大蟒蛇好像没有回头... 刚才 ...
- 修改sga_max_size大小后重启数据库报 ORA-00851
http://blog.itpub.net/30150152/viewspace-1449898/
- Linux内核分析— —扒开系统调用的三层皮（下）
课程主要内容有三点: 在MenuOS中通过添加代码增加自定义的系统调用命令 使用gdb跟踪调试内核 简单分析system_call代码了解系统调用在内核代码中的处理过程 实验——分析system_ca ...
- 个人实验 github地址：https://github.com/quchengyu/cher
一.实践目的 1．掌握类的定义,对象的创建. 2．掌握实现封装.继承.多态的方法,掌握各种修饰符的使用. 3．掌握将对象数组作为方法的参数和返回值. 4．掌握抽象类与接口的概念及实现,理解动态绑定机制 ...
- Android Studio下创建menu布局文件
一.问题: android studio项目中没有看到menu文件夹: 在android studio项目中想要添加menu布局文件,一开始我的做法是:直接在res文件夹右键选择xml文件来添加,如下 ...
- [2017BUAA软工]个人项目：数独
一.项目地址 https://github.com/Slontia/Sudoku 附加作业(GUI):https://github.com/Slontia/SudokuGUI 二.开发时间 PSP2. ...
- 数组 this.setData快捷赋值
let list=this.data.list; let listString = `{"list[${index}].sliderSure":${!list[index].sli ...
- OneZero产品视频
产品视频地址:http://v.youku.com/v_show/id_XMTU1MDMwOTk2OA==.html
- ubuntu16安装MySQL
MySQL 是一种开源数据库管理系统,通常作为流行的LAMP(Linux,Apache,MySQL,PHP / Python / Perl)堆栈的一部分安装.它使用关系数据库和SQL(结构化查询语言) ...