Grouped Header Table - Free UI Component

Header Background #1e293b

Header Text Color #f8fafc

Odd Group Background #ffffff

Even Group Background #f1f5f9

Text Color #334155

Border Color #e2e8f0

Group Divider Color #cbd5e1

Vertical Padding (rem) 0.85

Horizontal Padding (rem) 1.25

Container Width 1200px

Grouped Header Table

A table that visually groups related columns together using explicit dividers and alternating column-group backgrounds.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grouped Header Table</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* -- Variables ------------------------------------------------- */
        :root {
            --header-bg: {{headerBgColor}};
            --header-text: {{headerTextColor}};
            --group-odd: {{groupBgOdd}};
            --group-even: {{groupBgEven}};
            --text-color: {{textColor}};
            --border: {{borderColor}};
            --divider: {{groupBorderColor}};
            --v-pad: {{vPadding}}rem;
            --h-pad: {{hPadding}}rem;
            --table-w: {{tableWidth}};
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #f8fafc;
            color: var(--text-color);
            padding: 3rem 1.5rem;
            display: flex;
            justify-content: center;
        }

/* -- Table Implementation --------------------------------------- */
        .table-container {
            width: 100%;
            max-width: var(--table-w);
            border-radius: 12px;
            overflow: auto; /* Handles rounding on scrolling block */
            border: 1px solid var(--border);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
            background: #fff;
        }

table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.9rem;
        }

/* Colgroup logic for visual grouping backgrounds */
        colgroup.group-fixed { background-color: var(--group-odd); }
        colgroup.group-comp { background-color: var(--group-even); border-left: 2px solid var(--divider); border-right: 2px solid var(--divider); }
        colgroup.group-benefits { background-color: var(--group-odd); }

thead {
            background-color: var(--header-bg);
            color: var(--header-text);
        }

/* Super Headers */
        thead tr:first-child th {
            text-align: center;
            padding: calc(var(--v-pad) * 0.75) var(--h-pad);
            border-bottom: 1px solid rgba(255,255,255,0.2);
            font-size: 0.8em;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

/* Sub Headers */
        thead tr:last-child th {
            padding: var(--v-pad) var(--h-pad);
            border-bottom: 2px solid var(--divider);
            font-weight: 600;
        }

/* Explicit Column Borders matching colgroup borders */
        th.divider-left, td.divider-left { border-left: 2px solid var(--divider); }

tbody td {
            padding: var(--v-pad) var(--h-pad);
            border-bottom: 1px solid var(--border);
            color: var(--text-color);
        }

tbody tr:last-child td { border-bottom: none; }
        
        tbody tr:hover td {
            /* We use a pseudo overlay or just shift colors slightly if we want hover across colgroups. 
               Using opacity or a global row color overrides colgroups, so we mixin a color via inset box-shadow */
            box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.02);
            cursor: default;
        }

.num { text-align: right; }
        .employee { font-weight: 600; color: #0f172a; }
        .role { display: block; font-size: 0.85em; font-weight: 400; color: #64748b; margin-top: 2px; }

</style>
</head>
<body>

<thead>
                <tr>
                    <th>Personnel</th>
                    <th colspan="3" class="divider-left">Direct Compensation (Annual)</th>
                    <th colspan="2" class="divider-left">Extended Benefits</th>
                </tr>
                <tr>
                    <th>Staff Member</th>
                    <th class="num divider-left">Base Salary</th>
                    <th class="num">Target Bonus</th>
                    <th class="num">Equity Vest</th>
                    <th class="divider-left">Healthcare Tier</th>
                    <th>401k Match</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <span class="employee">Julian Cates</span>
                        <span class="role">VP, Engineering</span>
                    </td>
                    <td class="num divider-left">$260,000</td>
                    <td class="num">25%</td>
                    <td class="num">2,400 RSUs</td>
                    <td class="divider-left">Platinum Family</td>
                    <td>6% Matrix</td>
                </tr>
                <tr>
                    <td>
                        <span class="employee">Mariana Penzance</span>
                        <span class="role">Director of Product</span>
                    </td>
                    <td class="num divider-left">$195,000</td>
                    <td class="num">20%</td>
                    <td class="num">1,200 RSUs</td>
                    <td class="divider-left">Platinum Single</td>
                    <td>6% Matrix</td>
                </tr>
                <tr>
                    <td>
                        <span class="employee">Thomas Wright</span>
                        <span class="role">Senior Dev Ops</span>
                    </td>
                    <td class="num divider-left">$165,000</td>
                    <td class="num">15%</td>
                    <td class="num">800 RSUs</td>
                    <td class="divider-left">Gold Family</td>
                    <td>4% Base</td>
                </tr>
                <tr>
                    <td>
                        <span class="employee">Aisha Mohammadi</span>
                        <span class="role">Product Designer</span>
                    </td>
                    <td class="num divider-left">$140,000</td>
                    <td class="num">10%</td>
                    <td class="num">500 RSUs</td>
                    <td class="divider-left">Gold Single</td>
                    <td>4% Base</td>
                </tr>
                <tr>
                    <td>
                        <span class="employee">Devin Lau</span>
                        <span class="role">Data Engineer</span>
                    </td>
                    <td class="num divider-left">$145,000</td>
                    <td class="num">10%</td>
                    <td class="num">450 RSUs</td>
                    <td class="divider-left">Silver Single</td>
                    <td>4% Base</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>