diff --git a/files/zh-cn/web/api/htmltablecellelement/abbr/index.md b/files/zh-cn/web/api/htmltablecellelement/abbr/index.md new file mode 100644 index 00000000000000..69bd1260d1916a --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/abbr/index.md @@ -0,0 +1,89 @@ +--- +title: HTMLTableCellElement：abbr 属性 +slug: Web/API/HTMLTableCellElement/abbr +l10n: + sourceCommit: 4dec42ed700040565e8af0e14ff104054ebc20f5 +--- + +{{ APIRef("HTML DOM") }} + +{{domxref("HTMLTableCellElement")}} 接口的 **`abbr`** 属性指示与单元格相关联的缩写。如果单元格不是表头单元格 {{HTMLElement("th")}}，则忽略该属性。 + +它反映 {{HTMLElement("th")}} 元素的 `abbr` 属性。 + +> [!NOTE] +> 此属性在浏览器中不具有视觉效果。它添加信息以帮助辅助技术（像屏幕阅读器）能够使用这个缩写。 + +## 值 + +一个字符串。 + +## 示例 + +此示例将每个第一单元格的行表头相关联的缩写添加为前缀。 + +### HTML + +```html + + + + + + + + + + + + + + + + + + + + + +
制造商汽车型号
特斯拉3
比亚迪海豚
大众ID.3
+``` + +```css hidden +table { + border-collapse: collapse; +} + +th, +td, +table { + border: 1px solid black; +} + +button { + margin: 1em 1em 1em 0; +} +``` + +### JavaScript + +```js +const rows = document.querySelectorAll("thead tr"); +const cells = rows[0].cells; + +for (const cell of cells) { + cell.textContent = `${cell.textContent}（${cell.abbr}）`; +} +``` + +### 结果 + +{{EmbedLiveSample("示例", "100%", 220)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} diff --git a/files/zh-cn/web/api/htmltablecellelement/align/index.md b/files/zh-cn/web/api/htmltablecellelement/align/index.md new file mode 100644 index 00000000000000..1ad54268954f43 --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/align/index.md @@ -0,0 +1,41 @@ +--- +title: HTMLTableCellElement：align 属性 +slug: Web/API/HTMLTableCellElement/align +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{APIRef("HTML DOM")}}{{deprecated_header}} + +{{domxref("HTMLTableCellElement")}} 接口的 **`align`** 属性是一个指示如何在 {{htmlelement("th")}} 或 {{htmlelement("td")}} 表格单元格水平对齐文本的字符串。 + +> [!NOTE] +> 此属性已弃用，应使用 CSS 在单元格中水平对齐文本。使用 CSS {{cssxref("text-align")}} 属性，其用于水平对齐单元格中文本，且优先级更高。 + +## 值 + +可能的值： + +- `left` + - : 将文本向左对齐。使用 `text-align: left` 代替。 +- `right` + - : 将文本向右对齐。使用 `text-align: right` 代替。 +- `center` + - : 将文本居中对齐。使用 `text-align: center` 代替。 + +## 示例 + +使用 CSS `text-align` 替代，{{cssxref("text-align")}} 页面有一个[示例](/zh-CN/docs/Web/CSS/text-align#表格对齐)。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{cssxref("text-align")}} +- [样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables) diff --git a/files/zh-cn/web/api/htmltablecellelement/bgcolor/index.md b/files/zh-cn/web/api/htmltablecellelement/bgcolor/index.md new file mode 100644 index 00000000000000..a879f9a349a347 --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/bgcolor/index.md @@ -0,0 +1,39 @@ +--- +title: HTMLTableCellElement：bgColor 属性 +slug: Web/API/HTMLTableCellElement/bgColor +l10n: + sourceCommit: 245715b48674c1729cb63417e4a27628e30ae28c +--- + +{{APIRef("HTML DOM")}}{{deprecated_header}} + +**`HTMLTableCellElement.bgColor`** 属性用于设置单元格的背景色或者检索已弃用的 [`bgColor`](/zh-CN/docs/Web/HTML/Element/td#bgcolor) 属性的值（如果存在）。 + +> [!NOTE] +> 此属性已弃用，且应使用 CSS 设置背景色。使用 {{cssxref("background-color")}} 属性代替。 + +## 值 + +可以使用以下值类型之一： + +- 命名的颜色，像 `red` 或 `blue` +- 十六进制代码，像 `#0000dd` 或 `#00d` + +> [!NOTE] +> 这里接受的值是 CSS 颜色值的子集。仅限 {{cssxref("named-color")}} 和 3 位 或 6 位 {{cssxref("hex-color")}}（没有 alpha 通道）。虽然所有 HTML 颜色值在 CSS 中都是有效的，但在另一个方向上并非如此。 + +## 示例 + +使用 CSS `background-color` 代替。在 {{cssxref("background-color")}} 页面有个[带有 HTML 表格元素的 `background-color`](/zh-CN/docs/Web/CSS/background-color#着色表) 可用。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLTableRowElement.bgColor")}} diff --git a/files/zh-cn/web/api/htmltablecellelement/cellindex/index.md b/files/zh-cn/web/api/htmltablecellelement/cellindex/index.md new file mode 100644 index 00000000000000..3372348635154c --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/cellindex/index.md @@ -0,0 +1,80 @@ +--- +title: HTMLTableCellElement：cellIndex 属性 +slug: Web/API/HTMLTableCellElement/cellIndex +l10n: + sourceCommit: 3466b077e26ce0293b7b95cba0bd05559c3a3194 +--- + +{{ APIRef("HTML DOM") }} + +{{domxref("HTMLTableCellElement")}} 接口的 **`cellIndex`** 只读属性表示单元格在其所在行（{{htmlelement("tr")}}）中的位置。第一个单元格的索引是 `0`。 + +## 值 + +返回单元格的索引，或如果单元格不属于任何行，则返回 `-1`。 + +## 示例 + +此示例为 `tbody` 中第一行的所有单元格编号添加标签。 + +### HTML + +```html + + + + + + + + + + + + + + + + + +
商品价格
香蕉$2
大米$2.5
+``` + +```css hidden +table { + border-collapse: collapse; +} + +th, +td, +table { + border: 1px solid black; +} + +button { + margin: 1em 1em 1em 0; +} +``` + +### JavaScript + +```js +const rows = document.querySelectorAll("tbody tr"); +const cells = rows[0].cells; + +for (const cell of cells) { + cell.textContent = `${cell.textContent}（单元格 #${cell.cellIndex}）`; +} +``` + +### 结果 + +{{EmbedLiveSample("示例")}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} diff --git a/files/zh-cn/web/api/htmltablecellelement/ch/index.md b/files/zh-cn/web/api/htmltablecellelement/ch/index.md new file mode 100644 index 00000000000000..334c7295d8949c --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/ch/index.md @@ -0,0 +1,31 @@ +--- +title: HTMLTableCellElement：ch 属性 +slug: Web/API/HTMLTableCellElement/ch +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{APIRef("HTML DOM")}}{{deprecated_header}} + +{{domxref("HTMLTableCellElement")}} 接口的 **`ch`** 属性什么都不做，它反映单元格元素的 `char` 属性。 + +> [!NOTE] +> 此属性旨在支持将表格单元格内容对齐到特定字符（通常是小数点），但浏览器从未实现过。 +> +> 要实现这种对齐，请注意 {{cssxref("text-align")}} CSS 属性对字符串值的支持。 + +## 值 + +单个字符。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{cssxref("text-align")}} diff --git a/files/zh-cn/web/api/htmltablecellelement/choff/index.md b/files/zh-cn/web/api/htmltablecellelement/choff/index.md new file mode 100644 index 00000000000000..53ea58c259124b --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/choff/index.md @@ -0,0 +1,31 @@ +--- +title: HTMLTableCellElement：chOff 属性 +slug: Web/API/HTMLTableCellElement/chOff +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{APIRef("HTML DOM")}}{{deprecated_header}} + +{{domxref("HTMLTableCellElement")}} 接口的 **`chOff`** 属性什么都不做，它反映单元格元素的 `charoff` 属性。 + +> [!NOTE] +> 此属性旨在支持将表格单元格内容对齐到特定字符（通常是小数点），但浏览器从未实现过。 +> +> 要实现这种对齐，请注意 {{cssxref("text-align")}} CSS 属性对字符串值的支持。 + +## 值 + +一个数字。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{cssxref("text-align")}} diff --git a/files/zh-cn/web/api/htmltablecellelement/colspan/index.md b/files/zh-cn/web/api/htmltablecellelement/colspan/index.md new file mode 100644 index 00000000000000..ad63edbe5374bd --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/colspan/index.md @@ -0,0 +1,113 @@ +--- +title: HTMLTableCellElement：colSpan 属性 +slug: Web/API/HTMLTableCellElement/colSpan +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{ APIRef("HTML DOM") }} + +{{domxref("HTMLTableCellElement")}} 接口的 **`colSpan`** 只读属性表示此单元格必须跨越的列数；这允许单元格在表格的多列之间占据空间。它反映 [`colspan`](/zh-CN/docs/Web/HTML/Element/td#colspan) 属性。 + +## 值 + +一个表示列数的正数。 + +> [!NOTE] +> 当设置新值时，该值会被*钳制*到最接近的严格正数。 + +## 示例 + +示例提供了两个按钮来修改主体第一个单元格的列跨度。 + +### HTML + +```html + + + + + + + + + + + + + + + + + + + + + + + + + +
列 1列 2列 3列 4列 5列 6列 7列 8
12345678
+ + +
第一个单元格跨越 2 列。
+``` + +```css hidden +table { + border-collapse: collapse; +} + +th, +td, +table { + border: 1px solid black; +} + +button { + margin: 1em 1em 1em 0; +} +``` + +### JavaScript + +```js +// 获取相关接口元素 +const cell = document.querySelectorAll("tbody tr td")[0]; +const output = document.querySelectorAll("output")[0]; + +const increaseButton = document.getElementById("increase"); +const decreaseButton = document.getElementById("decrease"); + +increaseButton.addEventListener("click", () => { + cell.colSpan = cell.colSpan + 1; + + // 更新显示 + output.textContent = cell.colSpan; +}); + +decreaseButton.addEventListener("click", () => { + cell.colSpan = cell.colSpan - 1; + + // 更新显示 + output.textContent = cell.colSpan; +}); +``` + +### 结果 + +{{EmbedLiveSample("示例", "100%", 175)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLTableCellElement.rowSpan")}} +- {{domxref("HTMLTableColElement.span")}} diff --git a/files/zh-cn/web/api/htmltablecellelement/headers/index.md b/files/zh-cn/web/api/htmltablecellelement/headers/index.md new file mode 100644 index 00000000000000..6dd4494a365166 --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/headers/index.md @@ -0,0 +1,87 @@ +--- +title: HTMLTableCellElement：headers 属性 +slug: Web/API/HTMLTableCellElement/headers +l10n: + sourceCommit: 3466b077e26ce0293b7b95cba0bd05559c3a3194 +--- + +{{ APIRef("HTML DOM") }} + +{{domxref("HTMLTableCellElement")}} 接口的 **`headers`** 属性包含一组为此特定单元格充当*表头*的 {{HTMLElement("th")}} 元素的 ID 列表。 + +## 值 + +一个包含由空格分割的 ID 的字符串。 + +## 示例 + +此示例列出表格中最后一次被点击的单元格的 ID： + +### HTML + +```html + + + + + + + + + + + + + + + + + + + + + + + +
家庭作业（ID = h）考试（ID = e）项目（ID = p）
1（ID = e1）2（ID = e2）期末（ID = ef）1（ID = p1）2（ID = p2）期末（ID = pf）
15%15%15%20%10%10%15%
+最后一次点击的单元格的表头 ID：无。 +``` + +```css hidden +table { + border-collapse: collapse; +} + +th, +td, +table { + border: 1px solid black; +} + +button { + margin: 1em 1em 1em 0; +} +``` + +### JavaScript + +```js +const table = document.querySelector("table"); +const output = document.querySelector("output"); + +table.addEventListener("click", (ev) => { + output.textContent = ev.target.headers ? ev.target.headers : "无"; +}); +``` + +### 结果 + +{{EmbedLiveSample("示例")}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} diff --git a/files/zh-cn/web/api/htmltablecellelement/index.md b/files/zh-cn/web/api/htmltablecellelement/index.md new file mode 100644 index 00000000000000..8b5eeff07833b1 --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/index.md @@ -0,0 +1,69 @@ +--- +title: HTMLTableCellElement +slug: Web/API/HTMLTableCellElement +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{ APIRef("HTML DOM") }} + +**`HTMLTableCellElement`** 接口提供用于操作 HTML 文档中表格单元格、表头单元格（{{HTMLElement("th")}}）或者数据单元格（{{HTMLElement("td")}}）的布局和呈现的特定属性和方法（除了常规 {{domxref("HTMLElement")}} 接口之外，它还可以通过继承来使用）。 + +{{InheritanceDiagram}} + +## 实例属性 + +_从其父接口 {{domxref("HTMLElement")}} 继承属性。_ + +- {{domxref("HTMLTableCellElement.abbr")}} + - : 一个可以使用在 `` 元素（不可用于 {{HTMLElement("td")}}）的字符串，它为表头单元格指定备选的标签。此标签可以在其他上下文中使用，例如在描述适用于数据单元格的表头时。它特别用于为屏幕阅读器提供一个更短的术语；并且是一个有价值的无障碍工具。通常，`abbr` 的值是一个缩写或首字母缩略词，但也可以是任何在上下文中合适的文本。 +- {{domxref("HTMLTableCellElement.cellIndex")}} {{ReadOnlyInline}} + - : 一个表示单元格在其所属的 {{HTMLElement("tr")}} 元素的 {{domxref("HTMLTableRowElement.cells", "cells")}} 集合中的位置。如果单元格不属于任何 ``，则返回 `-1`。 +- {{domxref("HTMLTableCellElement.colSpan")}} + - : 一个指示此单元格必须跨越列数的正数；这允许单元格在表格的多列之间占据空间。它反映 [`colspan`](/zh-CN/docs/Web/HTML/Element/td#colspan) 属性。 +- {{domxref("HTMLTableCellElement.headers")}} {{ReadOnlyInline}} + - : 一个描述与单元格相关联的由 {{HTMLElement("th")}} 的 `id` 构成的表头列表的 {{domxref("DOMTokenList")}}。它反映 [`headers`](/zh-CN/docs/Web/HTML/Element/td#headers) 属性。 +- {{domxref("HTMLTableCellElement.rowSpan")}} + - : 一个指示此单元格必须跨越行数的正数；这允许单元格在表格的多行之间占据空间。它反映 [`rowspan`](/zh-CN/docs/Web/HTML/Element/td#rowspan) 属性。 +- {{domxref("HTMLTableCellElement.scope")}} + - : 一个指示 {{HTMLElement("th")}} 单元格范围的字符串。`scope` 可能的值有：`col`、`colgroup`、`row`、`rowgroup` 或空字符串（`""`）。 + +## 实例方法 + +_没有特定的方法，从其父接口 {{domxref("HTMLElement")}} 继承方法。_ + +## 已弃用的属性 + +> [!WARNING] +> 这些属性已弃用，不应再使用。它们被记录下来主要是为了帮助理解旧的代码库。 + +- {{domxref("HTMLTableCellElement.align")}} {{deprecated_inline}} + - : 一个包含 [`align`](/zh-CN/docs/Web/HTML/Element/td#align) 属性的值的字符串（如果存在），或者如果未设置，则为空字符串。其用于设置元素内容相对于周围 `"left"`、`"right"` 和 `"center"` 上下文的对齐方式。请使用 CSS {{cssxref("text-align")}} 属性代替。 +- {{domxref("HTMLTableCellElement.axis")}} {{deprecated_inline}} + - : 一个包含虚拟中单元格分组名称的字符串。它反映已过时的 [`axis`](/zh-CN/docs/Web/HTML/Element/td#axis) 属性。 +- {{domxref("HTMLTableCellElement.bgColor")}} {{deprecated_inline}} + - : 一个包含单元格背景色的字符串。它反映已过时的 [`bgColor`](/zh-CN/docs/Web/HTML/Element/td#bgcolor) 属性。 +- {{domxref("HTMLTableCellElement.ch")}} {{deprecated_inline}} + - : 一个包含单字符的字符串。这个字符是用来对齐某一列所有单元格内容的基准。它反映 [`char`](/zh-CN/docs/Web/HTML/Element/td#char) 并默认为与语言相关的小数点，例如，英语的默认值为 `'.'`，法语的默认值为 `','`。此属性是可选的，而且没有得到很好的支持。 +- {{domxref("HTMLTableCellElement.chOff")}} {{deprecated_inline}} + - : 一个包含整数的字符串，表示由 `HTMLTableRowElement.ch` 定义的字符的右侧（对于从左到右的文本；或者对于从右到左的文本的左侧）必须保留多少个字符。此属性是可选的，并没有得到很好的支持。 +- {{domxref("HTMLTableCellElement.height")}} {{deprecated_inline}} + - : 一个包含单元格提示高度的像素长度的字符串。此属性反映已过时的 [`height`](/zh-CN/docs/Web/HTML/Element/td#height) 属性。 +- {{domxref("HTMLTableCellElement.noWrap")}} {{deprecated_inline}} + - : 一个反映 `nowrap` 属性，且支持是否单元格内容可以分成几行的布尔值。 +- {{domxref("HTMLTableCellElement.vAlign")}} {{deprecated_inline}} + - : 一个表示枚举值的字符串，指示单元格内容必须如何对齐。它反映 [`valign`](/zh-CN/docs/Web/HTML/Element/td#valign) 属性，可以为以下值之一：`"top"`、`"middle"`、`"bottom"` 或 `"baseline"`。请使用 CSS {{cssxref("vertical-align")}} 属性代替。 +- {{domxref("HTMLTableCellElement.width")}} {{deprecated_inline}} + - : 如果可能的话，是一个指定应绘制单元格宽度的像素数的字符串。此属性反映已过时的 [`width`](/zh-CN/docs/Web/HTML/Element/td#width) 属性。使用 CSS {{cssxref("width")}} 属性代替。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 实现此接口的 HTML 元素：{{HTMLElement("tr")}} 和 {{HTMLElement("td")}}。 diff --git a/files/zh-cn/web/api/htmltablecellelement/nowrap/index.md b/files/zh-cn/web/api/htmltablecellelement/nowrap/index.md new file mode 100644 index 00000000000000..0694774053e8a5 --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/nowrap/index.md @@ -0,0 +1,29 @@ +--- +title: HTMLTableCellElement：noWrap 属性 +slug: Web/API/HTMLTableCellElement/noWrap +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{APIRef("HTML DOM API")}}{{deprecated_header}} + +{{domxref("HTMLTableCellElement")}} 接口的 **`noWrap`** 属性返回一个指示单元格的文本是否可以换行的布尔值。 + +> [!NOTE] +> 此属性已弃用，且应使用值为 `nowrap` 的 CSS {{cssxref("white-space")}} 属性代替。 + +## 值 + +一个布尔值。 + +## 示例 + +使用 CSS `white-space` 代替，在 {{cssxref("white-space")}} 页面有一个可用的[示例](/zh-CN/docs/Web/CSS/white-space#控制表格中的换行)。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} diff --git a/files/zh-cn/web/api/htmltablecellelement/rowspan/index.md b/files/zh-cn/web/api/htmltablecellelement/rowspan/index.md new file mode 100644 index 00000000000000..91225b9a3dd87b --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/rowspan/index.md @@ -0,0 +1,114 @@ +--- +title: HTMLTableCellElement：rowSpan 属性 +slug: Web/API/HTMLTableCellElement/rowSpan +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{ APIRef("HTML DOM") }} + +{{domxref("HTMLTableCellElement")}} 接口的 **`rowSpan`** 只读属性表示此单元格必须跨越的行数；这允许单元格在表格的多行之间占据空间。它反映 [`rowSpan`](/zh-CN/docs/Web/HTML/Element/td#rowSpan) 属性。 + +## 值 + +一个表示行数的正数。如果是 `0`，则表示该列中所有剩余行。 + +> [!NOTE] +> 当设置新值时，任何不是 0 的值会被*钳制*到最接近的严格正数。 + +## 示例 + +示例提供了两个按钮来修改主体第一个单元格的行跨度。 + +### HTML + +```html + + + + + + + + + + + + + + + + + + + + + + + + + +
列 1列 2
11
22
33
44
+ + +
第一个列的第二个单元格跨越 2 行。
+``` + +```css hidden +table { + border-collapse: collapse; +} + +th, +td, +table { + border: 1px solid black; +} + +button { + margin: 1em 1em 1em 0; +} +``` + +### JavaScript + +```js +// 获取相关接口元素 +const row = document.querySelectorAll("tbody tr")[1]; +const cell = row.cells[0]; +const output = document.querySelectorAll("output")[0]; + +const increaseButton = document.getElementById("increase"); +const decreaseButton = document.getElementById("decrease"); + +increaseButton.addEventListener("click", () => { + cell.rowSpan = cell.rowSpan + 1; + + // 更新显示 + output.textContent = ` ${cell.rowSpan} `; +}); + +decreaseButton.addEventListener("click", () => { + cell.rowSpan = cell.rowSpan - 1; + + // 更新显示 + output.textContent = `${cell.rowSpan == 0 ? "所有剩余的" : " " + cell.rowSpan + " "}`; +}); +``` + +### 结果 + +{{EmbedLiveSample("示例", "100%", 200)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLTableCellElement.colSpan")}} +- {{domxref("HTMLTableColElement.span")}} diff --git a/files/zh-cn/web/api/htmltablecellelement/scope/index.md b/files/zh-cn/web/api/htmltablecellelement/scope/index.md new file mode 100644 index 00000000000000..8b6cc2753b17e7 --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/scope/index.md @@ -0,0 +1,104 @@ +--- +title: HTMLTableCellElement：scope 属性 +slug: Web/API/HTMLTableCellElement/scope +l10n: + sourceCommit: 4dec42ed700040565e8af0e14ff104054ebc20f5 +--- + +{{ APIRef("HTML DOM") }} + +{{domxref("HTMLTableCellElement")}} 接口的 **`scope`** 属性指示 {{HTMLElement("th")}} 单元格的范围。 + +使用 `scope` 属性对表头单元格进行配置，以应用于指定的行或者列，或者应用于当前行组（即相同的祖先 {{HTMLElement("thead")}}、{{HTMLElement("tbody")}} 或 {{HTMLElement("tfoot")}} 元素）内尚未指定范围的单元格。如果未为 `scope` 指定值，则表头不会以这种方式与单元格相关联。`scope` 的允许值有： + +> [!NOTE] +> 此属性在浏览器中不具有视觉效果。它添加语义信息以辅助技术（像屏幕阅读器）以更连贯的方式呈现表格。 + +## 值 + +以下值之一： + +- `col` + - : 表头单元格适用于同一列（如果同时使用 `colspan`，则为列组）下单元格，直至列尾或该列中另一个 `` 设定新的范围。 +- `colgroup` + - : 表头单元格适用于当前列组中所有尚未设定范围的单元格。此值仅在单元格位于列组时允许使用。 +- `row` + - : 表头单元格适用于同一行（如果同时使用 `rowspan`，则为行组）中的单元格，直至行尾或同一行中另一个 `` 设定新的范围。 +- `rowgroup` + - : 表头单元格适用于当前行组中所有尚未设定范围的单元格。此值仅在单元格位于行组时允许使用。 +- 空字符串（`""`） + - : 表头单元格没有预定义的范围；用户代理将根据上下文线索确定范围。 + +## 示例 + +此示例为 `tbody` 第一行的所有单元格编号添加标签。 + +### HTML + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 最高的大坝 +
大坝国家高度
1.锦屏一级水电站中国305 m
2.努列克坝塔吉克斯坦300 m
3.两河口水电站中国295 m
4.小湾水电站中国292 m
5.白鹤滩水电站中国289 m
6.溪洛渡水电站中国285.5 m
7.大迪克桑斯坝瑞士285 m
+``` + +### 结果 + +{{EmbedLiveSample("示例", "100%", 260)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} diff --git a/files/zh-cn/web/api/htmltablecellelement/valign/index.md b/files/zh-cn/web/api/htmltablecellelement/valign/index.md new file mode 100644 index 00000000000000..420f40b77ce156 --- /dev/null +++ b/files/zh-cn/web/api/htmltablecellelement/valign/index.md @@ -0,0 +1,45 @@ +--- +title: HTMLTableCellElement：vAlign 属性 +slug: Web/API/HTMLTableCellElement/vAlign +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{APIRef("HTML DOM")}}{{deprecated_header}} + +{{domxref("HTMLTableCellElement")}} 接口的 **`vAlign`** 属性是一个指示如何在表格 {{htmlelement("th")}} 或 {{htmlelement("td")}} 表格单元格中垂直对齐文本的字符串。 + +> [!NOTE] +> 此属性已弃用。请使用 CSS {{cssxref("vertical-align")}} 属性来垂直对齐分段单元格中的文本。 + +## 值 + +可能的值有：`"top"`、`"middle"`、`"bottom"` 或 `"baseline"`。 + +- `top` + - : 将文本与单元格顶部对齐。使用 `vertical-align: top` 代替。 +- `center` + - : 将文本与单元格垂直居中对齐，`middle` 的同义词。使用 `vertical-align: middle` 代替。 +- `middle` + - : 将文本与单元格垂直居中对齐。使用 `vertical-align: middle` 代替。 +- `bottom` + - : 将文本与单元格底部对齐。使用 `vertical-align: bottom` 代替。 +- `baseline` + - : 与 `top` 相似，但使文本的基线贴近顶部，这样字符的任何部分都不会超出单元格。 + +## 示例 + +使用 CSS {{cssxref("vertical-align")}} 替代，它的优先级更高，如[垂直对齐表格单元格](/zh-CN/docs/Web/CSS/vertical-align#表格单元格中的垂直对齐)示例所示。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{cssxref("vertical-align")}} +- [样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables)