HTMLTableElement

Key Properties

Property	Type	Description
rows	HTMLCollection	All <tr> rows in the table. Live-updating collection. ▾
JS `console.log(table.rows.length); // number of rows const firstRow = table.rows[0]; const lastRow = table.rows[table.rows.length - 1];`
caption	element	The <caption> element for the table, or null. ▾
JS `const cap = table.createCaption(); cap.textContent = 'Monthly Sales';`

Common Methods

Method	Returns	Description
insertRow()	HTMLTableRowElement	Adds a new <tr> and returns it. Pass index or -1 for end. ▾
JS `const row = table.insertRow(-1); // append at end const cell1 = row.insertCell(0); const cell2 = row.insertCell(1); cell1.textContent = 'Alice'; cell2.textContent = '42';`
deleteRow()	void	Removes a row by index. ▾
JS `table.deleteRow(0); // delete first row table.deleteRow(-1); // delete last row`

Quick Examples

JS

const table = document.querySelector('table');

// Build a table from data
const data = [
  ['Alice', 'Engineer', 'London'],
  ['Bob',   'Designer', 'Berlin'],
];

data.forEach(([name, role, city]) => {
  const row = table.insertRow(-1);
  row.insertCell(0).textContent = name;
  row.insertCell(1).textContent = role;
  row.insertCell(2).textContent = city;
});

// Delete a row when clicked
table.addEventListener('click', (e) => {
  const row = e.target.closest('tr');
  if (row) row.remove();
});

Related Elements

Related Properties

Related Methods

Table Element