# Свойство cells

Свойство `cells` хранит коллекцию ячеек `td` и `th` строки `tr`. Применяется только к ряду таблицы.

## Синтаксис

`tr.cells;`

## Пример

Давайте переберем все ряды таблицы с помощью свойства `rows`, а в каждом ряду переберем его ячейки с помощью свойства `cells`:

`<table id="table"> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table>` `let table = document.querySelector('#table'); for (let row of table.rows) { for (let cell of row.cells) { console.log(cell); } }`

## Пример

Давайте переберем все ряды таблицы с помощью свойства `rows` и узнаем количество ячеек в каждом ряду:

`<table id="table"> <tr> <td>1</td><td>2</td><td>3</td><td>4</td> </tr> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>1</td><td>2</td> </tr> </table>` `let table = document.querySelector('#table'); for (let row of table.rows) { console.log(row.cells.length); }`

## Пример

Установим фон первой ячейке:

`<table id="table"> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table>` `table, td { border: 1px solid black; }` `let table = document.querySelector('#table'); table.rows[0].cells[0].style.background = 'red';`

:

## Пример

Установим фон ячейкам таблицы по диагонали:

`<table id="table"> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table>` `table, td { border: 1px solid black; }` `let table = document.querySelector('#table'); let rows = table.rows; for (let i = 0; i < rows.length; i++) { rows[i].cells[i].style.background = 'red'; }`

:

## Смотрите также

- свойство `rows`,
  которое содержит ряды таблицы
- свойство `tHead`,
  которое содержит thead таблицы
- свойство `tFoot`,
  которое содержит tfoot таблицы
- свойство `tBodies`,
  которое содержит tbody таблицы

← →
↑
en ru