表格标签
表格标签
| 标签 | 含义及作用 | 特殊 |
|---|---|---|
<table> | 定义表格 | |
<tr> | 表格中的行 | 在表格中有几组 tr ，就表示有多少行 |
<td> | 普通单元格 | 必须嵌套在 tr 标签中 tr 中包含几对 td，就表示该行有多少个单元格 |
<th> | 表头单元格 | 必须嵌套在 tr 标签中 浏览器中会以 '居中"，"粗体" 的效果显示 |
<caption> | 表格标题 | 一个表格只有一个标题 浏览器中会居中显示文字 使用比较少 |
<thead> | 表头 | 是一个语义标签，不会起到特殊的渲染 一个表格只有一个表头 |
<tbody> | 表身 | 是一个语义标签，不会起到特殊的渲染 一个表格可以有多个表头 |
<tfoot> | 表脚 | 是一个语义标签，不会起到特殊的渲染 一个表格只有一个表头 |
<colgroup> | 列定义容器 | 包含多个 <col> 标签，一个 <col>默认为一列一般用于对列有特殊样式需求，子元素 <col> 的样式会对整列生效 |
<col> | 列申明 | 单独使用的标签，没有结束标志 主要用于申明表格结构，并为表格附加样式 |
表格常用样式调整
table 的 HTML属性，在 HTML5 是弃用状态，推荐采用 CSS 实现
| 属性 | 作用 | 值 | 替代CSS写法 |
|---|---|---|---|
| align | 表格或单元格对齐 | center left right | 整个表格居中：margin-left/right: auto单元格水平居中： text-align单元格垂直居中： vertical-align |
| border | 设置边框宽度 | number | 定义边框：table, th, td{ border: 1px solid #ccc }边框合并： table{ border-collapse: collapse } |
| cellspacing | 控制单元格间距 | number | 单元格有间距：table{ border-collapse: separate }单元格间距： table{ border-spacing: 10px 5px } |
| cellpadding | 单元格内边距 | number | 设置单元格内边距：td,th{ padding: 10px } |
| rules | 内部线条控制 | none：没有线条 all：显示内部所有线条 rows：显示行之间线条 cols：显示列之间线条 groups：显示行组和列组线条 | 通过 border-bottom/right 组合控制行/列分隔线例子：rows 的实现 td{ border-bottom: 1px solid #000 }tr:last-child td{ border-bottom: none } |
| frame | 外框显示控制 | void: 不显示外边框 box：显示所有外边框 above：显示上外边框 below：显示下外边框 lns：显示左侧外边框 rhs：显示右侧外边框 hsides：显示上下外边框 vsides：显示左右外边框 | 通过border-top/right/bottom/left 精确控制外边框 |
常用表格实现
一、带表头的表格
二、语义化表格
三、合并单元格
- 左右合并使用
colspan - 上下合并使用
rowspan
四、定制列样式
<col>可以使用 span 属性合并多个列定义
五、固定表头、列头
- 通过
position: sticky固定滚动时的位置 - 表头通过
top: 0固定在最上面 - 列头通过
left: 0固定在最左边 - 表头和列头的固定，会导致左上角第一个单元格，有交叉重叠的时候，通过对左上角第一个单元格设置
z-index: 2，列头单元格设置z-index: 1，实现重叠时，表头优先显示的效果