前端学习 -- 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 ...
随机推荐
- Sql_join left right
1.内连接inner join 只返回两张表中所有满足连接条件的行,即使用比较运算符根据每个表中共有的列的值匹配两个表中的行.(inner关键字是可省略的) ①传统的连接写法: 在FROM子句中列出所 ...
- vs2017安装
每次安装包都搞的很大,而且出各式各式的问题. 安装程序清单签名失败 运行'vs_Enterprise.exe'时,出现'安装程序清单签名失败'的错误,直接删除'vs_installer.opc'文件, ...
- for...else 小记
for ......: ...... else: ...... 在 for 循环中,若没有执行 break ,正常结束,则会执行 else 中的语句. 若执行了 break , 则 不会 执行 els ...
- LVM基础详细说明及动态扩容lvm逻辑卷的操作记录
LVM概念:---------------------------------------------------------------------------------------------- ...
- .apply()用法和call()的区别
Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里 ...
- ７０１ D. As Fast As Possible
###链接 ［http://codeforces.com/group/1EzrFFyOc0/contest/701/problem/D］ ###题意 n个人,走lm,有车但没人只能坐一次,车容量为k, ...
- RedisDump安装报错
环境:win10 首先安装 Ruby 安装好后,使用命令行 gem install redis-dump 在安装过程中始终报错,意思是无法使用make命令 然后安装make 参考教程: http:// ...
- HDOJ2099_整数的尾数
一道我以为不会这么简单,然后暴力盲打竟然给过了的题. HDOJ2099_整数的尾数 #include<stdio.h> #include<stdlib.h> #include& ...
- WIN10 Samba（SMB） v1 trouble shooting
现象:WIN10 Education Editon不能访问SMB V1.5的NAS服务器的共享文件夹. 一篇WIN与SMB相关的经验帖:https://jingyan.baidu.com/articl ...
- 【转】Linux tail 命令详解
Linux tail 命令详解 http://www.2cto.com/os/201111/110143.html