Table Styling in CSS
Borders, Padding, Zebra Stripes & More

CSS - Table Styling

HTML tables by default look basic and rigid. To create visually appealing, readable, and modern tables, CSS table styling is essential. Whether you're building a pricing chart, a data report, or a comparison table, CSS helps you bring structure and beauty to your data.

Basic Table Structure

Before diving into styling, let’s take a basic HTML table with three columns and five rows.

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Fruit</th>
        <th>Color</th>
        <th>Price (per kg)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>Red</td>
        <td>$3.00</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>Yellow</td>
        <td>$1.50</td>
      </tr>
      <tr>
        <td>Grapes</td>
        <td>Purple</td>
        <td>$2.80</td>
      </tr>
      <tr>
        <td>Orange</td>
        <td>Orange</td>
        <td>$2.00</td>
      </tr>
      <tr>
        <td>Watermelon</td>
        <td>Green</td>
        <td>$0.90</td>
      </tr>
    </tbody>
  </table>
</div>

1. Adding Basic Borders

Let’s start by giving the table a clean border using CSS:

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

Explanation: The border-collapse: collapse; property ensures that adjacent borders don’t double up — they merge into a single clean line.

2. Adding Padding and Spacing

To make text more readable, add padding to cells:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 12px;
  text-align: left;
}

This increases whitespace within cells, enhancing clarity.

3. Zebra Striping Rows

Alternating row colors (also known as zebra striping) improve readability across rows of data.

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 12px;
  text-align: left;
}
tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

This subtle visual cue helps users follow data rows horizontally with ease.

4. Hover Effects for Interactivity

You can add a hover effect to highlight rows dynamically:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 12px;
  text-align: left;
}
tbody tr:hover {
  background-color: #e0e0e0;
}

Users get feedback when they hover over a row — especially useful for clickable rows or admin dashboards.

5. Styling Headers

Headers can stand out using background color and text styling:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 12px;
  text-align: left;
}
thead th {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}

This helps distinguish headers from the rest of the table data visually and semantically.

6. Aligning Text

Column-wise alignment enhances data interpretation:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 12px;
  text-align: left;
}
td:nth-child(2) {
  text-align: center;
}
td:nth-child(3) {
  text-align: right;
}

This is particularly helpful for numbers, prices, and data meant to be compared vertically.

7. Responsive Table Design

Standard tables are not mobile-friendly by default. Use the following approach for better responsiveness:

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

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

This ensures your tables can be scrolled horizontally on smaller screens.

8. Table Width and Layout

Control table width and column behavior using:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
table {
  width: 100%;
  table-layout: fixed;
}
th, td {
  word-wrap: break-word;
}

table-layout: fixed forces columns to distribute width evenly, preventing overflow issues.

9. Borderless Tables

To create a minimalist look:

table {
  border: none;
}
th, td {
  border: none;
  padding: 10px;
}

Use this for simple data listings where structure clarity isn’t critical.

10. Table with Complete Styling - 1

.table-container {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
thead th {
  background-color: #007BFF;
  color: white;
}
th, td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}
tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
tbody tr:hover {
  background-color: #f1f1f1;
}