HTML 表格

HTML 表格是由行和列（表格数据）组成的结构化数据集，在 Web 上显示不同类型数据之间某种联系的信息表。如：活动安排表（课程表），数据统计表（人及其年龄）等。

不要使用table进行页面布局： 表格不是布局的正确工具。

创建表格

style：

<style>
html {font-family: sans-serif;
}table {border-collapse: collapse;border: 2px solid rgb(200, 200, 200);letter-spacing: 1px;font-size: 0.8rem;
}td,
th {border: 1px solid rgb(190, 190, 190);padding: 10px 20px;
}th {background-color: rgb(235, 235, 235);
}td {text-align: center;
}tr:nth-child(even) td {background-color: rgb(250, 250, 250);
}tr:nth-child(odd) td {background-color: rgb(245, 245, 245);
}caption {padding: 10px;
}
</style>

在html正文中加上<table>表格内容</table>；
表格单元格（表格最小的容器）：<td>表格数据table data </td>;
表格行（内置单元格）：<tr> 单元格 * n</tr>;
表格标题（表头单元格）（位于行或列开头，并定义行或列包含的数据类型的特殊单元格；粗体居中方便查找）：<th></th>

<table><tr><td>table data 1 1</td><td>table data 1 2</td><td>table data 1 3</td><td>table data 1 4</td></tr><tr><td>table data 2 1</td><td>table data 2 2</td><td>table data 2 3</td><td>table data 2 4</td></tr><tr><td>table data 3 1</td><td>table data 3 2</td><td>table data 3 3</td><td>table data 3 4</td>            </tr>
</table>

单元格占多行多列

colspan=“单元格(td)或标题(th)占得列数”
rowspan=“单元格或标题占得行数”

<table><tr><th>&nbsp;</th><th>table header 1</th><th>table header 2</th><th colspan="2">table header 3</th></tr><tr><th>table header 1</th><td>table data 1 1</td><td>table data 1 2</td><td>table data 1 3</td><td>table data 1 4</td></tr><tr><th rowspan="2">table header 2</th><td>table data 2 1</td><td>table data 2 2</td><td>table data 2 3</td><td>table data 2 4</td></tr><tr><td>table data 3 1</td><td>table data 3 2</td><td>table data 3 3</td><td>table data 3 4</td>            </tr>
</table>

使用<col>设置样式

colgroup和col元素对列的样式进行设定。
修改style：

<style>
html {font-family: sans-serif;
}table {border-collapse: collapse;border: 2px solid rgb(200, 200, 200);letter-spacing: 1px;font-size: 0.8rem;
}td,
th {border: 1px solid rgb(190, 190, 190);padding: 10px 20px;
}table:nth-child(3) th {background-color: rgb(235, 235, 235);
}table:nth-child(3) td {text-align: center;
}table:nth-child(3) tr:nth-child(even) td {background-color: rgb(250, 250, 250);
}table:nth-child(3) tr:nth-child(odd) td {background-color: rgb(245, 245, 245);
}caption {padding: 10px;}</style>

<table><colgroup><!-- 对应第一列 --><col><!-- 对应第二列 --><col><!-- 对应第三列 --><col style="background-color: aqua;"><!-- 对应第四，第五列 --><col span="2" style="background-color: rgb(51, 255, 0);"></colgroup><tr><th>&nbsp;</th><th>table header 1</th><th>table header 2</th><th colspan="2">table header 3</th></tr><tr><th>table header 1</th><td>table data 1 1</td><td>table data 1 2</td><td>table data 1 3</td><td>table data 1 4</td></tr><tr><th rowspan="2">table header 2</th><td>table data 2 1</td><td>table data 2 2</td><td>table data 2 3</td><td>table data 2 4</td></tr><tr><td>table data 3 1</td><td>table data 3 2</td><td>table data 3 3</td><td>table data 3 4</td>            </tr>
</table>

实例网页

添加标题caption

caption n.说明文字
caption标签写在table标签内的第一行，用来描述表格内容。

<!DOCTYPE html>
<html lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML table</title><style>table {border-collapse: collapse;border: 2px solid rgb(200, 200, 200);letter-spacing: 1px;font-size: 0.8rem;}td,th {border: 1px solid rgb(190, 190, 190);padding: 10px 20px;}td {text-align: center;}caption {padding: 10px;}</style></head><body><table><caption>表格标题（描述表格内容）</caption><tr><th>&nbsp;</th><th>table header 1</th><th>table header 2</th><th colspan="2">table header 3</th></tr><tr><th>table header 1</th><td>table data 1 1</td><td>table data 1 2</td><td>table data 1 3</td><td>table data 1 4</td></tr><tr><th rowspan="2">table header 2</th><td>table data 2 1</td><td>table data 2 2</td><td>table data 2 3</td><td>table data 2 4</td></tr><tr><td>table data 3 1</td><td>table data 3 2</td><td>table data 3 3</td><td>table data 3 4</td></tr></table></body>
</html>

表结构

页眉、页脚、正文和表标题：<thead>标题部分、<tfoot>页脚部分、<tbody>表格内容、<caption>表标题
这四个部分属于同级别，使用顺序改变，不影响表格的显示顺序（表标题->页眉->正文->页脚，如下）。

