Explained HTML Tables

HTML tables allow you to arrange data into rows and columns on a webpage. They're created using a series of nested tags that define the table structure.

Basic Table Structure

Here are the main tags used to create an HTML table:

<table> - The container for the entire table
<tr> - Defines a table row
<th> - Defines a table header cell (bold and centered by default)
<td> - Defines a standard table data cell

Simple Table Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Example</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>Employee Information</h2>
    
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Department</th>
            <th>Salary</th>
        </tr>
        <tr>
            <td>101</td>
            <td>John Smith</td>
            <td>Marketing</td>
            <td>$65,000</td>
        </tr>
        <tr>
            <td>102</td>
            <td>Sarah Johnson</td>
            <td>Engineering</td>
            <td>$85,000</td>
        </tr>
        <tr>
            <td>103</td>
            <td>Michael Brown</td>
            <td>Human Resources</td>
            <td>$55,000</td>
        </tr>
    </table>
</body>
</html>

Table with Additional Features

Here's an enhanced version with more features:

<table>
    <caption>Monthly Sales Report</caption>
    <thead>
        <tr>
            <th rowspan="2">Region</th>
            <th colspan="3">Quarterly Sales ($)</th>
        </tr>
        <tr>
            <th>Q1</th>
            <th>Q2</th>
            <th>Q3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>North</td>
            <td>12,500</td>
            <td>15,200</td>
            <td>18,700</td>
        </tr>
        <tr>
            <td>South</td>
            <td>9,800</td>
            <td>11,300</td>
            <td>14,500</td>
        </tr>
        <tr>
            <td>East</td>
            <td>10,200</td>
            <td>12,600</td>
            <td>16,100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td><strong>Total</strong></td>
            <td><strong>32,500</strong></td>
            <td><strong>39,100</strong></td>
            <td><strong>49,300</strong></td>
        </tr>
    </tfoot>
</table>

Key Features in the Examples:

Basic Structure: Table with rows and cells
Styling: Added borders and padding with CSS
Semantic Sections: <thead>, <tbody>, and <tfoot>
Caption: <caption> for table description
Column Spanning: colspan to merge columns
Row Spanning: rowspan to merge rows
Header Cells: <th> for column headers

Tables should be used for tabular data, not for page layout (use CSS for layout purposes). Modern HTML tables can be made responsive for mobile devices using additional CSS techniques.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us