○ ○ ○ ○ ○ ○ 标签 ○ ○ ○ ○ ○ ○
<table>
<caption>...</caption> <!--表格标题-->
<tr> <!--表格头-->
<th>...</th>
<th>...</th>
</tr>
<tr> <!--第一行数据-->
<td>...</td>
<td>...</td>
</tr>
<tr> <!--第二行数据-->
<td>...</td>
<td>...</td>
</tr>
</table>
⚠️ 注意:<td>
是个容器,可以装html中所有的元素,比如文字/text,图片/img,列表/list,表格/table
○ ○ ○ ○ ○ ○ 属性 ○ ○ ○ ○ ○ ○
(1)border
边框
- 无边框,``
- 给表格 & 单元格 都加上单独的边框
table, th, td {
border: 1px solid black;
}
- 表格 & 单元格 边框的合并
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
(2)border-spacing
适用于<table>
,增加border之间的距离:
(3)padding
适用于<td>
和<th>
,增加填充
(4)colspan="N"
和rowspan="N"
合并N行 和 合并N列
(5)table使用特定的ID选择器:
- 装饰整个表格 <table id="t01">
和CSS代码 table#t01 {...}
- 装饰奇数行 table#t01 tr:nth-child(odd){...}
- 装饰偶数行 table#t01 tr:nth-child(even){...}
⚠️ 注意:标题行算第1行