Technical Specifications Table

<!DOCTYPE html>
<title>My Example</title>

.spec-table caption {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: left;
    color: #333;
}

.spec-table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}
.spec-table tbody tr:last-child td {
    border-bottom: none;
}

/* Feature column (left) styling */
.spec-table .spec-feature {
    font-weight: 600;
    color: #444;
    width: 40%;
}
/* Value column (right) styling */
.spec-table .spec-value {
    color: #666;
}

/* Zebra-striping for easy scanning */
.spec-table tbody tr:nth-of-type(even) {
    background-color: #f9f9f9;
}

/* Category header row styling */
.spec-table .spec-category {
    font-weight: bold;
    font-size: 1.1rem;
    background-color: #f2f2f2;
    color: #333;
}
.spec-table .spec-category td {
    padding: 12px;
    border-bottom: 2px solid #ccc;
}

</style>

<table class="spec-table">
    <caption>Laptop Model X-Pro Specifications</caption>
    <tbody>
        <tr class="spec-category">
            <td colspan="2">Display</td>
        </tr>
        <tr>
            <td class="spec-feature">Screen Size</td>
            <td class="spec-value">14.2 inches</td>
        </tr>
        <tr>
            <td class="spec-feature">Resolution</td>
            <td class="spec-value">3024 x 1964 pixels</td>
        </tr>
        <tr>
            <td class="spec-feature">Technology</td>
            <td class="spec-value">Liquid Retina XDR</td>
        </tr>
        <tr class="spec-category">
            <td colspan="2">Processor & Memory</td>
        </tr>
        <tr>
            <td class="spec-feature">Processor</td>
            <td class="spec-value">SuperChip M3 Pro</td>
        </tr>
        <tr>
            <td class="spec-feature">RAM</td>
            <td class="spec-value">18 GB unified memory</td>
        </tr>
        <tr>
            <td class="spec-feature">Storage</td>
            <td class="spec-value">512 GB SSD</td>
        </tr>
         <tr class="spec-category">
            <td colspan="2">Ports</td>
        </tr>
        <tr>
            <td class="spec-feature">Thunderbolt 4</td>
            <td class="spec-value">3 ports</td>
        </tr>
        <tr>
            <td class="spec-feature">HDMI</td>
            <td class="spec-value">1 port</td>
        </tr>
    </tbody>
</table>