From c28481e6668e70f2b59d8d8559a9c722db721679 Mon Sep 17 00:00:00 2001 From: Jean-Yves Perrier Date: Thu, 2 May 2024 17:23:47 +0200 Subject: [PATCH] Add HTMLTableCellElement.scope --- .../web/api/htmltablecellelement/index.md | 22 +--- .../api/htmltablecellelement/scope/index.md | 105 ++++++++++++++++++ 2 files changed, 110 insertions(+), 17 deletions(-) create mode 100644 files/en-us/web/api/htmltablecellelement/scope/index.md diff --git a/files/en-us/web/api/htmltablecellelement/index.md b/files/en-us/web/api/htmltablecellelement/index.md index fb2d13ae377c101..5a2af7443d64acf 100644 --- a/files/en-us/web/api/htmltablecellelement/index.md +++ b/files/en-us/web/api/htmltablecellelement/index.md @@ -7,7 +7,7 @@ browser-compat: api.HTMLTableCellElement {{ APIRef("HTML DOM") }} -The **`HTMLTableCellElement`** interface provides special properties and methods (beyond the regular {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header cells ({{HTMLElement("th")}})) or data cells ({{HTMLElement("td")}}), in an HTML document. +The **`HTMLTableCellElement`** interface provides special properties and methods (beyond the regular {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header cells ({{HTMLElement("th")}}) or data cells ({{HTMLElement("td")}}), in an HTML document. {{InheritanceDiagram}} @@ -24,21 +24,9 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}._ - {{domxref("HTMLTableCellElement.headers")}} {{ReadOnlyInline}} - : A {{domxref("DOMTokenList")}} describing a list of `id` of {{HTMLElement("th")}} elements that represent headers associated with the cell. It reflects the [`headers`](/en-US/docs/Web/HTML/Element/td#headers) attribute. - {{domxref("HTMLTableCellElement.rowSpan")}} - - : An positive number indicating the number of rows this cell must span; this lets a cell occupy space across multiple rows of the table. It reflects the [`rowspan`](/en-US/docs/Web/HTML/Element/td#rowspan) attribute. + - : A positive number indicating the number of rows this cell must span; this lets a cell occupy space across multiple rows of the table. It reflects the [`rowspan`](/en-US/docs/Web/HTML/Element/td#rowspan) attribute. - {{domxref("HTMLTableCellElement.scope")}} - - - : A string indicating the scope of a {{HTMLElement("th")}} cell. Header cells can be configured, using the `scope` property, the apply to a specified row or column, or to the not-yet-scoped cells within the current row group (that is, the same ancestor {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, or {{HTMLElement("tfoot")}} element). If no value is specified for `scope`, the header is not associated directly with cells in this way. Permitted values for `scope` are: - - - `col` - - : The header cell applies to the following cells in the same column (or columns, if `colspan` is used as well), until either the end of the column or another `` in the column establishes a new scope. - - `colgroup` - - : The header cell applies to all cells in the current column group that do not already have a scope applied to them. This value is only allowed if the cell is in a column group. - - `row` - - : The header cell applies to the following cells in the same row (or rows, if `rowspan` is used as well), until either the end of the row or another `` in the same row establishes a new scope. - - `rowgroup` - - : The header cell applies to all cells in the current row group that do not already have a scope applied to them. This value is only allowed if the cell is in a row group. - - The empty string (`""`) - - : The header cell has no predefined scope; the user agent will establish the scope based on contextual clues. + - : A string indicating the scope of a {{HTMLElement("th")}} cell. Possible values for `scope` are: `col`, `colgroup`, `row`, `rowgroup`, or the empty string (`""`). ## Instance methods @@ -55,13 +43,13 @@ _No specific method; inherits methods from its parent, {{domxref("HTMLElement")} - {{domxref("HTMLTableCellElement.bgColor")}} {{deprecated_inline}} - : A string containing the background color of the cells. It reflects the obsolete [`bgColor`](/en-US/docs/Web/HTML/Element/td#bgcolor) attribute. - {{domxref("HTMLTableCellElement.ch")}} {{deprecated_inline}} - - : A string containing one single character. This character is the one to align all the cell of a column on. It reflects the [`char`](/en-US/docs/Web/HTML/Element/td#char) and defaults to the decimal points associated with the language, e.g. `'.'` for English, or `','` for French. This property was optional and was not very well supported. + - : A string containing one single character. This character is the one to align all the cells of a column on. It reflects the [`char`](/en-US/docs/Web/HTML/Element/td#char) and defaults to the decimal points associated with the language, e.g. `'.'` for English, or `','` for French. This property was optional and was not very well supported. - {{domxref("HTMLTableCellElement.chOff")}} {{deprecated_inline}} - : A string containing an integer indicating how many characters must be left at the right (for left-to-right scripts; or at the left for right-to-left scripts) of the character defined by `HTMLTableCellElement.ch`. This property was optional and was not very well supported. - {{domxref("HTMLTableCellElement.height")}} {{deprecated_inline}} - : A string containing a length of pixel of the hinted height of the cell. It reflects the obsolete [`height`](/en-US/docs/Web/HTML/Element/td#height) attribute. - {{domxref("HTMLTableCellElement.noWrap")}} {{deprecated_inline}} - - : A boolean value reflecting the [`nowrap`](/en-US/docs/Web/HTML/Element/td#nowrap) attribute and indicating if cell content can be broken in several lines. + - : A boolean value reflecting the [`nowrap`](/en-US/docs/Web/HTML/Element/td#nowrap) attribute and indicating if cell content can be broken into several lines. - {{domxref("HTMLTableCellElement.vAlign")}} {{deprecated_inline}} - : A string representing an enumerated value indicating how the content of the cell must be vertically aligned. It reflects the [`valign`](/en-US/docs/Web/HTML/Element/td#valign) attribute and can have one of the following values: `"top"`, `"middle"`, `"bottom"`, or `"baseline"`. Use the CSS {{cssxref("vertical-align")}} property instead. - {{domxref("HTMLTableCellElement.width")}} {{deprecated_inline}} diff --git a/files/en-us/web/api/htmltablecellelement/scope/index.md b/files/en-us/web/api/htmltablecellelement/scope/index.md new file mode 100644 index 000000000000000..3bfd2956c579dc5 --- /dev/null +++ b/files/en-us/web/api/htmltablecellelement/scope/index.md @@ -0,0 +1,105 @@ +--- +title: "HTMLTableCellElement: scope property" +short-title: scope +slug: Web/API/HTMLTableCellElement/scope +page-type: web-api-instance-property +browser-compat: api.HTMLTableCellElement.scope +--- + +{{ APIRef("HTML DOM") }} + +The **`scope`** property of the {{domxref("HTMLTableCellElement")}} interface +indicates the scope of a {{HTMLElement("th")}} cell. + +Header cells can be configured, using the `scope` attribute, to apply to a specified row or column, or to the not-yet-scoped cells within the current row group (that is, the same ancestor {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, or {{HTMLElement("tfoot")}} element). If no value is specified for `scope`, the header is not associated directly with cells in this way. Permitted values for `scope` are: + +> **Note:** this property doesn't have a visual effect in browsers. It adds semantic information to help assistive technology like screenreaders to present the table in a more coherent way. + +## Value + +One of the following values: + +- `col` + - : The header cell applies to the following cells in the same column (or columns, if `colspan` is used as well), until either the end of the column or another `` in the column establishes a new scope. +- `colgroup` + - : The header cell applies to all cells in the current column group that do not already have a scope applied to them. This value is only allowed if the cell is in a column group. +- `row` + - : The header cell applies to the following cells in the same row (or rows, if `rowspan` is used as well), until either the end of the row or another `` in the same row establishes a new scope. +- `rowgroup` + - : The header cell applies to all cells in the current row group that do not already have a scope applied to them. This value is only allowed if the cell is in a row group. +- The empty string (`""`) + - : The header cell has no predefined scope; the user agent will establish the scope based on contextual clues. + +## Examples + +This example adds a label all the cell numbers of the first row of the `tbody`. + +### HTML + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tallest Dams +
DamCountryHeight
1.Jinping-I DamChina305 m
2.Nurek DamTajikistan300 m
3.Lianghekou DamChina295 m
4.Xiowan DamChina292 m
5.Balhetan DamChina289 m
6.Xiluodu DamChina285.5 m
7.Grande-Dixence DamSwitzerland285 m
+``` + +### Results + +{{EmbedLiveSample("Examples", "100%", 220)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}}