表格、表格样式和长表格

表格（table）

在html中表格的创建是需要table标签的
tr：表示表格中的一行，有几行就有几对tr
td：需要td来创建一个单元格，有几个单元格就有几个td

用table来创建一个单元格，设置单元格的外边框1，宽度占页面的40%，位置居中，代码如下：

<table border="10" width="80%" align="center">

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

<td rowspan="2">内容</td>    2表示合并两个纵向的单元格

colspan用来合并横向单元格

<td colspan="2">内容</td>

添加表格样式

1、设置单元格的宽度：width：值；
2、设置居中：margin：0 auto；
3、设置边框：border：1px solid black；
4、设置边框距离：border-spacing：值；

• table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离

5、设置表格合并：border-collapse：collapse；

• border-collapse可以用来设置表格的边框合并如果设置了边框合并，则border-spacing自动失效

6、设置背景样式：background-color：red；
7、设置隔行变色：tr:nth-child(even){background-color: #bfa;}
8、表头：可以用th表示，它的用法和td一样，不同的是它会有一些默认效果

长表格

有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：

• thead 表头-- thead中的内容，永远会显示在表格的头部
• tbody–tbody中的内容，永远都会显示表格的中间
• tfoot – 表格主体–tfoot中的内容，永远都会显示表格的底部

如果表格中没有写tbody，浏览器会自动在表格中添加tbody并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素

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