表格

<table>

Overview

1. 展示数据；静态展示或静态展示

2. 布局；早期使用较多，现在多使用 Div + CSS 实现

. 更多信息，请访问 MDN - <table>、complete guide table element

Structure

1. <table>

. 表格容器

. display 类型是 tabel，inline-block

. 表格常见的结构如下所示

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot> 
<table>

2.1 <caption>

. 表格的标题/题注/说明

. 如果指定，必须是表格第一个子元素

. 部分属性需要单独设置，如背景色

. 对应的CSS 样式 caption-side 默认为 top，在上部

<caption>样式
类别	说明
caption-side	top \| bottom

2.2 <thead>

. 表格的头部

. 需手动添加

. display 类型是 table-row-group

2.3 <tbody>

. 表格的主体

. 系统自动添加

. display 类型是 table-row-group

2.4 <tfoot>

. 表格的尾部

. 需手动添加

. display 类型是 table-row-group

3.1 <tr>

. 表格的行

. display 类型是 table-row，它的子元素只能是 <td> 或 <th>

. <tr> 至少有一个单元格 <td> 有数据；否则空行会被压缩

3.2 <th>

. 单元格；通常出现表格标题行/首行，也可以出现在任何位置

. display 类型是 table-cell

3.3 <td>

. 单元格；表格的普通单元格

. display 类型是 table-cell

Attribute

. 利用表格某些属性可以设置表格的基本样式

. 除了最后2个属性外，其它属性已经废弃，请使用 CSS 实现

<table>属性
类别	说明
border	边框
width	宽度
height	高度；通常由内容自动撑开
cellspacing	单元格间距
cellpadding	单元格填充
align	水平对齐；默认左对齐
valign	垂直对齐；默认居中 middle
colspan	列合并（向右）
rowspan	行合并（向下）

CSS

width：表格宽度

border-collapse：边框是否重叠，默认不重叠；只有指定了重叠 collapse，才可以设置行 <tr> 的边框

border：表格边框/单元格边框；单元格分离 collapse 时，不能直接给 <tr> 指定边框，而应该给 <td> 指定边框

border-spacing：单元格间距；边框重叠时，无效

table-layout: 单元格内容显示方式，默认是 auto，自动适应内容；fixed 固定宽度

empty-cells：空单元格显示与否/不在空单元格周围绘制边框。默认显示/绘制；仅仅使用于边框不重叠的情况

CSS Initialization

. 默认情况下，表格边框不重叠；<th>、<td>有1个像素的 padding

. 系统会默认添加表体 <tbody>；表头 <thead>、表尾 <tfoot> 和 <caption> 需要手动添加

. 通常只关注行 <tr>、<th>和 <td>，他们会自动放在 <tbody>中

. 如果使用<th>，或需要对表头特别处理，如固定表头，建议采用完整结构

. <th>的样式如背景优先级略高，部分动态样式无法覆盖

. 表格的样式设计应聚焦在<td>

. 同一页面内的表格，关键列宽应该保持一致

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}  

table {
  width: 100%;
  border-collapse: collapse;
}

<colgroup>

. 在表格内定义各列特性

. 默认情况下各列宽度会自动分配，撑开至占满表格

. 指定每列的宽度 - 内联样式

. 更多使用，请访问 MDN - <colgroup>

<table>
        
  <colgroup>
    <col style="width: 100px;">
    <col style="width: 200px;">
  </colgroup>
  
<table>

. 也可以单独指定某个 <td>的宽度

table td:nth-child(2) {
  width: 20%;
}

. 简单粗暴的设置第一列的宽度；适合页面内存在多个表格的情况

table th:first-child {
  width: 30%;
}

Drill

. 通常一个表格可以完成设计；特殊情况需要多个表格配合完成

常见类型

[] 线框表格

. 使用边框实现

. 外边框粗实线

. 内部细点划线

线框表格

[] 三线表格

. 使用边框和伪类选择器 :has()实现

. 具体实现方案很多

三线表格

[] 背景表格

. 单元格使用背景实现

. 边框同页面背景色来模拟分隔

. 也可以不重叠边框实现

背景表格

[] 斑马纹表格

. 使用背景和伪类选择器 :nth-child() 实现

. 表头单独设置样式

. 表体奇数行、偶数行样式不同

斑马纹表格

[] 动态表格

. 标题行样式始终保持不变

. 当鼠标悬停 :hover 时，当前行颜色变化

