御扶摇而上者九万里,绝云气,负青天
风往矣,吾亦往矣
今日学习内容
目录
一,表格
表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具,
表格就是用来表示一些格式化的数据的,比如:课程表、银行对账单
在网页中也可以来创建出不同的表格。
1.table tr和td
1、在HTML中,使用table标签来创建一个表格
2、在table标签中使用tr来表示表格中的一行,有几行就有几个tr
3、 在tr中需要使用td来创建一个单元格,有几个单元格就有几个td
4、table标签里有自带的属性: border="1" width="40%" align="center"
2.合并单元格 rowspan和colspan
5、rowspan用来设置纵向的合并单元格
注意:合并方向是纵向的,即从上往下合并
6、colspan横向的合并单元格
注意:合并方向是横向的,即从左往右合并
二,表格样式
一、设置表格的宽度,表格居中,边框,设置内部边框
等同div做法
表格单线边框border-collapse
/* 方法一 */
/* border-spacing:0px ; */边框距离为0
/*方法二*/
/* border-collapse [kə'læps] 设置行和单元格的边是否合并
如果设置了边框合并,则border-spacing自动失效
可选值
separate 默认值,不合并
collapse 合并边框
设置隔行变色 tr:nth-child(even)
调整td文字在表格中的位置 vertical-align、text-align
三,长表格
thead,tbody , tfoot
有一些情况下表格是非常的长的
这时就需要将表格分为三个部分,表头,表格的主体,表格底部
在HTML中为我们提供了三个标签
thead 表头 永远在表格的头部
tbody 表格的主体 永远在表格中间
tfoot 表格的底部 永远在表格底部
用来区分表格不同的部分,顺序,浏览器会自动调整
如果表格中没有写tbody,浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
四,表单
将用户信息等本地的数据信息提交给服务器的
比如:百度的搜索框 注册 登录这些操作都需要填写表单
1,创建表单 form标签
属性:
action属性(必须要写)