CSS Tables

Tables are a fundamental part of web design for displaying structured data such as schedules, pricing plans, comparisons, or reports. While HTML provides the structure, **CSS allows you to style tables to make them visually appealing, readable, and responsive across devices.

Table Borders and Border Collapse

Borders are one of the most basic and important aspects of table styling. You can control:

Add borders around cells or the table itself.
border-collapse: collapse; removes double borders between cells.

CSS Example:

table {
  border: 2px solid #333;   /* outer border */
  border-collapse: collapse; /* removes double borders between cells */
  width: 100%;
}
td, th {
  border: 1px solid #ccc;   /* individual cell borders */
  padding: 10px;
}

Cell Padding and Spacing

Padding adds space inside each table cell, making content more readable.

Spacing can create space between cells (using border-spacing).

table {
  border-spacing: 5px; /* adds space between cells */
}
td, th {
  padding: 12px 15px; /* top-bottom | left-right */
}

Styling Table Headers, Rows, and Columns

CSS allows you to differentiate table headers and data cells for better hierarchy and visual appeal.

th {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
  text-align: left;
}

td {
  color: #555;
}

Zebra Stripes and Hover Effects

Adding alternating row colors (zebra stripes) and hover effects improves user experience and makes data easier to scan.

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

tr:hover {
  background-color: #e0f7fa;
}

Responsive Tables

Tables can be tricky on mobile devices because they have fixed columns. CSS provides solutions:

Scroll Container Method:

.table-responsive {
  overflow-x: auto;
  width: 100%;
}

HTML :

Users can scroll horizontally on small screens.

Keeps table layout intact without breaking the design.

<div class="table-responsive">
  <table>
    <!-- table content -->
  </table>
</div>

Advanced Styling Tips

Rounded Borders

Use border-radius for smooth, modern corners.

table {
  border-radius: 8px;
  overflow: hidden; /* ensures rounded corners display correctly */
}

Column Highlighting

Style specific columns with td:nth-child(n) to emphasize data.

td:nth-child(2) {
  background-color: #f0f8ff;
}

Icons and Images in Cells – Use ::before or <img> for status indicators.

 /* Icons in cells using ::before */
    td.status::before {
      content: "✔️"; /* checkmark icon */
      margin-right: 6px;
    }

Sticky Headers – Keep <thead> visible while scrolling:

thead th {
  position: sticky;
  top: 0;
  background-color: #f2f2f2;
}

Complete example CSS table borders, border collapse, padding, spacing, styling, and responsive tables:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Tables Example</title>
  <style>
    /* Responsive container */
    .table-responsive {
      overflow-x: auto;
    }

    table {
      border-collapse: collapse; /* collapse double borders */
      width: 100%;
      max-width: 800px;
      border: 2px solid #333; /* outer border */
    }

    th, td {
      border: 1px solid #ccc; /* cell borders */
      padding: 10px 15px;      /* cell padding */
      text-align: left;
    }

    th {
      background-color: #f2f2f2; /* header styling */
      font-weight: bold;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9; /* zebra stripes */
    }

    tr:hover {
      background-color: #e0f7fa; /* hover effect */
    }
  </style>
</head>
<body>

<h3>Responsive Styled Table Example</h3>
<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
        <td>Available</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
        <td>Available</td>
      </tr>
      <tr>
        <td>Mango</td>
        <td>$2</td>
        <td>30</td>
        <td>Limited</td>
      </tr>
      <tr>
        <td>Orange</td>
        <td>$1.5</td>
        <td>0</td>
        <td>Out of Stock</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Output :

learn code with durgesh images