表格 table

什么是表格？表格是由行和列组成的结构化数据集（表格数据），它让你快速简单地查找某个表示不同类型数据之间的某种关系的值。比如说，某个人和他的年龄，一天或是一周，当地游泳池的时间表。

表格数据

表格标题：表格中的标题是特殊的单元格，通常在行或列的开始处，定义行或列包含的数据类型。
允许单元格跨越多行和列：表格中的标题和单元格有 colspan 和 rowspan 属性，这两个属性接受一个没有单位的数字值，数字决定了它们的宽度或高度是几个单元格。比如，colspan="2" 使一个单元格的宽度是两个单元格。
为表格中的列提供共同的样式：HTML 有一种方法可以定义整列数据的样式信息，就是 <col> 和 <colgroup> 元素。
- <col> 元素被规定包含在 <colgroup> 容器中，而 <colgroup> 就在 <table> 标签的下方

table 元素

::: tabs == align align 属性：指定了包含在文档中的表格必须如何对齐。枚举属性已弃用

left：表格将在文档左侧显示
center：表格将在文档中央显示
right：表格将在文档右侧显示

请改用 CSS 属性：

使用 margin-inline-start 和 margin-inline-end
设置 margin-left、margin-right 为 auto，或者将 margin 设置为 0 auto

== bgcolor bgcolor 属性：表格的背景颜色。已弃用

请改用 CSS 属性：background-color == border border 属性：这个整型属性定义了环绕表格外部的框的大小。如果设置为 0，这意味着 frame 属性被设置为空。已弃用

请改用 CSS 属性：border == cellpadding cellpadding 属性：这个属性定义了一个单元格的内容和它的边框之间的空间，无论显示与否。如果 cellpadding 的长度是用像素定义的，这个像素大小的空间将被应用到单元格内容的所有四边。如果长度是用百分比值定义的，内容将被居中，总的垂直空间（顶部和底部）将代表这个值。对于总的水平空间（左边和右边）也是如此。已弃用

请改用 CSS 属性：

在 <td> 或 <th> 元素上使用属性 padding
可以在 <table> 元素上使用属性值为 collapse 的 border-collapse 属性

== cellspacing cellspacing 属性：这个属性定义了水平和垂直方向上两个单元格之间空间的大小，使用百分比或像素，包括了表格的顶部与第一行的单元格、表的左边与第一列单元格、表的右边与最后一列的单元格、表的底部与最后一行单元格之间的空间。已弃用

请改用 CSS 属性：可以在 <table> 元素上使用 CSS 属性 border-spacing。border-spacing 在 border-collapse 设置为 collapse 时将无效。 == frame frame 属性：这个枚举属性定义了包围在表格周围的框架的哪个边必须显示。已弃用

void：不显示外侧边框
above：显示上部的外侧边框
below：显示下部的外侧边框
hsides：显示上部和下部的外侧边框
vsides：显示左边和右边的外侧边框
lhs：显示左边的外侧边框
rhs：显示右边的外侧边框
box：在所有四个边上显示外侧边框
border：在所有四个边上显示外侧边框

请改用 CSS 属性：border-style 和 border-width == rules rules 属性：这个枚举属性定义了在一个表格中分隔线的显示位置。已弃用

none：这表明没有分隔线将被显示；这是默认的值
groups：这将使得分隔线只显示在行组和列组之间
- 行组：通过 <thead>、<tbody> 和 <tfoot> 元素定义
- 列组：通过 <col> 和 <colgroup> 元素定义
rows：这将使得分隔线在行之间显示
cols：这将使得分隔线在列之间显示
all ：这将使得分隔线在列和行之间显示

请改用 CSS 属性：可以在适当的 <thead>、<tbody>、<tfoot>、<col> 或 <colgroup> 元素上使用 border 属性。 == summary summary 属性：定义了概括表格内容的替代文本。已弃用

请使用 <caption> 元素代替。 == width width 属性：定义了表格的宽度。已弃用

请改用 CSS 属性：width :::

caption 元素

caption 元素：它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面。

align 属性：这个可枚举属性表明了 caption 相对于 table 应该如何排列。已弃用

left：展示在表格左边
top：显示在表格前面
right：显示在表格右边
bottom：显示在表格下面

请改用 CSS 属性：caption-side 和 text-align

thead 元素

::: tabs == align align 属性：指定每个单元格内容的水平对齐方式。已弃用

left：将内容与单元格左侧对齐
center：使单元格中的内容居中
right：将内容与单元格右侧对齐
justify：在文本内容中插入空格，以便内容在单元格中对齐
char：将特殊字符上的文本内容与最小偏移量对齐，由 char 和 charoff 属性定义。如果未设置此属性，则假定为 left 该值

请改用 CSS 属性：text-align == bgcolor bgcolor 属性：定义列中每个单元格的背景色。非标准

请改用 CSS 属性：background-color == char char 属性：此属性用于设置字符以对齐列中的单元格。如果 align 未设置为 char ，则忽略此属性。已弃用

请改用 CSS 属性：text-align == charoff charoff 属性：已弃用 == valign valign 属性：已弃用 :::

