html表格以及常用CSS样式

表格

一.表格标签的结构

1.使用table标签创建一个表格

<table>

</table>

2.table标签的子标签

i.thead

表示表格的表头

ii.tbody

表示表格的主体

iii.tfoot

表示表格的底部

所以，表格的最基本框架

<table>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

注意：这三个子标签的顺序没有要求，但是显示表格时，是按照 表头-->主体-->表格底部 的顺序显示

一般情况下，不会写这三个子标签，而是直接在table中写tr；如果table中没有写tbody，则浏览器默认在table中添加tbody标签，并将所有的tr标签放到tbody中 所以，有时候想要使用table > tr这样的子类选择器，就会出错，其实tr是tbody的子类

3.thead,tbody,tfoot的子标签tr

通过tr，创建一行

4.tr的子标签td

通过td，在每一行中创建一列

二.表格常用的CSS样式

boder-spacing : 数值； 用来设置边框的距离

bordr-collapse : collapse; 用来设置边框合并

如果设置了border-collapse，boder-spacing失效

使用伪元素设置隔行变色

tr:nth-child(even){
    backgrond-color:#xxxxxx;
}

nth-child(even)偶数行

nth-child(odd)奇数行