Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add HTMLTableCellElement.scope #33378

Merged
merged 1 commit into from
May 3, 2024
Merged

Add HTMLTableCellElement.scope #33378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 5 additions & 17 deletions files/en-us/web/api/htmltablecellelement/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}

Expand All @@ -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 `<th>` 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 `<th>` 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

Expand All @@ -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}}
Expand Down
105 changes: 105 additions & 0 deletions files/en-us/web/api/htmltablecellelement/scope/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `<th>` 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 `<th>` 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
<table>
<caption>
Tallest Dams
</caption>
<tr>
<td></td>
<th scope="col">Dam</th>
<th scope="col">Country</th>
<th scope="col">Height</th>
</tr>
<tr>
<td>1.</td>
<th scope="row">Jinping-I Dam</th>
<td>China</td>
<td>305 m</td>
</tr>
<tr>
<td>2.</td>
<th scope="row">Nurek Dam</th>
<td>Tajikistan</td>
<td>300 m</td>
</tr>
<tr>
<td>3.</td>
<th scope="row">Lianghekou Dam</th>
<td>China</td>
<td>295 m</td>
</tr>
<tr>
<td>4.</td>
<th scope="row">Xiowan Dam</th>
<td>China</td>
<td>292 m</td>
</tr>
<tr>
<td>5.</td>
<th scope="row">Balhetan Dam</th>
<td>China</td>
<td>289 m</td>
</tr>
<tr>
<td>6.</td>
<th scope="row">Xiluodu Dam</th>
<td>China</td>
<td>285.5 m</td>
</tr>
<tr>
<td>7.</td>
<th scope="row">Grande-Dixence Dam</th>
<td>Switzerland</td>
<td>285 m</td>
</tr>
</table>
```

### Results

{{EmbedLiveSample("Examples", "100%", 220)}}

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}