HTML Table Header and Caption: TH and CAPTION Tags Explained

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accessible Table with Caption</title>
    <style>
        table { border-collapse: collapse; width: 100%; max-width: 600px; font-family: sans-serif; }
        caption { font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; text-align: left; color: #0f172a; }
        th, td { border: 1px solid #cbd5e1; padding: 8px 12px; }
        th { background: #e2e8f0; }
    </style>
</head>
<body>
    <table>
        <!-- Caption must immediately follow <table> -->
        <caption>Employee Attendance and Overtime Hours (September 2026)</caption>
        <thead>
            <tr>
                <th scope="col">Employee Name</th>
                <th scope="col">Department</th>
                <th scope="col">Regular Hours</th>
                <th scope="col">Overtime Hours</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Sarah Connor</th>
                <td>Engineering</td>
                <td>160</td>
                <td>18</td>
            </tr>
            <tr>
                <th scope="row">John Wick</th>
                <td>Security Operations</td>
                <td>160</td>
                <td>24</td>
            </tr>
        </tbody>
    </table>
</body>
</html>