How to add row to table in html

HtmlHow-ToBeginner · 3 min read

How to Add a Row to a Table in HTML Easily

To add a row to a table in HTML, use the <tr> tag inside the <tbody> or <table> element. Inside the <tr>, add cells using <td> for data or <th> for headers.

📐

Syntax

Use the <tr> tag to create a new row in a table. Inside it, use <td> tags for each cell in that row. Rows go inside <tbody> or directly inside <table>.

<table>: The whole table container.
<tbody>: Groups the body rows (optional but recommended).
<tr>: Defines a table row.
<td>: Defines a cell in the row.

html

<table>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

Output

A table with one row and two cells labeled 'Cell 1' and 'Cell 2'.

💻

Example

This example shows a table with two rows. The second row is added using the <tr> tag with two cells inside.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Row Example</title>
</head>
<body>
  <table border="1" style="border-collapse: collapse; width: 50%;">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>25</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Output

A table with a header row (Name, Age) and two data rows: Alice 30 and Bob 25.

⚠️

Common Pitfalls

Common mistakes when adding rows to tables include:

Forgetting to use <tr> tags for each row, which breaks the table structure.
Not matching the number of <td> cells in each row, causing uneven columns.
Placing rows outside the <tbody> or <table> tags, which is invalid HTML.

Always ensure each row is wrapped in <tr> and cells inside <td>.

html

<!-- Wrong: Missing <tr> -->
<table border="1">
  <tbody>
    <td>Only one cell without row</td>
  </tbody>
</table>

<!-- Right: Correct row and cell -->
<table border="1">
  <tbody>
    <tr>
      <td>Proper cell inside row</td>
    </tr>
  </tbody>
</table>

Output

First table breaks layout because cell is outside row; second table shows one proper row with one cell.

📊

Quick Reference

tags to add new rows inside a table.

Each row must contain the same number of

or directly inside

Tag

Purpose

Defines the table container

Groups header rows

Groups body rows

Defines a table row
		Defines a header cell
		Defines a data cell

✅

Key Takeaways

Use

cells for proper layout.

Place rows inside

for valid HTML.

Use

for header cells and	for regular data cells. Avoid placing cells outside of rows to prevent broken tables. Related by keyword How to Add Controls to Video in HTML EasilyAudio and Video How to Add Source to Video and Audio in HTML EasilyAudio and Video How to Add Subtitles to Video in HTML EasilyAudio and Video How to Add Alt Text to Image in HTML: Simple GuideImages How to Add Background Image in HTML: Simple StepsImages Up next How to Start Ordered List from Specific Number in HTML Ul vs Ol in HTML: Key Differences and When to Use Each Get vs Post Method in HTML Form: Key Differences and Usage How to Create Checkbox in HTML: Simple Guide with Examples More in Tables How to Add Border to Table in HTML: Simple Guide How to Add Caption to Table in HTML: Simple Guide How to Add Header to Table in HTML: Simple Guide How to Center a Table in HTML: Simple Methods Explained

for header cells and

for regular data cells.

Avoid placing cells outside of rows to prevent broken tables.