❮ Previous

CSS Tables

  • Learn CSS table styling to customize borders, spacing, colors, and layouts for HTML tables.

  • What Are CSS Tables ?

    Tables are used to display data in rows and columns, such as:

    • Student marks
    • Product price lists
    • Timetables
    • Reports and records

    HTML Table Structure

    HTML tables are created using these elements:

    • <table> → table container
    • <tr> → table row
    • <th> → table heading
    • <td>     → table data

    By default, tables look plain, crowded, and hard to read.
    CSS transforms raw tables into clean, readable, professional layouts.

    In simple words:

    CSS tables convert raw data into meaningful information.

    Goal of Styling Tables

    The main purpose of CSS table styling is to:

    Improve data readability
    Clearly separate rows and columns
    Make large data easy to scan
    Create a clean, professional layout

    Real-life comparison:
    A neatly drawn timetable is far easier to understand than a messy handwritten one.

  • CSS TABLE STYLING

    Table Borders

    Why Borders Matter

    Borders help users clearly identify rows and columns.

    Without borders:

    Data looks merged
    Reading becomes difficult

Table Borders in CSS

Borders in tables separate rows and columns, making data easier to read and understand. 

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

  • Clear separation of cells

    Border Collapse (VERY IMPORTANT)

    By default, tables show double borders.
    To merge them into single clean lines, use:

Border Collapse Property

border-collapse: collapse; merges table borders into a single clean line instead of showing double borders. 

table {
  border-collapse: collapse;
}

  • Clean appearance
    Industry-standard practice

    Real-life comparison:
    Neatly ruled notebook lines vs overlapping scribbles.

    Table Spacing (Padding & Border Spacing)

    Cell Padding (Inner Space)

    Padding adds space inside table cells, improving readability.

Table Cell Padding

Padding adds inner space inside table cells, making the content easier to read. 

th, td {
  padding: 10px;
}

  • Text doesn’t touch borders
    Comfortable reading experience

    Real-life comparison:
    Space between text and the edge of a form field.

    Border Spacing (Alternative)

    Used only when border-collapse is NOT applied.

Border Spacing Property

border-spacing adds space between table cells and works only when border-collapse is not used. 

table {
  border-spacing: 10px;
}

  • Adds space between cells

    Table Alignment

    Alignment controls how text and tables are positioned.

    Text Alignment Inside Cells

Table Text Alignment

text-align controls how text is positioned inside table header (th) and data (td) cells. 

th {
  text-align: left;
}

td {
  text-align: center;
}

  • Headings aligned properly
    Data remains readable

    Vertical Alignment

Vertical Alignment in Tables

vertical-align controls the vertical positioning of content inside table cells. 

td {
  vertical-align: middle;
}

  • Common values:
     • top
     • middle
     • bottom

    Centering the Table

Centering a Table

margin: 0 auto; centers a table horizontally within its parent container. 

table {
  margin: 0 auto;
}

  • Table centered horizontally

    Real-life comparison:
    A notice board placed perfectly in the center of a classroom.

    Zebra Rows (Striped Tables)

    What Are Zebra Rows ?

    Zebra rows use alternate row colors to make data easier to scan.

Zebra Rows (Striped Tables)

Zebra rows apply alternating background colors to table rows, improving readability and making data easier to scan. 

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

  • Improves readability
    Helps track rows easily

    Highlighting Header Row

Highlighting Table Header

Styling the th element highlights the header row, making it visually distinct from the table data. 

th {
  background-color: #333;
  color: white;
}

  • Header stands out clearly

    Real-life comparison:
    Bank statements use shaded rows for easy tracking.

Complete Styled Table Example

This example demonstrates a fully styled table with collapsed borders, centered layout, header highlighting, and zebra-striping for better readability. 

<!DOCTYPE html>
<html>
<head>
    <title>Styled Table Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        .data-table {
            width: 60%;
            border-collapse: collapse;
            margin: 20px auto;
        }

        .data-table th,
        .data-table td {
            border: 1px solid #999;
            padding: 10px;
            text-align: center;
        }

        .data-table th {
            background-color: #1a73e8;
            color: white;
        }

        .data-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table class="data-table">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>Rahul</td>
            <td>22</td>
            <td>Delhi</td>
        </tr>
        <tr>
            <td>Anita</td>
            <td>25</td>
            <td>Mumbai</td>
        </tr>
        <tr>
            <td>Karan</td>
            <td>23</td>
            <td>Pune</td>
        </tr>
    </table>
</body>
</html>

  • Clean borders
    Proper spacing
    Centered table
    Zebra rows for easy reading
    Professional data presentation

    Hover Effect on Table Rows

Hover Effect on Table Rows

:hover highlights a table row when the user moves the mouse over it, improving interactivity and readability. 

.data-table tr:hover {
  background-color: #ddd;
}

  • Highlights the active row
    Improves interaction

    Real-life comparison:
    Using a ruler to highlight a row while reading data.

    Common Mistakes

    Forgetting border-collapse
    No padding inside cells
    Using overly bright colors
    Poor contrast between text and background

    Best Practices for CSS Tables

    Always use border-collapse: collapse
    Add padding for readability
    Use zebra rows for large datasets
    Highlight header rows clearly
    Keep colors subtle and consistent

    Real-Life Summary

    • Tables represent structured data
    • CSS provides clarity and readability
    • Good table design enables faster understanding

    CSS tables improve data readability
    Borders define structure
    Padding creates clarity
    Alignment organizes content
    Zebra rows improve scanning

❮ Previous