<table><caption>表格标题（描述表格内容）</caption><tfoot><tr><td colspan="2">解释</td><td colspan="3">相对于上表，此表添加了表结构。</td></tr></tfoot><tbody><tr><th>table header 1</th><td>table data 1 1</td><td>table data 1 2</td><td>table data 1 3</td><td>table data 1 4</td></tr><tr><th rowspan="2">table header 2</th><td>table data 2 1</td><td>table data 2 2</td><td>table data 2 3</td><td>table data 2 4</td></tr><tr><td>table data 3 1</td><td>table data 3 2</td><td>table data 3 3</td><td>table data 3 4</td></tr></tbody><thead><tr><th>&nbsp;</th><th>table header 1</th><th>table header 2</th><th colspan="2">table header 3</th></tr></thead>
</table><table><caption>表格标题（描述表格内容）</caption><thead><tr><th>&nbsp;</th><th>table header 1</th><th>table header 2</th><th colspan="2">table header 3</th></tr></thead><tbody><tr><th>table header 1</th><td>table data 1 1</td><td>table data 1 2</td><td>table data 1 3</td><td>table data 1 4</td></tr><tr><th rowspan="2">table header 2</th><td>table data 2 1</td><td>table data 2 2</td><td>table data 2 3</td><td>table data 2 4</td></tr><tr><td>table data 3 1</td><td>table data 3 2</td><td>table data 3 3</td><td>table data 3 4</td></tr></tbody><tfoot><tr><td colspan="2">解释</td><td colspan="3">相对于上表，此表添加了表结构。</td></tr></tfoot>
</table>

为无障碍阅读做出的努力

scope属性

将scope 属性添加到<th>元素中，以此来指明列标题和行标题

<table><caption>添加scope属性</caption><thead><tr><th scope="col">&nbsp;</th><th scope="col">table header 1</th><th scope="col">table header 2</th><th scope="col" colspan="2">table header 3</th></tr></thead><tbody><tr><th scope="row">table header 1</th><td>table data 1 1</td><td>table data 1 2</td><td>table data 1 3</td><td>table data 1 4</td></tr><tr><th scope="row" rowspan="2">table header 2</th><td>table data 2 1</td><td>table data 2 2</td><td>table data 2 3</td><td>table data 2 4</td></tr><tr><td>table data 3 1</td><td>table data 3 2</td><td>table data 3 3</td><td>table data 3 4</td></tr></tbody><tfoot><tr><td colspan="2">解释</td><td colspan="3">相对于上表，此表添加了scope属性。</td></tr></tfoot>
</table>

网页实例

id和 headers

th：要有id，用作

列标签
1） scope=“col”
2）唯一id
行标签
1） scope=“row”(或 scope=“rowgroup” rowspan=“任意大于1的数字”)
2）唯一id
td：要用headers=“列id 行id”

关于scope：

关于id和headers

网页实例（Ctrl+U查看原码）

前端之HTML 表格相关推荐

vue3.0 + xlsx 实现纯前端生成excel表格
vue3.0 + xlsx 实现纯前端生成excel表格 1.安装依赖 npm install xlsx --save 2.导入依赖 import * as XLSX from 'xlsx' // V ...
html5生成excel,H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 var arr = [ 14 { 15 "姓名":"喵喵喵" ...
纯前端实现xls表格下载
纯前端实现xls表格下载 1.createXlsStr:生成xls模板字符串函数 xls字符串,基本不需要变更,我们只需要通过变量控制结果即可 worksheet:xls的文件名(不是下载的文件名!) ...
layui table 每列加标签_【前端】layui表格中根据条件给对应的列加背景色
[前端]layui表格中根据条件给对应的列加背景色 [前端]layui表格中根据条件给对应的列加背景色 1.效果(根据条件动态给表格加背景色) 2.代码: 在我自己的项目中,由于条件比较多,提取出了一 ...
[前端笔记——HTML 表格] 8.HTML 表格
[前端笔记--HTML 表格] 8.HTML 表格 1.HTML 表格基础 1.1 什么是表格? 1.2 创建表格: 2.HTML 表格高级特性和无障碍 2.1 使用`<caption>` ...
使用js-export-excel插件实现前端导出excel表格
js-export-excel 前端导出excel模板 1.下载 npm install js-export-excel 2.使用 /*** * 前端生成excel 表格(基于 js-export-e ...
前端可编辑表格插件有哪些
前端可编辑表格插件有哪些一.总结一句话总结:jQuery Handsontable和jExcel.js 1.常用的可编辑表格插件有哪些? jQuery Handsontable和jExcel.js ...
css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货发展过程上个世纪Web开发人员流行使用表格进行 ...
excel在线_功能强大的纯前端 Excel 在线表格： Luckysheet
[导语]:Luckysheet是一款类似excel的在线表格,纯前端,功能强大.配置简单.完全开源,几行代码就能展现出一个功能完备的在线表格. 简介 Luckysheet是一款类似excel的纯前端在 ...

前端之HTML 表格