开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情
表格是由行和列（表格数据）组成的结构化数据集。常用于展示同类结构下的多种数据，用于组织、对比和分析等。一般包括表头、数据行和表尾三部分。通过表格，可以快速轻松地查找指示不同类型数据之间某种联系的值。
表元素 -- <table>
<table>元素以表格的形式表示具有多个维度的数据。
属性
<table>身上除了全局属性外，其余的属性皆被弃用了。虽然还能用，但是不推荐。
可访问性问题
在定义表格时通常需要提供一个内容清晰简洁的<caption>元素，以描述了表的用途（比如“xx年级xx班学生表”）。它可以帮助人们决定是需要阅读表内容的其余部分还是跳过它。同时也助于视力低下的人以及有认知问题的人通过辅助技术（如屏幕阅读器）进行导航。
对于某些过于复杂的表，最好将其拆分为一组较小的相关表，这些表不依赖colspan和rowspan属性。除了帮助使用辅助技术的人了解表的内容之外，这也可能有助于有认知问题的人，他们可能难以理解表布局所描述的关联。
如果无法拆分表，请在<td>元素上使用id和headers属性的组合，以编程方式将每个表单元格与与该单元格关联的标头相关联。
表标题元素 -- <caption>
<caption>元素指定表的标题。
使用说明
在使用<caption>元素时，其必须是其父<table>元素的第一个子元素。
在<table>上使用CSSbackground-color属性时，<caption>不会起作用。如果希望两者有相同的背景颜色，也可以向<caption>元素添加background-color。
表列组元素 -- <colgroup>与表列元素 -- <col>
<colgroup>元素定义表中的一组列。可用于将样式应用于整个列，而不是为每个单元格和每一行重复样式。
<col>元素定义表中的列和所有公共单元格上的公共语义。
属性
<colgroup>与<col>身上均有一个span属性，值为一个正整数，其作用是一样的，都指定<colgroup>（或<col>）元素跨越的连续列数。如果不存在，则其默认值为1， 最大值为1000。如果<colgroup>中有一个或多个<col>元素，则不允许使用span属性。
注意：在
<table>元素中使用<colgroup>时，<colgroup>必须出现在任何可选的<caption>元素之后，在任何<thead>、<th>、<tbody>、<tfoot>和<tr>元素之前。
表头元素 -- <thead>、表体元素 -- <tbody>以及表尾元素 -- <tfoot>
<thead>元素用于定义一组定义表列的头部的行。
<tbody>元素用于封装一组表行（<tr>元素），指示它们构成了表的主体（<table>)。
<tfoot>元素定义了一组表格中各列的汇总行。
三者一起使用，以指定表的每个部分（表头、表体、表尾）。并且其内容只能包含零个或多个<tr>元素。
<tbody>使用说明
-
如果表中包含
<thead>，则<tbody>块必须紧跟在它之后。 -
如果
<tr>元素被指定在现有的<tbody>元素之外，作为<table>的直接子元素，浏览器将会生成一个<tbody>元素封装这些元素。 -
当一个表显示在屏幕上下文中(例如窗口)无法完整显示整个表时（比如屏幕不够大），浏览器可以让用户滚动同一个父表的
<thead>、<tbody>、<tfoot>和<caption>块的内容。 -
每个表可以连续使用多个
<tbody>，将大型表中的行划分为部分，如果需要，每个部分可以单独格式化。如果<tbody>不是连续的话，浏览器将纠正此作者错误，确保任何<thead>和<tfoot>元素分别呈现为表的第一个和最后一个元素。
注意：
<thead>必须出现在任何<caption>或<colgroup>元素之后，甚至是隐式定义的元素，但出现在任何<tbody>（内嵌表格），<tfoot>和<tr>元素之前。<tfoot>必须出现在任何<标题>、<colgroup>、<thead>、<tbody>或<tr>元素之后
<tr>、<th>和<td>
<tr>元素定义表格中的行。然后可以使用<td>和<th>元素来建立一行中的单元格。
<th>元素将单元格定义为一组表格单元格的标题。
<td>元素定义包含数据的表的单元格。
属性
<th>属性
| 属性名 | 简介 |
|---|---|
| abbr | 此属性包含单元格内容的简短缩写说明。 |
| headers | 值为空格分隔的字符串列表，每个字符串对应于应用于此元素的<th>元素的id属性。 |
| colspan | 值为一个非负整数值，该值指示单元格扩展的列数。其默认值为 1。 |
| rowspan | 值为一个非负整数值，该值指示单元格扩展的行数。其默认值为 1。 |
| scope | 定义了<th>元素(在<th>中定义)所关联的单元格。 |
colspan的值大于1000将被视为不正确，并将设置为默认值1。
-
scope属性允许的值有：row：<th>与其所属行的所有单元格相关。col：<th>与其所属列的所有单元格相关。rowgroup：<th>与其所属行组的所有单元格相关。colgroup：<th>与其所属列组的所有单元格相关。
如果没有指定
scope属性，或者它的值不是row、col、rowgroup或colgroup，那么浏览器会自动选择头单元格应用的单元格集。scope属性在简单上下文中是多余的，因为范围是推断的。指定<th>的范围主要是改善使用辅助技术的人的体验，因为某些辅助技术可能无法得出正确的推论。在复杂的表格中，可以指定范围以提供有关与标题相关的单元格的必要信息。
<td>属性
| 属性名 | 简介 |
|---|---|
| headers | 值为空格分隔的字符串列表，每个字符串对应于应用于此元素的<th>元素的id属性。 |
| colspan | 值为一个非负整数值，该值指示单元格扩展的列数。其默认值为 1。 |
| rowspan | 值为一个非负整数值，该值指示单元格扩展的行数。其默认值为 1。 |
辅助技术（如屏幕阅读器）可能难以分析过于复杂的表，导致无法以严格的水平或垂直方式关联标题单元格。因此通常需要在<td>元素上使用colspan和rowspan属性的存在来指示。
其余注意点与<th>属性类似。
<table>使用示例
不应该使用HTML表格的场景
HTML表格的设计目的是用于表格数据。过去很多人常常滥用HTML表格来布置网页，例如一行包含标题，一行包含内容列，一行包含页脚等。
使用表格而不是CSS布局技术是不好的做法，主要原因如下：
-
布局表格会影响可访问性：有视力障碍的用户使用的屏幕阅读器会解析HTML页面中存在的标记，并将内容读出给用户。但是表格不是正确的布局工具，并且标记表格比CSS布局技术更复杂，因此屏幕阅读器的输出会让用户感到困惑。
-
表格产生标签汤：表格布局通常涉及比适当的布局技术更复杂的标记结构。这可能会导致代码更难编写、维护和调试。
-
表格不会自动响应：当使用适当的布局容器（如
<header>、<section>、<article>或<div>时，其宽度默认为其父元素的100%。默认情况下，表格的大小由其内容决定，因此需要采取额外的措施来使表格布局样式有效地跨各种设备工作。
