HTML之表格 · Table

○ ○ ○ ○ ○ ○ 标签 ○ ○ ○ ○ ○ ○

...
... ...
... ...
... ...

⚠️ 注意:是个容器,可以装html中所有的元素,比如文字/text,图片/img,列表/list,表格/table

○ ○ ○ ○ ○ ○ 属性 ○ ○ ○ ○ ○ ○

(1)border 边框
- 无边框,``
- 给表格 & 单元格 都加上单独的边框

table, th, td {
    border: 1px solid black;
}
HTML之表格 · Table_第1张图片
单独边框

- 表格 & 单元格 边框的合并

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
边框的合并

(2)border-spacing 适用于

,增加border之间的距离:

HTML之表格 · Table_第2张图片
border-spacing

(3)padding 适用于

,增加填充
(4)colspan="N"rowspan="N" 合并N行 和 合并N列
(5)table使用特定的ID选择器:
- 装饰整个表格 和CSS代码 table#t01 {...}
- 装饰奇数行 table#t01 tr:nth-child(odd){...}
- 装饰偶数行 table#t01 tr:nth-child(even){...}
⚠️ 注意:标题行算第1行

你可能感兴趣的:(HTML之表格 · Table)