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.

Basic HTML Table Structure

Example:

<table border="1">
    <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>

✅ Output:

NameAgeCity
John25New York
Lisa30London

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 NameAge
John Doe25

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:

NameAge
John25

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.