🌞

CSS Tables

Transform boring data into beautiful, accessible tables with fundamental styling techniques

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;
    }
}

Ready for Advanced Features?

Now that you've mastered the basics, explore sorting, filtering, and sticky headers.

🚀

Advanced Tables

Sortable columns, filters, sticky headers, and best practices

 🃏

Card Components

Create flexible, reusable card layouts

 📝

Forms

Style beautiful, accessible forms