表格

1. 表格简介

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

2. table 创建表格

在table标签中使用tr来表示表格中的一行，有几行就有几个tr
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
conspan 属性横向的合并单元格
rowspan 属性设置纵向的合并单元格
table 是一个块元素

结果：

如果要合并行A3,使A3占两行：去掉B3,添加rowspan 给A3

结果：

如果要合并列C2,使C2占两行：去掉C3,添加colspan 给C2

结果：

border-collapse 设置表格的边框合并

序号	姓名	班级
1	唐僧	一班
2	孙悟空	二班
3	猪八戒	三班
4	沙和尚	四班

结果：

长表格

有些情况下的表格比较长，这时需要将表格分为三部分，表头，表格主体，表格底部。

在HTML中卫我们提供了三个标签：
- thead 表头
- tbody 表格主体
- tfoot 表格底部

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

日期	支出	收入	合计
		合计	300
10.1	100	200	100
10.2	100	200	100
10.3	100	200	100

结果：

注意：
thead中的内容，永远会显示在表格的头部
tbody中的内容，永远会显示在表格的中间
tfoot中的内容，永远会显示在表格的底部

如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并且将所有的tr都放在tbody中。所以注意：tr并不是table的子元素，tr是tbody的子元素。通过table>tr无法选中行，需要通过tbody>tr

        table> tr:nth-child(even) {
            background-color: #bfa;
        }

结果：#bfa背景颜色并未选中偶数行

       /*设置隔行变色*/
        tbody> tr:nth-child(even) {
            background-color: #bfa;
        }

结果：浏览器默认加了tbody

A1	A2	A3
B1	B2	B3
C1	C2	C3

A1	A2	A3
B1	B2	A3
C1	C2	C3

A1	A2	A3
B1	B2	B3
C1	C2

表格

1. 表格简介

2. table 创建表格

border-collapse 设置表格的边框合并

长表格

你可能感兴趣的:(html)