CSS Tables

Basic Table Styling

🔸 Simple Table with Borders

/* Basic table with borders */
.basic-table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
}

.basic-table th,
.basic-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.basic-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

<table class="basic-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>25</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>30</td>
            <td>London</td>
        </tr>
    </tbody>
</table>

🔹 Striped Tables

Striped tables use alternating background colors for rows (:nth-child(even/odd)) to improve readability, reduce eye strain, and guide users across data sets. The CSS rule tr:nth-child(even) { background-color: #f9f9f9; } creates a subtle zebra-striping effect. This visual patterning helps users track information horizontally across wide tables, especially on dense financial or data-heavy pages. It enhances accessibility for users with cognitive disabilities and improves scannability on all devices. Implementing stripes with pure CSS keeps HTML clean and performance high. Improved data presentation increases user engagement and time-on-page, signaling content quality to search engines. It also supports mobile usability, a key ranking factor, by making tabular data more manageable on small screens.

/* Striped table */
.striped-table {
    border-collapse: collapse;
    width: 100%;
}

.striped-table th,
.striped-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.striped-table th {
    background-color: #007cba;
    color: white;
}

.striped-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.striped-table tr:hover {
    background-color: #f5f5f5;
}

<table class="striped-table">
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
    </tr>
    <tr>
        <td>Laptop</td>
        <td>$999</td>
        <td>15</td>
    </tr>
    <tr>
        <td>Phone</td>
        <td>$599</td>
        <td>32</td>
    </tr>
    <tr>
        <td>Tablet</td>
        <td>$399</td>
        <td>8</td>
    </tr>
</table>

🔹 Table Borders

Table border styling controls the separation and definition of cells and headers, crucial for organizing data clearly and accessibly. Properties like border-collapse: collapse merge adjacent borders into single lines for a cleaner look, while border-spacing adjusts cell gaps in the separate model. Specific borders can be applied to <th>, <td>, or the entire <table>. Strategic use of border width, style, and color creates visual hierarchy—thicker borders for the header, lighter for internal cells. Proper border management prevents visual clutter, enhances readability, and makes tables accessible by clearly defining data relationships. Clear, structured data presentation improves user experience and supports SEO by making content easier to comprehend and engage with.

/* Different border styles */
.border-separate {
    border-collapse: separate;
    border-spacing: 5px;
    border: 2px solid #333;
}

.border-separate th,
.border-separate td {
    border: 1px solid #666;
    padding: 10px;
}

.no-border {
    border-collapse: collapse;
}

.no-border th,
.no-border td {
    border: none;
    border-bottom: 2px solid #eee;
    padding: 15px;
}

🔹 Responsive Tables

Responsive tables adapt to smaller screens using techniques like horizontal scrolling, stacking rows, or hiding less critical columns. CSS methods include wrapping the table in a <div style="overflow-x: auto;"> to enable horizontal swipe, using display: block on rows and cells to stack vertically, or employing @media queries to hide columns. The goal is to preserve data integrity and usability across devices. Responsive tables are essential for mobile-first design, as Google prioritizes mobile usability in rankings. Implementing them improves user experience, reduces pinch-zoom frustration, and decreases bounce rates on mobile traffic. This directly supports SEO by enhancing mobile Core Web Vitals and ensuring content is accessible to the growing majority of users on smartphones and tablets.

/* Responsive table wrapper */
.table-wrapper {
    overflow-x: auto;
    margin: 20px 0;
}

.responsive-table {
    min-width: 600px;
    border-collapse: collapse;
    width: 100%;
}

/* Mobile-first approach */
@media screen and (max-width: 768px) {
    .mobile-table {
        font-size: 14px;
    }
    
    .mobile-table th,
    .mobile-table td {
        padding: 8px 4px;
    }
}

<div class="table-wrapper">
    <table class="responsive-table">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Department</th>
            <th>Salary</th>
            <th>Actions</th>
        </tr>
        <tr>
            <td>001</td>
            <td>John Doe</td>
            <td>[email protected]</td>
            <td>Engineering</td>
            <td>$75,000</td>
            <td>Edit | Delete</td>
        </tr>
    </table>
</div>

🔹 Table Alignment

Table alignment controls the horizontal and vertical positioning of content within cells, ensuring data is presented neatly and consistently. text-align handles horizontal alignment (left, right, center, justify), commonly aligning numbers right and text left. vertical-align manages vertical placement (top, middle, bottom), crucial for cells with varying content heights. Consistent alignment improves readability, reduces cognitive load, and creates a professional appearance. For financial or numerical data, right-alignment helps with quick comparison. Proper alignment also enhances accessibility by creating a predictable layout structure. A well-aligned table improves user engagement with complex data, increasing time-on-page and interaction depth—positive behavioral signals that can indirectly influence search engine rankings through improved user experience metrics.

/* Text alignment in tables */
.align-table th {
    text-align: center;
    background: #f8f9fa;
}

.align-table .left { text-align: left; }
.align-table .center { text-align: center; }
.align-table .right { text-align: right; }

/* Vertical alignment */
.align-table td {
    vertical-align: middle;
    height: 50px;
}

<table class="align-table">
    <tr>
        <th>Left Aligned</th>
        <th>Center Aligned</th>
        <th>Right Aligned</th>
    </tr>
    <tr>
        <td class="left">Left text</td>
        <td class="center">Center text</td>
        <td class="right">Right text</td>
    </tr>
</table>