🌞

CSS Tables

Transform boring data into beautiful, accessible tables

Basic Table Styling

Start with semantic HTML tables and enhance them with CSS for better readability and visual appeal.

Clean & Simple

Name Position Department Salary
Sarah Johnson Senior Developer Engineering £85,000
Michael Chen UX Designer Design £65,000
Emma Davis Product Manager Product £95,000
James Wilson Marketing Lead Marketing £75,000 
/* Basic table styling */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--colour-surface);
}

.table th,
.table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--colour-border);
}

.table th {
    font-weight: 600;
    color: var(--colour-text-secondary);
    background: var(--colour-surface-variant);
}

Striped Rows

Product Price Stock
Laptop Pro £1,299 12
Wireless Mouse £49 45
USB-C Hub £79 23
Webcam HD £129 8 
/* Zebra striping */
.table-striped tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

/* Dark theme */
[data-theme="dark"] .table-striped tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

Hover Effects

Task Status Due
Design Review Complete Today
Code Refactor In Progress Tomorrow
Testing Phase Pending Next Week 
/* Row hover effect */
.table-hover tbody tr {
    transition: background 0.2s ease;
}

.table-hover tbody tr:hover {
    background: var(--colour-primary-light);
    cursor: pointer;
}

/* Status badges */
.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

Styled Table Variations

Different table styles for different contexts - from minimal to bold designs.

Minimal Design

Feature Basic Pro
Storage 10GB 100GB
Users 5 Unlimited
Support Email 24/7 Phone
Price £9/mo £29/mo 
/* Minimal table */
.table-minimal {
    border: none;
}

.table-minimal th {
    border-bottom: 2px solid var(--colour-primary);
    background: none;
}

.table-minimal td {
    border: none;
    padding: 1rem 0;
}

Bordered Table

Q1 Q2 Q3 Q4
£125K £143K £156K £189K
+12% +14% +9% +21% 
/* Bordered table */
.table-bordered {
    border: 1px solid var(--colour-border);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--colour-border);
}

/* Utility classes */
.text-success { color: var(--colour-success); }
.text-error { color: var(--colour-error); }

Compact Table

# Country Capital Population
1 United Kingdom London 67.5M
2 France Paris 67.4M
3 Germany Berlin 83.2M
4 Spain Madrid 47.4M
5 Italy Rome 59.1M 
/* Compact spacing */
.table-compact th,
.table-compact td {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.table-compact th:first-child,
.table-compact td:first-child {
    width: 3rem;
    text-align: center;
}

Responsive Tables

Make tables work beautifully on all screen sizes with these responsive techniques.

Horizontal Scroll

Order ID Customer Product Quantity Price Status Date Shipping
#12345 John Smith Laptop Pro 15" 1 £1,299 Shipped 2024-01-15 Express
#12346 Emma Wilson Wireless Keyboard 2 £158 Processing 2024-01-16 Standard 
/* Scrollable wrapper */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll {
    min-width: 600px;
}

/* Visual scroll indicator */
.table-wrapper::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 50%;
    /* Show when scrollable */
}

Stack on Mobile

Name Email Role Status
Alex Johnson alex@example.com Administrator Active
Sam Taylor sam@example.com Editor Pending 
/* Mobile stack layout */
@media (max-width: 768px) {
    .table-responsive thead {
        display: none;
    }
    
    .table-responsive tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--colour-border);
        border-radius: 0.5rem;
    }
    
    .table-responsive td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }
    
    .table-responsive td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        font-weight: 600;
    }
}

Advanced Table Features

Enhanced tables with sorting indicators, sticky headers, and interactive features.

Sortable Table

Name Score Date Actions
Alice Brown 95 2024-01-10
Bob Davis 87 2024-01-12
Carol White 92 2024-01-11 
/* Sortable headers */
.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 2rem;
}

.sortable:hover {
    background: var(--colour-primary-light);
}

.sort-indicator::after {
    content: '↕️';
    position: absolute;
    right: 0.5rem;
    opacity: 0.3;
}

.active-asc .sort-indicator::after {
    content: '↑';
    opacity: 1;
}

.active-desc .sort-indicator::after {
    content: '↓';
    opacity: 1;
}

Data Table with Filters

Product Category Price
Smartphone X Electronics £699
Winter Jacket Clothing £129
CSS Mastery Books £35 
/* Table filters */
.table-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.filter-input,
.filter-select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--colour-border);
    border-radius: 0.25rem;
    background: var(--colour-surface);
}

.filter-input {
    flex: 1;
}

/* Highlighted search results */
.highlight-match {
    background: var(--colour-warning-light);
    padding: 0.125rem 0.25rem;
    border-radius: 0.125rem;
}

Fixed Header Table

Month Revenue Growth
January £45,230 +12%
February £48,650 +8%
March £52,180 +7%
April £51,990 -0.4%
May £55,420 +6.6%
June £58,760 +6% 
/* Fixed header */
.table-fixed-wrapper {
    height: 200px;
    overflow-y: auto;
    border: 1px solid var(--colour-border);
}

.table-fixed-header thead th {
    position: sticky;
    top: 0;
    background: var(--colour-surface);
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Table Best Practices

♿

Use Semantic HTML

Always use proper table elements (thead, tbody, th) for accessibility.

📱

Mobile-First Design

Consider how tables will display on small screens from the start.

🎨

Visual Hierarchy

Use colour, weight, and spacing to guide the eye through data.

⚡

Performance

For large datasets, consider pagination or virtual scrolling.

Build Complete Components

Tables mastered! Continue with versatile card components.

🃏

Card Components

Create flexible, reusable card layouts

 📝

Forms

Style beautiful, accessible forms