mdn · jasonren0403 · Oct 8, 2024 · Sep 25, 2024 · Sep 27, 2024 · Oct 8, 2024
@@ -0,0 +1,47 @@
+---
+title: HTMLTableColElement：align 属性
+slug: Web/API/HTMLTableColElement/align
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+{{domxref("HTMLTableColElement")}} 接口的 **`align`** 属性是一个指示如何在表格 {{htmlelement("col")}} 列元素中水平对齐文本的字符串。
+
+> [!NOTE]
+> 此属性已弃用，应使用 CSS 在单元格中水平对齐文本。使用 CSS {{cssxref("text-align")}} 属性，其用于水平对齐单元格中文本，且优先级更高。
+>
+> 由于 {{htmlelement("td")}} 不是 {{htmlelement("col")}} 的子元素，因此不能直接在 {{HTMLElement("col")}} 上设置它，需要使用 `td:nth-last-child(n)` 或类似值（`n` 是列号，从末尾开始计数）来选择列的单元格。
+
+## 值
+
+可能的值有：
+
+- `left`
+  - : 将文本向左对齐。使用直接应用于 {{HTMLElement("td")}} 或 {{HTMLElement("th")}} 的 `text-align: left` 代替。
+- `right`
+  - : 将文本向右对齐。使用直接应用于 `<td>` 或 `<th>` 的 `text-align: right` 代替。
+- `center`
+  - : 将文本居中对齐。使用 `text-align: center` 代替。
+
+## 示例
+
+在 {{htmlelement("td")}} 和 {{htmlelement("th")}} 元素上使用 CSS `text-align`。由于列的 {{htmlelement("td")}} 元素不是 {{htmlelement("col")}} 的子元素，在 HTML 中设置 `align` 属性或在 CSS 中对 {{HTMLElement("col")}} 元素设置 `text-align` 属性将不起作用。相反，使用 [`:is(td, tr):nth-child(n)`](/zh-CN/docs/Web/CSS/:nth-child) 选择列的单元格，其中 `n` 是列号，或类似值。
+
+{{cssxref(":nth-child()")}} 页面有一个[示例](/zh-CN/docs/Web/CSS/:nth-child#为表格列添加样式)。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("text-align")}}
+- {{cssxref(":nth-child()")}}
+- {{cssxref(":nth-last-child()")}}
+- [样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables)
@@ -0,0 +1,31 @@
+---
+title: HTMLTableColElement：ch 属性
+slug: Web/API/HTMLTableColElement/ch
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+{{domxref("HTMLTableColElement")}} 接口的 **`ch`** 属性什么都不做，它反映 {{HTMLElement("col")}} 元素的 `char` 属性。
+
+> [!NOTE]
+> 此属性旨在支持将表格单元格内容对齐到特定字符（通常是小数点），但浏览器从未实现过。
+>
+> 要实现这种对齐，请注意 {{cssxref("text-align")}} CSS 属性对字符串值的支持。
+
+## 值
+
+单个字符。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("text-align")}}
@@ -0,0 +1,31 @@
+---
+title: HTMLTableColElement：chOff 属性
+slug: Web/API/HTMLTableColElement/chOff
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+{{domxref("HTMLTableColElement")}} 接口的 **`chOff`** 属性什么都不做，它反映 {{HTMLElement("col")}} 元素的 `charoff` 属性。
+
+> [!NOTE]
+> 此属性旨在支持将表格单元格内容对齐到特定字符（通常是小数点），但浏览器从未实现过。
+>
+> 要实现这种对齐，请注意 {{cssxref("text-align")}} CSS 属性对字符串值的支持。
+
+## 值
+
+一个整数。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("text-align")}}
@@ -0,0 +1,45 @@
+---
+title: HTMLTableColElement
+slug: Web/API/HTMLTableColElement
+l10n:
+  sourceCommit: 61c822f0731f674d6a2551716ad3f271c22fe837
+---
+
+{{ APIRef("HTML DOM") }}
+
+**`HTMLTableColElement`** 接口提供用于操作表格单个列元素或列组元素的特定属性。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_从其父接口 {{domxref("HTMLElement")}} 继承属性。_
+
+- {{domxref("HTMLTableColElement.align")}} {{deprecated_inline}}
+  - : 一个表示列中单元格数据水平对齐的字符串。
+- {{domxref("HTMLTableColElement.ch")}} {{deprecated_inline}}
+  - : 一个表示单元格数据对齐字符的字符串。
+- {{domxref("HTMLTableColElement.chOff")}} {{deprecated_inline}}
+  - : 一个表示对齐字符偏移量的字符串。
+- {{domxref("HTMLTableColElement.span")}}
+  - : 一个反映 [`span`](/zh-CN/docs/Web/HTML/Element/col#span) HTML 属性的正数，指示要应用此对象属性的列数。
+- {{domxref("HTMLTableColElement.vAlign")}} {{deprecated_inline}}
+  - : 一个表示列中单元格数据垂直对齐的字符串。
+- {{domxref("HTMLTableColElement.width")}} {{deprecated_inline}}
+  - : 一个表示默认列宽的字符串。
+
+## 实例方法
+
+_没有特定的方法，从其父接口 {{domxref("HTMLElement")}} 继承方法。_
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 实现此接口的 HTML 元素：{{HTMLElement("col")}} 和 {{HTMLElement("colgroup")}}。
@@ -0,0 +1,116 @@
+---
+title: HTMLTableColElement：span 属性
+slug: Web/API/HTMLTableColElement/span
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{ APIRef("HTML DOM") }}
+
+{{domxref("HTMLTableColElement")}} 接口的 **`span`** 只读属性表示 {{htmlelement("col")}} 或 {{htmlelement("colgroup")}} 必须横跨的列数；这使得该列占据表中多列的空间。它反映 [`span`](/zh-CN/docs/Web/HTML/Element/col#span) 属性。
+
+## 值
+
+一个表示列数的正数。
+
+> [!NOTE]
+> 设置新值时，该值将被*限制为*最接近的严格正数（最多 1000）。
+
+## 示例
+
+示例提供了两个按钮来修正主体第一个单元格的列跨度。
+
+### HTML
+
+```html
+<table>
+  <colgroup>
+    <col />
+    <col span="2" class="multiColumn" />
+  </colgroup>
+  <thead>
+    <th></th>
+    <th scope="col">C1</th>
+    <th scope="col">C2</th>
+    <th scope="col">C3</th>
+    <th scope="col">C4</th>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">行 1</th>
+      <td>cell</td>
+      <td>cell</td>
+      <td>cell</td>
+      <td>cell</td>
+    </tr>
+  </tbody>
+</table>
+<button id="increase">增加列跨度</button>
+<button id="decrease">减少列跨度</button>
+<div>第一个 &lt;col&gt; 跨度 <output>2</output> 实际列。</div>
+```
+
+```css hidden
+table {
+  border-collapse: collapse;
+}
+
+th,
+td,
+table {
+  border: 1px solid black;
+}
+
+button {
+  margin: 1em 1em 1em 0;
+}
+```
+
+### CSS
+
+```css
+.multiColumn {
+  background-color: #d7d9f2;
+}
+```
+
+### JavaScript
+
+```js
+// 获取相关接口元素
+const col = document.querySelectorAll("col")[1];
+const output = document.querySelectorAll("output")[0];
+
+const increaseButton = document.getElementById("increase");
+const decreaseButton = document.getElementById("decrease");
+
+increaseButton.addEventListener("click", () => {
+  col.span = col.span + 1;
+
+  // 更新显示
+  output.textContent = col.span;
+});
+
+decreaseButton.addEventListener("click", () => {
+  col.span = col.span - 1;
+
+  // 更新显示
+  output.textContent = col.span;
+});
+```
+
+### 结果
+
+{{EmbedLiveSample("示例", "100%", 175)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLTableCellElement.colSpan")}}
@@ -0,0 +1,50 @@
+---
+title: HTMLTableColElement：vAlign 属性
+slug: Web/API/HTMLTableColElement/vAlign
+l10n:
+  sourceCommit: bb48907e64eb4bf60f17efd7d39b46c771d220a0
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+{{domxref("HTMLTableColElement")}} 接口的 **`vAlign`** 属性是一个指示如何在表格 {{htmlelement("col")}} 列元素中垂直对齐文本的字符串。
+
+> [!NOTE]
+> 此属性已弃用，应使用 CSS 在表格列中垂直对齐文本。使用 CSS {{cssxref("vertical-align")}} 属性，其用于垂直对齐列单元格中文本，且优先级更高。
+>
+> 由于 {{htmlelement("td")}} 不是 {{htmlelement("col")}} 的子元素，因此不能直接在 {{HTMLElement("col")}} 上设置它，需要使用 `td:nth-child(n)` 或类似值（`n` 是列号）来选择列的单元格。
+
+## 值
+
+可能的值有：`"top"`、`"middle"`、`"bottom"` 或 `"baseline"`。
+
+- `top`
+  - : 将文本与单元格顶部对齐。使用 `vertical-align: top` 代替。
+- `center`
+  - : 将文本与单元格垂直居中对齐，`middle` 的同义词。使用 `vertical-align: middle` 代替。
+- `middle`
+  - : 将文本与单元格垂直居中对齐。使用 `vertical-align: middle` 代替。
+- `bottom`
+  - : 将文本与单元格底部对齐。使用 `vertical-align: bottom` 代替。
+- `baseline`
+  - : 与 `top` 相似，但使文本的基线贴近顶部，这样字符的任何部分都不会超出单元格。
+
+## 示例
+
+使用 CSS `vertical-align`。由于 {{htmlelement("td")}} 不是 {{htmlelement("col")}} 的子元素，因此不能直接在 {{HTMLElement("col")}} 上设置它，需要使用 `td:nth-child(n)` 或类似值（`n` 是列号）来选择列的单元格。
+
+{{cssxref(":nth-child()")}} 页面有一个[示例](/zh-CN/docs/Web/CSS/:nth-child#为表格列添加样式)。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("vertical-align")}}
+- {{cssxref(":nth-child()")}}
+- [样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables)