diff --git a/files/en-us/web/api/htmltablecellelement/cellindex/index.md b/files/en-us/web/api/htmltablecellelement/cellindex/index.md
new file mode 100644
index 000000000000000..1a25adda529bf32
--- /dev/null
+++ b/files/en-us/web/api/htmltablecellelement/cellindex/index.md
@@ -0,0 +1,82 @@
+---
+title: "HTMLTableCellElement: cellIndex property"
+short-title: cellIndex
+slug: Web/API/HTMLTableCellElement/cellIndex
+page-type: web-api-instance-property
+browser-compat: api.HTMLTableCellElement.cellIndex
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`cellIndex`** read-only property of the {{domxref("HTMLTableCellElement")}} interface
+represents the position of a cell within its row ({{htmlelement("tr")}}). The first cell has an index of `0`.
+
+## Value
+
+Returns the index of the cell, or `-1` if the cell is not part of any row.
+
+## Examples
+
+This example adds a label all the cell numbers of the first row of the `tbody`.
+
+### HTML
+
+```html
+
+
+
+
Item
+
Price
+
+
+
+
+
Bananas
+
$2
+
+
+
Rice
+
$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 #${cell.cellIndex})`;
+}
+```
+
+### Result
+
+{{EmbedLiveSample("Examples")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/htmltablecellelement/index.md b/files/en-us/web/api/htmltablecellelement/index.md
index a58511d94e55d13..fb2d13ae377c101 100644
--- a/files/en-us/web/api/htmltablecellelement/index.md
+++ b/files/en-us/web/api/htmltablecellelement/index.md
@@ -16,9 +16,9 @@ The **`HTMLTableCellElement`** interface provides special properties and methods
_Inherits properties from its parent, {{domxref("HTMLElement")}}._
- {{domxref("HTMLTableCellElement.abbr")}}
- - : A string that can be used on `
` elements (not on {{HTMLElement("td")}}), specifying an alternative label for the header cell. This alternate label can be used in other contexts, such as when describing the headers that apply to a data cell. This is used to offer a shorter term for use by screen readers in particular, and is a valuable accessibility tool. Usually, the value of `abbr` is an abbreviation or acronym, but can be any text that's appropriate contextually.
+ - : A string that can be used on `
` elements (not on {{HTMLElement("td")}}), specifying an alternative label for the header cell. This alternate label can be used in other contexts, such as when describing the headers that apply to a data cell. This is used to offer a shorter term for use by screen readers in particular; and is a valuable accessibility tool. Usually, the value of `abbr` is an abbreviation or acronym, but can be any text that's appropriate contextually.
- {{domxref("HTMLTableCellElement.cellIndex")}} {{ReadOnlyInline}}
- - : A long integer representing the cell's position in the {{domxref("HTMLTableRowElement.cells", "cells")}} collection of the {{HTMLElement("tr")}} the cell is contained within. If the cell doesn't belong to a `
`, it returns `-1`.
+ - : A number representing the cell's position in the {{domxref("HTMLTableRowElement.cells", "cells")}} collection of the {{HTMLElement("tr")}} the cell is contained within. If the cell doesn't belong to a `
`, it returns `-1`.
- {{domxref("HTMLTableCellElement.colSpan")}}
- : A positive number indicating the number of columns this cell must span; this lets the cell occupy space across multiple columns of the table. It reflects the [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute.
- {{domxref("HTMLTableCellElement.headers")}} {{ReadOnlyInline}}
diff --git a/files/en-us/web/api/htmltablerowelement/cells/index.md b/files/en-us/web/api/htmltablerowelement/cells/index.md
new file mode 100644
index 000000000000000..73918d00c1710eb
--- /dev/null
+++ b/files/en-us/web/api/htmltablerowelement/cells/index.md
@@ -0,0 +1,113 @@
+---
+title: "HTMLTableRowElement: cells property"
+short-title: cells
+slug: Web/API/HTMLTableRowElement/cells
+page-type: web-api-instance-property
+browser-compat: api.HTMLTableRowElement.cells
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`cells`** read-only property of the {{domxref("HTMLTableRowElement")}} interface
+returns a live {{domxref("HTMLCollection")}} containing the cells in the row. The `HTMLCollection` is live and is automatically updated when cells are added or removed.
+
+## Value
+
+A live {{domxref("HTMLCollection")}} of {{domxref("HTMLTableCellElement")}} objects.
+
+## Examples
+
+This example uses `HTMLTableRowElement.cells` to display the number of cell in a row.
+
+### HTML
+
+```html
+
+
+
+
C1
+
C2
+
C3
+
C4
+
C5
+
+
+
+
+
Cell 1
+
Cell 2
+
+
+
+
+
+
+
This first row has cell(s).
+```
+
+```css hidden
+table {
+ border-collapse: collapse;
+}
+
+th,
+td,
+table {
+ border: 1px solid black;
+}
+
+button {
+ margin: 1em 1em 1em 0;
+}
+```
+
+### JavaScript
+
+```js
+// Obtain relevant interface elements
+const bodySection = document.querySelectorAll("tbody")[0];
+const row = bodySection.rows[0]; // Select the first row of the body section
+const cells = row.cells; // The collection is live, therefore always up-to-date
+const cellNumberDisplay = document.querySelectorAll("output")[0];
+
+const addButton = document.getElementById("add");
+const removeButton = document.getElementById("remove");
+
+function updateCellNumber() {
+ cellNumberDisplay.textContent = cells.length;
+}
+
+addButton.addEventListener("click", () => {
+ // Add a new cell at the end of the first row
+ const newCell = row.insertCell();
+ newCell.textContent = `Cell ${cells.length}`;
+
+ // Update the row counter
+ updateCellNumber();
+});
+
+removeButton.addEventListener("click", () => {
+ // Delete the row from the body
+ row.deleteCell(-1);
+
+ // Update the row counter
+ updateCellNumber();
+});
+```
+
+### Result
+
+{{EmbedLiveSample("Examples", "100%", 175)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLTableRowElement.insertCell()")}}
+- {{domxref("HTMLTableRowElement.deleteCell()")}}
diff --git a/files/en-us/web/api/htmltablerowelement/deletecell/index.md b/files/en-us/web/api/htmltablerowelement/deletecell/index.md
new file mode 100644
index 000000000000000..100c9e8826f6ec5
--- /dev/null
+++ b/files/en-us/web/api/htmltablerowelement/deletecell/index.md
@@ -0,0 +1,130 @@
+---
+title: "HTMLTableRowElement: deleteCell() method"
+short-title: deleteCell()
+slug: Web/API/HTMLTableRowElement/deleteCell
+page-type: web-api-instance-method
+browser-compat: api.HTMLTableRowElement.deleteCell
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`deleteCell()`** method of the {{domxref("HTMLTableRowElement")}} interface removes a
+specific row cell from a given {{htmlelement("tr")}}.
+
+## Syntax
+
+```js-nolint
+deleteCell(index)
+```
+
+### Parameters
+
+- `index` {{optional_inline}}
+ - : The cell index of the cell to remove. If `index` is `-1` or equal to the number of cells, the last cell of the row is removed.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+### Exceptions
+
+- `IndexSizeError` {{domxref("DOMException")}}
+ - : Thrown if `index` is greater than the number of cells or if it is smaller than `-1`.
+
+## Examples
+
+This example uses {{domxref("HTMLTableRowElement.insertCell()")}} to append a new cell to a
+row.
+
+### HTML
+
+```html
+
+
+
+
C1
+
C2
+
C3
+
C4
+
C5
+
+
+
+
+
Cell 1
+
Cell 2
+
+
+
+
+
+
+
This first row has cell(s).
+```
+
+```css hidden
+table {
+ border-collapse: collapse;
+}
+
+th,
+td,
+table {
+ border: 1px solid black;
+}
+
+button {
+ margin: 1em 1em 1em 0;
+}
+```
+
+### JavaScript
+
+```js
+// Obtain relevant interface elements
+const bodySection = document.querySelectorAll("tbody")[0];
+const row = bodySection.rows[0]; // Select the first row of the body section
+const cells = row.cells; // The collection is live, therefore always up-to-date
+const cellNumberDisplay = document.querySelectorAll("output")[0];
+
+const addButton = document.getElementById("add");
+const removeButton = document.getElementById("remove");
+
+function updateCellNumber() {
+ cellNumberDisplay.textContent = cells.length;
+}
+
+addButton.addEventListener("click", () => {
+ // Add a new cell at the end of the first row
+ const newCell = row.insertCell();
+ newCell.textContent = `Cell ${cells.length}`;
+
+ // Update the row counter
+ updateCellNumber();
+});
+
+removeButton.addEventListener("click", () => {
+ // Delete the row from the body
+ row.deleteCell(-1);
+
+ // Update the row counter
+ updateCellNumber();
+});
+```
+
+### Result
+
+{{EmbedLiveSample("Examples", "100%", 175)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLTableElement.insertRow()")}}
+- The HTML element representing cells: {{domxref("HTMLTableCellElement")}}
diff --git a/files/en-us/web/api/htmltablerowelement/index.md b/files/en-us/web/api/htmltablerowelement/index.md
index b2f5a5bdcbcb3cb..184ff4b29a29979 100644
--- a/files/en-us/web/api/htmltablerowelement/index.md
+++ b/files/en-us/web/api/htmltablerowelement/index.md
@@ -18,29 +18,29 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}._
- {{domxref("HTMLTableRowElement.cells")}} {{ReadOnlyInline}}
- : Returns a live {{domxref("HTMLCollection")}} containing the cells in the row. The `HTMLCollection` is live and is automatically updated when cells are added or removed.
- {{domxref("HTMLTableRowElement.rowIndex")}} {{ReadOnlyInline}}
- - : Returns a `long` value which gives the logical position of the row within the entire table. If the row is not part of a table, returns `-1`.
+ - : Returns a number that gives the logical position of the row within the entire table. If the row is not part of a table, returns `-1`.
- {{domxref("HTMLTableRowElement.sectionRowIndex")}} {{ReadOnlyInline}}
- - : Returns a `long` value which gives the logical position of the row within the table section it belongs to. If the row is not part of a section, returns `-1`.
+ - : Returns a number that gives the logical position of the row within the table section it belongs to. If the row is not part of a section, returns `-1`.
## Instance methods
_Inherits methods from its parent, {{domxref("HTMLElement")}}_.
-- {{domxref("HTMLTableRowElement.deleteCell()", "deleteCell(index)")}}
+- {{domxref("HTMLTableRowElement.deleteCell()")}}
- : Removes the cell corresponding to `index`. If `index` is `-1`, the last cell of the row is removed. If `index` is less than `-1` or greater than the amount of cells in the collection, a {{DOMxRef("DOMException")}} with the value `IndexSizeError` is raised.
-- {{domxref("HTMLTableRowElement.insertCell()", "insertCell(index)")}}
- - : Returns an {{DOMxRef("HTMLTableCellElement")}} representing a new cell of the row. The cell is inserted in the collection of cells immediately before the given `index` position in the row. If `index` is `-1`, the new cell is appended to the collection. If `index` is less than `-1` or greater than the number of cells in the collection, a {{DOMxRef("DOMException")}} with the value `IndexSizeError` is raised.
+- {{domxref("HTMLTableRowElement.insertCell()")}}
+ - : Returns an {{domxref("HTMLTableCellElement")}} representing a new cell of the row. The cell is inserted in the collection of cells immediately before the given `index` position in the row. If `index` is `-1`, the new cell is appended to the collection. If `index` is less than `-1` or greater than the number of cells in the collection, a {{DOMxRef("DOMException")}} with the value `IndexSizeError` is raised.
## Deprecated properties
> **Warning:** These properties have been deprecated and should no longer be used. They are documented primarily to help understand older code bases.
- {{domxref("HTMLTableRowElement.align")}} {{deprecated_inline}}
- - : A string containing an enumerated value reflecting the [`align`](/en-US/docs/Web/HTML/Element/tr#align) attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are `"left"`, `"right"`, and `"center"`.
+ - : A string containing an enumerated value reflecting the [`align`](/en-US/docs/Web/HTML/Element/tr#align) attribute. It indicates the alignment of the element's contents to the surrounding context. The possible values are `"left"`, `"right"`, and `"center"`.
- {{domxref("HTMLTableRowElement.bgColor")}} {{deprecated_inline}}
- : A string containing the background color of the cells. It reflects the obsolete [`bgColor`](/en-US/docs/Web/HTML/Element/tr#bgcolor) attribute.
- {{domxref("HTMLTableRowElement.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/tr#char) and default 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 cell of a column on. It reflects the [`char`](/en-US/docs/Web/HTML/Element/tr#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("HTMLTableRowElement.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 `HTMLTableRowElement.ch`. This property was optional and was not very well supported.
- {{domxref("HTMLTableRowElement.vAlign")}} {{deprecated_inline}}
diff --git a/files/en-us/web/api/htmltablerowelement/insertcell/index.md b/files/en-us/web/api/htmltablerowelement/insertcell/index.md
index 4cf425cd2fff42b..a7679bf03e87735 100644
--- a/files/en-us/web/api/htmltablerowelement/insertcell/index.md
+++ b/files/en-us/web/api/htmltablerowelement/insertcell/index.md
@@ -8,7 +8,7 @@ browser-compat: api.HTMLTableRowElement.insertCell
{{APIRef("HTML DOM")}}
-The **`HTMLTableRowElement.insertCell()`** method inserts a new
+The **`insertCell()`** method of the {{domxref("HTMLTableRowElement")}} interface inserts a new
cell ({{HtmlElement("td")}}) into a table row ({{HtmlElement("tr")}}) and returns a
reference to the cell.
@@ -28,9 +28,6 @@ insertCell()
insertCell(index)
```
-{{domxref("HTMLTableRowElement")}} is a reference to an HTML {{HtmlElement("tr")}}
-element.
-
### Parameters
- `index` {{optional_inline}}
@@ -48,55 +45,88 @@ cell.
## Examples
-This example uses {{domxref("HTMLTableElement.insertRow()")}} to append a new row to a
-table.
-
-We then use `insertCell(0)` to insert a new cell in the new row. (To be
-valid HTML, a `
` must have at least one `
`
-element.) Finally, we add some text to the cell using
-{{domxref("Document.createTextNode()")}} and {{domxref("Node.appendChild()")}}.
+This example uses {{domxref("HTMLTableRowElement.insertCell()")}} to append a new cell to a
+row.
### HTML
```html
-
-
-
Row 1
-
-
-
Row 2
-
-
-
Row 3
-
+
+
+
+
C1
+
C2
+
C3
+
C4
+
C5
+
+
+
+
+
Cell 1
+
Cell 2
+
+
+
+
+
+
This first row has cell(s).
+```
+
+```css hidden
+table {
+ border-collapse: collapse;
+}
+
+th,
+td,
+table {
+ border: 1px solid black;
+}
+
+button {
+ margin: 1em 1em 1em 0;
+}
```
### JavaScript
```js
-function addRow(tableID) {
- // Get a reference to the table
- let tableRef = document.getElementById(tableID);
-
- // Insert a row at the end of the table
- let newRow = tableRef.insertRow(-1);
+// Obtain relevant interface elements
+const bodySection = document.querySelectorAll("tbody")[0];
+const row = bodySection.rows[0]; // Select the first row of the body section
+const cells = row.cells; // The collection is live, therefore always up-to-date
+const cellNumberDisplay = document.querySelectorAll("output")[0];
- // Insert a cell in the row at index 0
- let newCell = newRow.insertCell(0);
+const addButton = document.getElementById("add");
+const removeButton = document.getElementById("remove");
- // Append a text node to the cell
- let newText = document.createTextNode("New bottom row");
- newCell.appendChild(newText);
+function updateCellNumber() {
+ cellNumberDisplay.textContent = cells.length;
}
-// Call addRow() with the table's ID
-addRow("my-table");
+addButton.addEventListener("click", () => {
+ // Add a new cell at the end of the first row
+ const newCell = row.insertCell();
+ newCell.textContent = `Cell ${cells.length}`;
+
+ // Update the row counter
+ updateCellNumber();
+});
+
+removeButton.addEventListener("click", () => {
+ // Delete the row from the body
+ row.deleteCell(-1);
+
+ // Update the row counter
+ updateCellNumber();
+});
```
### Result
-{{EmbedLiveSample("Examples")}}
+{{EmbedLiveSample("Examples", "100%", 175)}}
## Specifications
diff --git a/files/en-us/web/api/htmltablerowelement/rowindex/index.md b/files/en-us/web/api/htmltablerowelement/rowindex/index.md
index c75c28b3d316458..a547128ec40c1c9 100644
--- a/files/en-us/web/api/htmltablerowelement/rowindex/index.md
+++ b/files/en-us/web/api/htmltablerowelement/rowindex/index.md
@@ -61,10 +61,10 @@ This example uses JavaScript to label all the row numbers in a table.
### JavaScript
```js
-let rows = document.querySelectorAll("tr");
+const rows = document.querySelectorAll("tr");
rows.forEach((row) => {
- let z = document.createElement("td");
+ const z = document.createElement("td");
z.textContent = `(row #${row.rowIndex})`;
row.appendChild(z);
});
@@ -74,6 +74,10 @@ rows.forEach((row) => {
{{EmbedLiveSample("Examples")}}
+## Specifications
+
+{{Specifications}}
+
## Browser compatibility
{{Compat}}
diff --git a/files/en-us/web/api/htmltablerowelement/sectionrowindex/index.md b/files/en-us/web/api/htmltablerowelement/sectionrowindex/index.md
index cf257f87cbee9f0..d078aea3a91c60a 100644
--- a/files/en-us/web/api/htmltablerowelement/sectionrowindex/index.md
+++ b/files/en-us/web/api/htmltablerowelement/sectionrowindex/index.md
@@ -1,6 +1,6 @@
---
title: "HTMLTableRowElement: sectionRowIndex property"
-short-title: rowIndex
+short-title: sectionRowIndex
slug: Web/API/HTMLTableRowElement/sectionRowIndex
page-type: web-api-instance-property
browser-compat: api.HTMLTableRowElement.sectionRowIndex
@@ -55,10 +55,10 @@ This example uses JavaScript to label all the row numbers of the `tbody`.
### JavaScript
```js
-let rows = document.querySelectorAll("tbody tr");
+const rows = document.querySelectorAll("tbody tr");
rows.forEach((row) => {
- let z = document.createElement("td");
+ const z = document.createElement("td");
z.textContent = `(row #${row.rowIndex})`;
row.appendChild(z);
});
@@ -68,6 +68,10 @@ rows.forEach((row) => {
{{EmbedLiveSample("Examples")}}
+## Specifications
+
+{{Specifications}}
+
## Browser compatibility
{{Compat}}