HTML Tables

By /

1. Introduction to HTML Tables

Tables in HTML are used to organize and display data in a structured format. The <table> element is used to create a table, and it consists of rows and columns.

Basic Table Structure

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
</table>

This creates a simple table with two columns and two rows.

2. Table Elements

2.1 Table Rows (<tr>)

Each row in a table is defined using the <tr> tag.

2.2 Table Headers (<th>)

Table headers are used to define column headings and are usually bold by default.

2.3 Table Data (<td>)

Each cell inside a table is defined using the <td> tag.

3. Adding a Table Border

By default, HTML tables do not have borders. You can add borders using the border attribute or CSS.

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Alternatively, using CSS:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

This ensures that all table elements have borders and the borders do not overlap.

4. Merging Cells (Rowspan & Colspan)

Cells in a table can be merged either horizontally (colspan) or vertically (rowspan).

4.1 Merging Columns (colspan)

<table border="1">
    <tr>
        <th colspan="2">Merged Columns</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

This merges two columns into one.

4.2 Merging Rows (rowspan)

<table border="1">
    <tr>
        <th rowspan="2">Merged Rows</th>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 2</td>
    </tr>
</table>

This merges two rows into one.

5. Styling Tables with CSS

Tables can be styled to improve readability and appearance.

5.1 Adding Padding and Spacing

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

th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: left;
}

This improves the spacing between cells.

5.2 Adding a Background Color to Headers

th {
    background-color: #f2f2f2;
}

This gives a light gray background to the header row.

5.3 Striped Table Rows

tr:nth-child(even) {
    background-color: #f9f9f9;
}

This creates alternating row colors for better readability.

6. Responsive Tables

By default, large tables can be difficult to read on smaller screens. A good solution is to make tables scrollable.

<div style="overflow-x:auto;">
    <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>
</div>

This allows horizontal scrolling on smaller screens.

7. Complete Example: Styled Table

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

    <h1>HTML Table Example</h1>

    <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>Mary</td>
            <td>30</td>
            <td>Los Angeles</td>
        </tr>
        <tr>
            <td>James</td>
            <td>28</td>
            <td>Chicago</td>
        </tr>
    </table>

</body>
</html>

This example includes a fully styled table with alternating row colors.

8. Best Practices for Using Tables

  • Use tables only for tabular data, not for layout.
  • Ensure proper column alignment for readability.
  • Use CSS to style tables instead of inline attributes.
  • Avoid excessive use of rowspan and colspan as they can make tables harder to manage.
  • Always make tables responsive for mobile-friendly designs.

Conclusion

In this chapter, you learned:

  • How to create tables using <table>, <tr>, <th>, and <td>.
  • How to merge cells using colspan and rowspan.
  • How to style tables using CSS for better readability.
  • How to make tables responsive for different screen sizes.
Scroll to Top