HTML Tables – A Complete Guide with Examples & Best Practices

What is an HTML Table?

An HTML table is used to display data in rows and columns. It is created using the <table> tag and structured with <tr>, <td>, and <th> tags.

Introduction: Why You Need HTML Tables

When information is written randomly on a page, users struggle to understand it.
HTML tables solve this problem by organizing data into rows and columns, making content neat, readable, and meaningful.

You’ll find tables used in real websites for:

Student result lists
Product price comparisons
Employee records
Monthly reports
Admin dashboards

If you are learning HTML for the first time, tables are an essential concept that every beginner must master.

What Exactly Is an HTML Table?

An HTML table is a structured layout used to display related data clearly.

Think of it like a spreadsheet:

Rows run horizontally
Columns run vertically
Each box holds one piece of data

HTML tables are created using special tags designed only for data presentation.

Core HTML Table Tags (Simple Explanation)

Tag	What It Does
`<table>`	Starts the table
`<tr>`	Creates a row
`<th>`	Creates a heading cell
`<td>`	Creates a data cell

Example 1: Creating Your First HTML Table

<table border="1">
  <tr>
    <th>Student</th>
    <th>Course</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Aman</td>
    <td>HTML</td>
    <td>82</td>
  </tr>
  <tr>
    <td>Priya</td>
    <td>CSS</td>
    <td>90</td>
  </tr>
</table>

Explanation

<th> cells act as headings
<td> cells hold actual data
border="1" is added only so beginners can see the table clearly

⚠️ In real projects, borders should be added using CSS.

Adding a Title to Your Table Using

A caption explains what the table is about.

<table border="1">
  <caption>Course Results</caption>
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>88</td>
  </tr>
</table>

Helps users understand the data
Improves accessibility
Good for SEO and screen readers

Styling Tables the Right Way (Using CSS)

Avoid this:

✅ Use CSS instead:

HTML

CSS

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  border: 1px solid #444;
  padding: 10px;
  text-align: left;
}

.data-table th {
  background-color: #eee;
}

Why CSS Is Preferred

Cleaner HTML
Easy design updates
Reusable styles
Professional standard

HTML Table Tags & Attributes

Tag/Attribute	Description
<table>	Defines a table.
<tr>	Table row.
<th>	Table header (bold & centered by default).
<td>	Table data (cell).
border	Adds a border to the table.
cellpadding	Adds space inside a cell.
cellspacing	Adds space between cells.
bgcolor	Add back ground color
bordercolor	Add border color
Table Width	Width of the table in pixels
Table Align	Table alignment
Table valign	(vertical align) attribute
Bordercolordark	dark color to the border
Background	table background

Table with Borders, Padding & Spacing

<table border="2" cellpadding="5" cellspacing="5">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>New York</td>
    </tr>
</table>

✅ Explanation:

border="2" – Sets border thickness.
cellpadding="5" – Adds padding inside cells.
cellspacing="5" – Adds space between cells.

Table with Column Spanning (`colspan`)

The colspan attribute allows a cell to span multiple columns.

<table border="1">
    <tr>
        <th colspan="2"> Full Name </th>
        <th> Age </th>
    </tr>
    <tr>
        <td> John </td>
        <td> Doe </td>
        <td> 25 </td>
    </tr>
</table>

✅ Output:

Full Name	Age
John Doe	25

Table with Row Spanning (`rowspan`)

The rowspan attribute allows a cell to span multiple rows.

<table border="1">
    <tr>
        <th>Name</th>
        <th rowspan="2"> Age </th>
    </tr>
    <tr>
        <td> John </td>
    </tr>
</table>

✅ Output:

Name	Age
John	25

Styling Tables with CSS

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>New York</td>
    </tr>
</table>

✅ Best Practices:
✔️ Use CSS for better styling instead of inline border.
✔️ Apply border-collapse: collapse; to avoid double borders.
✔️ Use alternating row colors for better readability.

Responsive Tables (Mobile-Friendly)

Use CSS for responsive tables.

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        padding: 10px;
        border: 1px solid #ddd;
    }
    @media screen and (max-width: 600px) {
        table, thead, tbody, th, td, tr {
            display: block;
            width: 100%;
        }
        th {
            display: none;
        }
    }
</style>

✅ Best Practice: Use media queries to make tables scrollable on small screens.

Full Example – Advanced HTML Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Example</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

    <h2>Student Details</h2>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Lisa</td>
            <td>30</td>
            <td>London</td>
        </tr>
    </table>

</body>
</html>

Best Practices for HTML Tables

✔️ Use <th> for headers to improve SEO & accessibility.
✔️ Apply CSS styling instead of inline attributes.
✔️ Use border-collapse: collapse; for cleaner layouts.
✔️ Use media queries for responsive tables on mobile devices.