CSS Tables

HTML tables organize data into rows and columns using <table>, <tr>, <th>, and <td> elements. By default, HTML tables look plain and difficult to read. CSS transforms them into clean, professional-looking data tables with borders, alternating row colors, hover effects, and proper spacing.

HTML Table Structure (Reminder)

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>28</td>
            <td>Mumbai</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>35</td>
            <td>Delhi</td>
        </tr>
    </tbody>
</table>

1. border-collapse

By default, table cells have separate, doubled borders between them. The border-collapse: collapse property merges adjacent borders into a single border, which looks much cleaner.

table {
    border-collapse: collapse;  /* Merges double borders into one */
}

/* Separate (default) — borders have a gap between cells */
table {
    border-collapse: separate;
    border-spacing: 5px;  /* Gap between cells when separate */
}

2. Adding Borders to Table Cells

table, th, td {
    border: 1px solid #ccc;
}

table {
    border-collapse: collapse;
    width: 100%;
}

3. Padding in Table Cells

Adding padding to <th> and <td> elements gives the table content room to breathe, making it far more readable.

th, td {
    padding: 12px 16px;
    text-align: left;
}

4. Styling the Header Row

A visually distinct header row makes it immediately clear which row contains the column labels.

thead tr {
    background-color: #2c3e50;
    color: white;
}

th {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

5. Zebra Striping (Alternating Row Colors)

Alternating background colors on table rows make it easier to follow data across wide tables.

tbody tr:nth-child(even) {
    background-color: #f2f6fc;
}

tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

6. Hover Effect on Rows

A hover effect helps users identify which row is selected when scanning data.

tbody tr:hover {
    background-color: #dbeafe;
    cursor: pointer;
}

7. Table Width and Column Sizing

table {
    width: 100%;       /* Full width of container */
    table-layout: fixed;  /* Distributes columns evenly */
}

/* Set column widths manually */
th:first-child { width: 30%; }
th:nth-child(2) { width: 20%; }
th:last-child  { width: 50%; }

Complete Styled Table Example

table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

thead tr {
    background-color: #1a73e8;
    color: white;
    text-align: left;
}

th, td {
    padding: 14px 18px;
}

tbody tr:nth-child(even) {
    background-color: #f5f7ff;
}

tbody tr:hover {
    background-color: #e3edff;
}

td {
    border-bottom: 1px solid #e0e0e0;
    color: #333;
}

Responsive Tables

On small screens, wide tables can overflow and break the layout. Wrapping the table in a scrollable container fixes this.

.table-wrapper {
    overflow-x: auto;
}

<div class="table-wrapper">
    <table>
        ...
    </table>
</div>

Summary

CSS table styling starts with border-collapse: collapse and padding on cells for immediate visual improvement. A styled header row, zebra striping with :nth-child, and row hover effects create polished, readable data tables. Full-width tables with table-layout: fixed ensure consistent column sizing. Wrapping tables in a scrollable container ensures they remain accessible on small screens.