8+ Best Examples of CSS for HTML Tables | Style

How to Style HTML Tables: CSS for HTML Tables with Examples

HTML tables are one of the most widely used elements in web design, ideal for displaying structured data such as price lists, schedules, product comparisons, team member profiles, and reports. While tables are very practical, their default appearance in HTML is often plain and unappealing, making it harder for users to read or navigate.

This is where CSS style for HTML tables come into play. With CSS, you can transform boring tables into visually appealing elements by customizing borders, fonts, colors, row styles, and even adding images inside cells.

Whether you want to improve the HTML table style, add a vibrant HTML table background color, or create interactive layouts, CSS provides all the tools you need to make your tables professional, readable, and user-friendly.

In this guide, we will explore practical techniques for CSS for HTML tables, including styling headers, alternating row colors, inserting images, and designing responsive tables. By the end, you’ll be able to create polished HTML tables with images and attractive layouts that enhance both the design and usability of your website.

1. Introduction to HTML Tables

HTML tables are created using the <table> element, with rows defined by <tr> and data cells by <td> for standard data or <th> for headers. While functional, default tables are plain and often hard to read when filled with large datasets. CSS3 allows us to style tables for better visual hierarchy, readability, and user experience.

3. Using CSS to Style Tables

CSS allows you to style HTML tables in multiple ways:

• Change colors for table headers and rows

• Add borders and padding

• Create hover effects for better interactivity

• Make tables responsive on mobile devices

Basic CSS Example

CSS:

table {
  width: 80%;
  border-collapse: collapse; /* Removes double borders */
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

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

th {
  background-color: #4CAF50;
  color: white;
}

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

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

This simple CSS improves readability and adds visual appeal. Key techniques used here:

• border-collapse: collapse; – merges cell borders for a clean look

• nth-child(even) – applies zebra-striping to rows

• Hover effect – enhances interactivity

HTML:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>32</td>
      <td>Canada</td>
    </tr>
  </tbody>
</table>

4. Common CSS Table Styling Properties

Here are some essential CSS properties used for styling tables:

5. Advanced CSS Techniques for Tables

5.1 Rounded Corners and Shadows

Adding rounded corners and shadows can make tables visually appealing:

CSS:

table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
th, td {
  border: 1px solid #ddd;
}

5.2 Sticky Table Headers

Sticky headers are useful for large tables: This type of table makes the header stick to the top while you can scroll down all the way to the bottom, making it easier to look at the data table without having to go back up to toggle to each header.

CSS:

thead th {
  position: sticky;
  top: 0;
  background-color: #4CAF50;
  color: white;
}

Here is a Free Online HTML Table Generator to help you create html tables faster. Simply upload your csv file and sort data however you want, when done simply export.

5.3 Gradient Backgrounds

CSS gradients can add a modern look:

CSS:

th {
  background: linear-gradient(to right, #4CAF50, #45a049);
  color: white;
}

5.4 Animated Hover Effects

tr:hover {
  background-color: #f1f1f1;
  transition: background-color 0.3s ease;
}

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

HTML:

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

• Stacked table layout – convert table rows into blocks for small screens using CSS Grid or Flexbox.

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  tr {
    margin-bottom: 15px;
  }
  td {
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 10px;
    font-weight: bold;
    text-align: left;
  }
}

This method converts each cell into a mini “row” for small screens.

7. Examples of Beautiful CSS Styled Tables

Example 1: Modern Data Table

HTML:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Availability</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$1200</td>
      <td>In Stock</td>
    </tr>
    <tr>
      <td>Smartphone</td>
      <td>$800</td>
      <td>Out of Stock</td>
    </tr>
  </tbody>
</table>

CSS Enhancements: Zebra stripes, hover effect, gradient header, shadow.

Example 2: Minimalist Table

• Light borders

• Subtle hover

• Centered text

CSS:

table {
  width: 70%;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: "Segoe UI", sans-serif;
}

th, td {
  padding: 10px;
  text-align: center;
}

tr:nth-child(even) {
  background-color: #fafafa;
}
tr:hover {
  background-color: #f1f1f1;
}

HTML Table With Images Examples

Using HTML and CSS you can also add images inside table cells. This is useful for product listings, staff profiles, or any content where you need pictures alongside data.

Here’s a simple table html table with images that displays team member names with their profile pictures:

HTML:

The <img> tag is used inside the first column to display a picture for each team member. We also added alt text, which is good practice for accessibility and SEO.

<table border="1" cellpadding="10">
  <tr>
    <th>Photo</th>
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td><img src="https://picsum.photos/100?random=4" alt="Alice"></td>
    <td>Alice Johnson</td>
    <td>Designer</td>
  </tr>
  <tr>
    <td><img src="https://picsum.photos/100?random=5" alt="Mark"></td>
    <td>Mark Lee</td>
    <td>Developer</td>
  </tr>
  <tr>
    <td><img src="https://picsum.photos/100?random=6" alt="Sara"></td>
    <td>Sara Kim</td>
    <td>Manager</td>
  </tr>
</table>

CSS:

 table {
      width: 70%;
      margin: auto;
      border-collapse: collapse;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      background: white;
      border-radius: 10px;
      overflow: hidden;
    }

    th, td {
      padding: 15px;
      text-align: center;
    }

    th {
      background: #000;
      color: white;
      font-size: 18px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

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

    tr:hover {
      background: #e9ffe9;
      transition: 0.3s ease;
    }

    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      transition: transform 0.3s ease;
    }

    img:hover {
      transform: scale(1.1);
    }

The CSS makes the table look much cleaner. We removed the default borders by using border-collapse: collapse, added padding inside the cells, and applied a soft hover effect so each row highlights when the mouse moves over it. The images are styled as circles using border-radius: 50%, which gives a neat profile-photo look.

The table headers are also styled with a blue background and white text to stand out.

Conclusion

Styling HTML tables with CSS3 is not just about making them look pretty—it’s about improving usability, readability, and responsiveness. By combining basic styling, advanced CSS techniques, and mobile-friendly design, you can transform ordinary tables into modern, interactive components that enhance your website’s professionalism.

Experiment with colors, hover effects, gradients, and responsive layouts to find the best table style for your site. Remember, a well-styled table is easier to read, easier to scan, and more likely to keep visitors engaged.

Bonus Tip: Use CSS variables for table colors and spacing to make them easy to update site-wide. 

For example:

:root {
  --table-header-bg: #4CAF50;
  --table-row-even-bg: #f2f2f2;
  --table-hover-bg: #ddd;
}

Then replace hardcoded colors with the variables:

th { background-color: var(--table-header-bg); }
tr:nth-child(even) { background-color: var(--table-row-even-bg); }
tr:hover { background-color: var(--table-hover-bg); }