View Categories

HTML Headers & Caption

Table of Contents

Headers and captions are important for structuring and organizing data in tables. They make it easier to understand the information by providing labels for columns and a description of the table’s purpose.

Table Headers #

The <th> (table header) element is used to define table headings, typically found in the first row of a table. These header cells usually contain labels for the columns of data below them.

Table Captions #

The <caption> element is used to provide a title or description for the table. It appears at the top of the table, right after the opening <table> tag. While still supported by most browsers, the <caption> tag is deprecated in HTML5. Instead, it’s recommended to use the <figure> and <figcaption> elements for more modern markup.

Example: Basic Table with Headers and Caption #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Table Headers and Captions - Demo</title>
</head>
<body>
    <table border="1">
        <caption>Employee Salary Data</caption>
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr>
        <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
        </tr>
    </table>
</body>
</html>

Styling Table Headers #

Table headers (<th>) can be styled to improve readability and visual appeal. You can use CSS to change the background color, text color, and alignment of header cells.

Example: Styling Table Headers with CSS #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Styled Table Headers - Demo</title>
    <style>
        th {
            background-color: #4CAF50;
            color: white;
            text-align: left;
            padding: 8px;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr>
        <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
        </tr>
    </table>
</body>
</html>

Advanced Usage: Header Cells in Any Row #

Although headers are typically placed in the first row, you can add <th> elements in any row to mark significant data.

Example: Using Headers in Multiple Rows #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Multiple Header Rows - Demo</title>
    <style>
        th {
            background-color: #4CAF50;
            color: white;
            padding: 8px;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr>
        <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
        </tr>
        <tr>
            <th>Position</th>
            <th>Department</th>
        </tr>
        <tr>
            <td>Technical Lead</td>
            <td>Web Development</td>
        </tr>
    </table>
</body>
</html>

Using the <thead> Element #

The <thead> element is used to group the table’s header cells. This helps apply styles or manage table content more efficiently.

Example: Grouping Table Headers with <thead> #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Grouped Headers - Demo</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ramesh Raman</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>Shabbir Hussein</td>
                <td>7000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Adding a Caption to an HTML Table #

The <caption> element is used to add a title to your table, helping users understand the context or purpose of the data presented.

Example: Adding a Caption #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Table with Caption - Demo</title>
</head>
<body>
    <table border="1">
        <caption>Monthly Sales Report</caption>
        <tr>
            <th>Product</th>
            <th>Sales</th>
        </tr>
        <tr>
            <td>Smartphone</td>
            <td>500</td>
        </tr>
        <tr>
            <td>Laptop</td>
            <td>300</td>
        </tr>
    </table>
</body>
</html>

Structuring Tables with <thead>, <tbody>, and <tfoot> #

Tables can be organized into three main sections: header (<thead>), body (<tbody>), and footer (<tfoot>). This structure makes your table more organized and readable.

Example: Using <thead>, <tbody>, and <tfoot> #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Table Structure - Demo</title>
</head>
<body>
    <table border="1" width="100%">
        <thead>
            <tr>
                <th colspan="2">Employee Data</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>7000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Total</td>
                <td>12000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment