Topic 38 of 57 7. HTML Tables Interactive Tutorial

HTML Table Styling: CSS Properties and Examples

12 mins read Last updated: 12 Nov 2026 16,200 views

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

How do you style modern, responsive, zebra-striped HTML tables with CSS?

Direct Answer & Overview

Modern HTML tables are styled with CSS by setting 'border-collapse: collapse' to eliminate double cell borders, applying ':nth-child(even)' pseudo-classes for zebra striping, adding hover row highlights, and wrapping the table in a responsive 'overflow-x: auto' container for mobile viewports.

Comprehensive Step-by-Step Concepts

1) Eliminating Double Borders: By default, browser user-agent stylesheets apply 'border-collapse: separate' with 'border-spacing: 2px', causing disjointed double borders. Setting 'border-collapse: collapse;' creates crisp, unified borders. 2) Zebra Striping with :nth-child: Alternating background colors across rows dramatically improves readability when scanning wide data sets. Apply 'tbody tr:nth-child(even) { background-color: #f8fafc; }'. 3) Interactive Row Hover Effects: Adding 'tbody tr:hover { background-color: #eff6ff; }' provides clear visual feedback, highlighting the active row being inspected. 4) Text Alignment Best Practices: Align text columns (names, categories) to the left ('text-align: left'), align numerical data (prices, counts) to the right ('text-align: right') for easy decimal alignment, and center status badges ('text-align: center'). 5) Responsive Overflow Wrapper: On small mobile smartphone screens, wide tables break page boundaries. Wrap the in a '

' to enable smooth horizontal scrolling without breaking the surrounding layout.

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sleek Styled Table</title>
    <style>
        .table-responsive { width: 100%; overflow-x: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-radius: 8px; }
        .modern-table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; font-size: 0.95rem; }
        .modern-table th, .modern-table td { padding: 12px 16px; border-bottom: 1px solid #e2e8f0; }
        .modern-table th { background: #0f172a; color: #f8fafc; text-align: left; }
        .modern-table tbody tr:nth-child(even) { background-color: #f8fafc; }
        .modern-table tbody tr:hover { background-color: #e0f2fe; }
        .num-col { text-align: right; font-variant-numeric: tabular-nums; }
    </style>
</head>
<body>
    <h2>Cloud Server Instance Pricing</h2>
    <div class="table-responsive">
        <table class="modern-table">
            <thead>
                <tr>
                    <th scope="col">Instance Type</th>
                    <th scope="col">vCPU Cores</th>
                    <th scope="col">RAM Memory</th>
                    <th scope="col" class="num-col">Hourly Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>c6g.large</td>
                    <td>2 Cores</td>
                    <td>4 GB</td>
                    <td class="num-col">$0.068</td>
                </tr>
                <tr>
                    <td>c6g.xlarge</td>
                    <td>4 Cores</td>
                    <td>8 GB</td>
                    <td class="num-col">$0.136</td>
                </tr>
                <tr>
                    <td>c6g.2xlarge</td>
                    <td>8 Cores</td>
                    <td>16 GB</td>
                    <td class="num-col">$0.272</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Always wrap tables in an overflow-x: auto container, use border-collapse: collapse, right-align numeric data, and provide hover feedback.

Common Technical & Interview Questions

Q1: Why should numerical values in table cells be right-aligned?

A1: Right-aligning numbers aligns their decimal points and digit place values (ones, tens, hundreds), allowing users to visually compare magnitudes and calculate sums effortlessly.

Q2: What is the purpose of 'table-layout: fixed' in CSS?

A2: By default (table-layout: auto), browsers must read all table data before calculating column widths, which is slow for huge tables. 'table-layout: fixed' calculates column widths from the first row or header width immediately, accelerating page rendering.

Q3: How do you make a table mobile-friendly without horizontal scrollbars?

A3: On small screens, CSS media queries can convert table rows into block-level cards using 'display: block' on

and

, using data-* attributes and the '::before' pseudo-element to render column labels inline.

All HTML Topics

Previous TopicHTML Table Header and Caption: TH and CAPTION Tags Explained

Next TopicHTML Colgroup Tag: Structure, Attributes, and Examples