表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具,表格就是用来表示一些格式化的数据的,比如:课程表、银行对账单,在网页中也可以来创建出不同的表格

一:创建表格

在HTML中,使用table标签来创建一个表格,在table标签中使用tr来表示表格中的一行,有几行就有几个tr,在tr中需要使用td来创建一个单元格,有几个单元格就有几个td

rowspan用来设置纵向的合并单元格

colspan横向的合并单元格

A1A2A3a4
B1B2B3
B1B2B3
C1C2C3
D1
二、设置表格样式
/*设置表格的宽度 */table{width: 300px;/*居中*/margin: 0 auto;/*边框*/border:1px solid black;/*table和td边框之间默认有一个距离通过border-spacing属性可以设置这个距离 */ /* 需求一: 设置表格的边框,要单线边框 *//* 方法一 *//* border-spacing:0px ; *//*方法二border-collapse [kə'læps] 可以用来设置表格的边框合并如果设置了边框合并,则border-spacing自动失效 */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;}/* 需求五:调整td文字在表格中的位置 */td{height: 50px;vertical-align: top;/* 可选值:top,bottom,middle */text-align: center;/* 可选值:left,center,bottom */}
学号姓名性别住址
1孙悟空花果山
2猪八戒高老庄
3沙和尚流沙河
4唐僧女儿国
三、长表格的使用

有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部

在HTML中为我们提供了三个标签:

thead 表头

tbody 表格主体

tfoot 表格底部

这三个标签的作用,就来区分表格的不同的部分,他们都是table的子标签,都需要直接写到table中,tr需要写在这些标签当中

thead中的内容,永远会显示在表格的头部

tfoot中的内容,永远都会显示表格的底部

tbody中的内容,永远都会显示表格的中间

如果表格中没有写tbody,浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素

通过table > tr 无法选中行 需要通过tbody > tr

日期收入支出合计
合计100
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200
10.24500300200