tbody 元素

tfoot 元素

tr 元素

th 元素

td 元素

col 元素

colgroup 元素

tr 属性

属性	说明
`align`	定义表格行的内容对齐方式（1）`left`：左对齐内容（默认值）（2）`right`：右对齐内容（3）`center`：居中对齐内容（th 元素的默认值）（4）`justify`：对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）（5）`char`：将内容对准指定字符
`valign`	规定表格行中内容的垂直对齐方式（1）`top`：对内容进行上对齐（2）`middle`：对内容进行居中对齐（默认值）（3）`bottom`：对内容进行下对齐（4）`baseline`：与基线对齐

td 属性

属性	说明
`colspan`	规定单元格可横跨的列数
`rowspan`	规定单元格可横跨的行数
`valign`	规定单元格内容的垂直排列方式（1）`top`：对内容进行上对齐（2）`middle`：对内容进行居中对齐（默认值）（3）`bottom`：对内容进行下对齐（4）`baseline`：与基线对齐
`width`	规定表格单元格的宽度

th 属性

th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本

属性	说明
`align`	定义表格行的内容对齐方式（1）`left`：左对齐内容（默认值）（2）`right`：右对齐内容（3）`center`：居中对齐内容（th 元素的默认值）（4）`justify`：对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）（5）`char`：将内容对准指定字符
`valign`	规定单元格内容的垂直排列方式（1）`top`：对内容进行上对齐（2）`middle`：对内容进行居中对齐（默认值）（3）`bottom`：对内容进行下对齐（4）`baseline`：与基线对齐
`colspan`	规定单元格可横跨的列数
`rowspan`	规定单元格可横跨的行数
`width`	规定表格单元格的宽度
`height`	规定表格单元格的高度

thead 属性

属性	说明
`align`	定义 thead 元素中内容的对齐方式（1）`left`：左对齐内容（默认值）（2）`right`：右对齐内容（3）`center`：居中对齐内容（th 元素的默认值）（4）`justify`：对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）（5）`char`：将内容对准指定字符
`valign`	规定 thead 元素中内容的垂直对齐方式（1）`top`：对内容进行上对齐（2）`middle`：对内容进行居中对齐（默认值）（3）`bottom`：对内容进行下对齐（4）`baseline`：与基线对齐

tbody 属性

属性	说明
`align`	定义 tbody 元素中内容的对齐方式（1）`left`：左对齐内容（默认值）（2）`right`：右对齐内容（3）`center`：居中对齐内容（th 元素的默认值）（4）`justify`：对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）（5）`char`：将内容对准指定字符
`valign`	规定 tbody 元素中内容的垂直对齐方式（1）`top`：对内容进行上对齐（2）`middle`：对内容进行居中对齐（默认值）（3）`bottom`：对内容进行下对齐（4）`baseline`：与基线对齐

tfoot 属性

属性	说明
`align`	定义 tfoot 元素中内容的对齐方式式（1）`left`：左对齐内容（默认值）（2）`right`：右对齐内容（3）`center`：居中对齐内容（th 元素的默认值）（4）`justify`：对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）（5）`char`：将内容对准指定字符
`valign`	规定 tfoot 元素中内容的垂直对齐方式（1）`top`：对内容进行上对齐（2）`middle`：对内容进行居中对齐（默认值）（3）`bottom`：对内容进行下对齐（4）`baseline`：与基线对齐

colgroup/col

colgroup 标签用于对表格中的列进行组合，以便对其进行格式化
colgroup 标签只能在 table 元素中使用
col 标签可放在 colgroup 里面
col 语法：<col span="" style="">

属性	说明
`span`	规定列组应该横跨的列数
`align`	定义在列组合中内容的水平对齐方式（1）`left`：左对齐内容（默认值）（2）`right`：右对齐内容（3）`center`：居中对齐内容（th 元素的默认值）（4）`justify`：对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）（5）`char`：将内容对准指定字符
`valign`	定义在列组合中内容的垂直对齐方式（1）`top`：对内容进行上对齐（2）`middle`：对内容进行居中对齐（默认值）（3）`bottom`：对内容进行下对齐（4）`baseline`：与基线对齐
`width`	规定列组合的宽度

代码案例

html

<table border="1">
  <caption>
    我的标题
  </caption>
  <colgroup span="2" style="background-color:green"></colgroup>
  <colgroup style="background-color:yellow"></colgroup>
  <thead>
    <tr>
      <th>月份-英文</th>
      <th>月份-中文</th>
      <th>月份-数字</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>1月</td>
      <td>1</td>
    </tr>
    <tr>
      <td>February</td>
      <td>2月</td>
      <td>2</td>
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>

表格 table ​

table 元素 ​

caption 元素 ​

thead 元素 ​

tbody 元素 ​

tfoot 元素 ​

tr 元素 ​

th 元素 ​

td 元素 ​

col 元素 ​

colgroup 元素 ​

tr 属性 ​

td 属性 ​

th 属性 ​

thead 属性 ​

tbody 属性 ​

tfoot 属性 ​

colgroup/col ​

代码案例 ​