HTML table表格

HTML table表格

table表格

表格的组成

表格由thead标签包括标题部分，tbody包括内容部分。当后期修改时，可以容易看出标题部分和主体部分。表格分为行和列 tr为行标签、td为单元格（列），th为行标题（默认字体加粗，居中）。

caption表格表头

 

当给表格添加边框时，会显示出双边框

border-collapse:collapse;合并单元格边框

 

合并单元格边框后看起来会更加美观点

 

表格隔行变色

选择偶数

even偶数2、4、6、8

tbody>tr:nth-child(2n)>td

tbody>tr:nth-child(even)>td

 

表格主体>偶数行>td单元格元素

选择奇数

odd奇数1、3、5、7

tbody>tr:nth-child(2n+1)>td

tbody>tr:nth-child(odd)>td

 

表格主体>奇数行>td单元格元素

最后结果为

 

Ps. nth-child()伪类选择器，n为乘法因子 可以为0、1、2、3、4 (2n-1)=(2*0-1)，公式可自定义

选择器

后代选择器E p

选择E元素的后代中所匹配的所有标签元素

子代选择器E>p

仅选择E元素的子代所匹配的标签元素

不是第一个标签

E:not(:first-child)

Ps. E为element

部分样式

resize:none; txtarea禁止托大文本域

letter-spacing:2em; 字符之间的间距

伪选择器

:link 未访问时

:visited 已访问时

:hover 鼠标悬浮

:active 被点击触发时

:focus 元素获取焦点时

outline 轮廓样式

outline-style 属性指定轮廓的样式，不占据空间，并可以设置如下值

dotted—点状

dashed—虚线

solid—实线

double—双线

groove—3D凹槽轮廓

ridge—3D凸槽轮廓

inset—3D凹边轮廓

outset—3D凸边轮廓

none—定义五轮廓

hidden—定义隐藏的轮廓