. 使用过渡动画实现

[] 滚动表格

. 内容多的情况下，表头始终显示 - 冻结首行

. 多表格配合使用 - 模拟固定表头表格

. <tabel>本身并不能实现滚动条，需在<tabel>外面增加一个容器；当<tabel>高度超过容器高度时，让容器出现滚动条

. 也可以使用粘性定位实现

. 现在多使用分页器 - pager 设计

[] 渐变边框表格

. 边框不能重叠

. 表格边框使用边框图像 border-image 实现

. 也可以使用伪元素实现；对边框重叠没有要求

渐变边框表格

[] 排序表格

. 借助 JavaScript 实现

. 可以是本地数据；也可以通过网络请求数据，如 Fetch

. 图标由阿里字体图标 Iconfont 实现

其它类型

[] 单元格间距处理

border-collapse: separate collapse
border-spacing: 2px[default] 10px

	Name	Gender	Age
桂林	漓江	象鼻山	大榕树
厦门	鼓浪屿
广州	小蛮腰	珠江
海口

[] 空单元处理

. 边框不重叠

. 空单元格不显示，营造一种流的感觉

empty-cells: show hide

1	2	3	4
5	6	7	8
9

. 单元格重叠的情况下，空单元格属性无效

bold	colspan="3"
rowspan="2"	bold	bold	bold
rowspan="2"	bold

<table>
    <tr>
        <td>bold</td>
        <td colspan="3">colspan="3"</td>
    </tr>
    <tr>
        <td rowspan="2">rowspan="2"</td>
        <td>bold</td>
        <td>bold</td>
        <td>bold</td>
    </tr>
    <tr>
        <td>bold</td>
    </tr>
</table>

table {
    width: 100%;
    border-collapse: collapse;
    border: 4px double #888;
    empty-cells: hide;//无效
}
table th, table td {
    border: 1px solid #888;
}

[] 圆角表格

方案1：在不设置边框重叠的情况，给<table>指定border-radius

1	2	3	4
1	2	3	4
1	2	3	4
1	2	3	4

.radius-tbl {
  border-collapse: separate;
  border-radius: 8px;
  border: 1px solid #666;
}
.radius-tbl td {
  border-bottom: 1px solid var(--main-color-green);
}

.radius-tbl tr:last-child td {
  border: none;
}

方案2：边框重叠的情况下，单独给第一行左右2个和最后一行左右2个单独设置对应方向的border-radius

. 为体现效果，以红色显示

1	2	3	4
1	2	3	4
1	2	3	4
1	2	3	4

.radius-tbl-self tbody tr:first-child td:first-child {
  border-top-left-radius: 8px;
  background-color: #f40;
}

.radius-tbl-self tbody tr:first-child td:last-child {
  border-top-right-radius: 8px;
  background-color: #f40;
}

Responsive

自适应表格

[前置知识点] 媒体查询

. 针对桌面端和移动端表格的展示，给出其中一种自适应表格的思路

. 按 F12 选择检查，查看表格效果[取消公有样式中，首个单元格width:20%的限定]

. 更多信息，请查看 Responsive Data Tables

sn	name	unit	gender
1	guilin	54414	female
2	beijing	75716	male

隐藏表头 <thead>。方法很多；最好不要 none 掉，而应使用定位将其移走

将 <tr> 显示属性由 table-row（类 inline-block）调整为 block，以便独占一行

将 <td> 显示属性由 table-cell（类 inline-block）调整为 block，从而将数据由一行展示改为多行展示

设置 <td> 为相对定位，并保持左侧50%的 padding，预留给其伪元素；或使用弹性盒子

为每个 <td> 设置不同的伪元素 ::before 内容，和隐藏的表头内容相对应；可以单独指定或使用自定义数据 data-

根据需要指定行和单元格的其它样式，如边框、背景色(略)

其它布局应根据实际情况具体分析

thead tr {
    display: none;
}

tbody tr {
    display: block;
}

tbody td {
    //这里采用flex，是为了垂直方向对齐内容和其伪元素
    display: flex;
    align-items: center;
    justify-content: space-between;
}    

tbody td::before {
    content: attr(data-label);
}

Summary & Homework

Summary: <table>的作用

<table>的样式设计
Homework: 使用不同的表格完善个人网站的介绍部分，如参加的赛事、项目、学习的课程、主要的社会实践活动等

Word 中如何定制表格？

单元格内容过多如何处理？