HtmlHow-ToBeginner · 3 min read

How to Create Table in HTML: Simple Syntax and Example

To create a table in HTML, use the <table> element with rows defined by <tr> and cells by <td> for data or <th> for headers. This structure organizes data in rows and columns visible in the browser.

📐

Syntax

The basic structure of an HTML table includes:

<table>: The container for the entire table.
<tr>: Defines a table row.
<th>: Defines a header cell, usually bold and centered.
<td>: Defines a standard data cell.

html

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Output

A table with one header row containing 'Header 1' and 'Header 2', and one data row with 'Data 1' and 'Data 2'.

💻

Example

This example shows a simple table with three columns and two rows of data, including headers.

html

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

Output

A visible table with a border showing headers 'Name', 'Age', 'City' and two rows with data: 'Alice, 30, New York' and 'Bob, 25, Los Angeles'.

⚠️

Common Pitfalls

Common mistakes when creating tables include:

Forgetting to close <tr>, <th>, or <td> tags, which breaks the table layout.
Using <td> inside the header row instead of <th>, which affects accessibility and styling.
Not using border-collapse: collapse; in CSS, causing double borders.
Skipping the <table> element and trying to use rows and cells alone.

html

<!-- Wrong: Missing closing tags and wrong cell tags -->
<table>
  <tr>
    <td>Header 1</td>
    <td>Header 2</td>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

<!-- Right: Proper tags and closing -->
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Output

The first table renders incorrectly or not at all; the second table renders correctly with headers and data cells aligned.

📊

Quick Reference

Element

Purpose

Defines the table container

Defines a table row
		Defines a header cell (bold, centered)
		Defines a standard data cell
border attribute or CSS	Adds visible borders to the table

✅

Key Takeaways

Use with ,

, and	to build tables in HTML. Always close your tags properly to avoid broken layouts. Use	for headers to improve readability and accessibility. Add CSS or border attribute to make table borders visible. Test your table in a browser to see the visual layout. Related by keyword How to Make Table Accessible in HTML: Simple GuideAccessibility How to Create a Pricing Table in HTML: Simple GuideCommon HTML Components What is HTML: Simple Explanation and ExampleGetting Started What is HTML Boilerplate: Simple Explanation and ExampleGetting Started What Is a Nested Element in HTML: Simple Explanation and ExampleHTML Structure 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 Add a Row to a Table in HTML Easily