@Table

概述
结构
样式
基本使用
进阶使用

概述

. 功能1：展示数据

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

. <tabel>的display类型为tabel，inline-block元素；由行<tr>和单元格<td>或<th>组成

. <tr>的子元素只能是<td>或<th>

. <tr>的display类型是table-row

. <td> <th>的display类型是table-cell

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

. 更多信息，请访问 complete guide table element

完整结构

. <caption>：表格标题

. 系统会默认添加表头<thead>、表体<tbody>、表尾<tfoot>；我们通常只关注添加行和单元格，他们会自动放在<tbody>中

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

样式 Style

HTML属性/内联样式

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

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

高频CSS样式

width：表格宽度

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

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

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

border：表格边框/单元格边框

基本使用 Usage

[] 双轴表格

. <th>并不一定只出现在首行，可以出现在任何位置

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

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

[] 斑马纹、hover虚化背景表格

. :nth-child()结构伪类选择器-选择奇数行或偶数行

. :hover选择器-先让所有<td>虚化，再让当前行高亮

. 虚化通过设置字体颜色变淡实现，后期可以使用文字阴影，更加逼真

personal infomation
name	cnplaman	glpla
gender	male	female
age	18	24
unit	www.hkc.edu.cn/	glpla.github.io

table tr:nth-child(2n+1) {
    background-color: #efe;
}

.personal-tbl:hover td {
  color: #ccc;
  text-shadow: 0 0 4px #ccc;
}

.personal-tbl tr:hover td {
  background-color: #ff0;
  color: #333;
}

[ ]如果显式的添加了<th>，如何设计斑马纹？

[] 圆角表格

方案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;
}

[] 表格1

. 边框不重叠

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

empty-cells: show hide

1	2	3	4
5	6	7	8
9

[] 表格2

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

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

[HTML]

<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>

[CSS]

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

[] 歌单

. 使用表格布局，借助:nth-child()选择器实现

[ ] 数据的使用和保存

[ ] 使用计数器自动编号

[ ] 桌面端和移动端的适配

序号	歌手	曲名
1	Alizee	La Isla Bonita
2	Ava Max	OMG What's Happening
3	Bandari	New Morning
4	Disclosure	F For You
5	Luciano	Melô de Carla Cintia
6	Maksim Mrvica	出埃及记
7	Shakira	Whenever, Wherever
8	Sissel	Should It Matter
9	王菲	微风细雨
10	周澎	有我在

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem auto;
}

tr {
  border-bottom: 1px solid var(--main-color-green);
}

th {
  background-color: var(--main-color-green);
  color: #fff;
  height: 40px;
}

.list tr th:nth-child(1),
.list tr td:nth-child(1) {
  width: 10%;
}

.list tr th:nth-child(2) {
  width: 20%;
}

.list tr th:nth-child(4) {
  width: 10%;
}

进阶使用 Advanced

自适应表格

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

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

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

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

[ ]

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

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

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

4. 设置<td>为相对定位，并保持左侧50%的padding，预留给其伪元素

5. 为每个<td>设置不同的伪元素::before内容，和隐藏的表头内容相对应

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

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

thead tr {
    display: none;
}

tr {
    display: block;
}

td {
    //这里采用flex，是为了垂直方向对齐内容和其伪元素
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 50%;
}    

td::before {
    position: absolute;
    left: 0;
    font-weight: 700;
}

td:nth-child(1)::before {
    content: 'sn';
}

td:nth-child(2)::before {
    content: 'name';
}

td:nth-child(3)::before {
    content: 'unit';
}

td:nth-child(4)::before {
    content: 'gender';
}

固定表头表格

. 请参考粘性定位一节

总结与作业 Summary & Homework

总结: . <table>的使用和样式; . 结构伪类选择器 :nth-child()
作业: . 使用表格完善个人网站