How to Make a Table in HTML

Use an HTML table when you need to display data in rows and columns. Tables work best for schedules, pricing comparisons, scoreboards, and any content where readers need to compare values across categories.

What you’ll build or solve

You’ll learn how to create a table in HTML using rows, cells, and headings. You’ll also know how to keep the structure readable and easy to expand.

When this approach works best

This approach is the right choice when your content is naturally tabular and easier to scan in a grid.

Common real-world scenarios include:

• Pricing plans
• Weekly schedules
• Product comparison charts
• Scoreboards
• Student grades

This is a bad idea when the content is mostly paragraphs, cards, or layout sections. In those cases, use <div>, lists, or semantic layout tags instead.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add the table structure with rows and cells

Create the table with <table>, then add rows with <tr>, header cells with <th>, and regular cells with <td>.

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>Frontend Developer</td>
  </tr>
</table>

For more rows, repeat the same <tr> structure with matching <td> cells.

<table>
  <tr>
    <th>Course</th>
    <th>Level</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Beginner</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Intermediate</td>
  </tr>
</table>

What to look for:

• <table> creates the full grid
• <tr> creates each row
• <th> creates header cells
• <td> creates regular data cells
• Keep the same number of cells in each row

Examples you can copy

Pricing table

<table>
  <tr>
    <th>Plan</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Basic</td>
    <td>$9</td>
  </tr>
  <tr>
    <td>Pro</td>
    <td>$19</td>
  </tr>
</table>

Weekly schedule

<table>
  <tr>
    <th>Day</th>
    <th>Task</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Learn HTML</td>
  </tr>
</table>

Scoreboard

<table>
  <tr>
    <th>Player</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Mark</td>
    <td>42</td>
  </tr>
</table>

Common mistakes and how to fix them

Mistake 1: Using <td> for the header row

What the reader might do:

<table>
  <tr>
    <td>Name</td>
    <td>Role</td>
  </tr>
</table>

Why it breaks: the table loses semantic headers, which hurts accessibility and readability.

Corrected approach:

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>
</table>

Mistake 2: Uneven number of cells in rows

What the reader might do:

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>Ana</td>
  </tr>
</table>

Why it breaks: the grid becomes misaligned because rows no longer match the same column structure.

Corrected approach:

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>Frontend Developer</td>
  </tr>
</table>

Mistake 3: Using a table for page layout

What the reader might do:

<table>
  <tr>
    <td>Sidebar</td>
    <td>Main content</td>
  </tr>
</table>

Why it breaks: tables should represent data, not page structure.

Corrected approach:

<div class="layout">
  <aside>Sidebar</aside>
  <main>Main content</main>
</div>

Troubleshooting

If the table looks broken, check that every row has the same number of cells.

If the headings do not stand out, confirm you used <th> instead of <td>.

If the spacing looks cramped, add CSS padding to th and td.

If the content is not data, switch to layout elements instead of a table.

Quick recap

• Use <table> for rows and columns of related data
• Add rows with <tr>
• Use <th> for headers and <td> for data
• Keep the same number of cells in each row
• Use layout tags instead when the content is not tabular