表格

@<table>

知识储备 Prerequisite: 边框 - border; 伪类选择器 - Pseudo class

概述 Overview

1. 展示数据

2. 布局，如表单的使用，多使用表格布局；其它布局多使用 div + CSS 实现

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

结构 Structure

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

<table>

.表格容器

.display 类型是 tabel，inline-block

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

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

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

.默认在上部 top

类别	说明
caption-side	top \| bottom

<thead>

.表格的头部

.需手动添加

.display 类型是 table-row-group

<tbody>

.表格的主体

.系统自动添加

.display 类型是 table-row-group

<tfoot>

.表格的尾部

.需手动添加

.display 类型是 table-row-group

<tr>

.表格的行

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

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

.表格的单元格

.display 类型是 table-cell

.<th> 标题行单元格，通常出现在首行，也可以出现在任何位置

.<th> 普通单元格

HTML属性样式

. 除了最后2个属性外，其它样式建议使用 CSS 实现

类别	说明
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：空单元格显示与否/不在空单元格周围绘制边框。默认显示/绘制；仅仅使用于边框不重叠的情况

初始化样式

默认情况下，<th>、<td>有1个像素的 padding

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

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

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

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

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

除了直接在表格上应用合并单元格属性 colspan 和 rowspan外，其它样式建议由CSS完成

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

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

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

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%;
}

设计 Design

常见表格类型

[] 线框表格

外边框粗实线

内部细点划线

[] 三线表格、三线表格 - CodePen、个人网站

. 首行和末行有边框

. 单独指定类实现；也可以使用 :has() 选择器实现

[] 斑马纹表格、斑马纹表格 - 结构伪类选择器

. 表头单独设置样式

. 其它奇数行、偶数行样式不同

[] 渐变边框表格

. 边框不重叠

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

[] 表头连续、表体分离的背景表格

[] 固定表头表格 - 粘性定位

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

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

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

[] 歌单 - CodePen

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

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

表格其它处理

[] 单元格间距处理

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: 1. <table>的作用

2. <table>的样式设计
作业 Homework: 1. 使用不同的表格完善个人网站的介绍部分，如参加的赛事、项目、学习的课程、主要的社会实践活动等; 2. 使用伪类 :hover 为表格增加交互样式; 3. Word中如何定制表格？; 4. 单元格内容过多如何处理？