CSS Table Styling: Borders, Padding, and Alternating Rows

CSS

"Learning CSS is like solving a puzzle—except if one piece is out of place, your entire website ends up looking like a closet hit by a tornado!"

Tables Don’t Have to Be Boring!

Tables are great for organizing data, but by default, they look like they came straight from the ‘90s. But don’t worry! With CSS magic, you can transform dull tables into sleek, readable, and stylish layouts.

Today, we’ll learn how to:

• Add Borders & Padding – Make tables neat and spaced out. 
• Style Table Headers – Highlight column titles for clarity. 
• Create Alternating Row Colors – Improve readability. 

Let’s dive in!

Adding Borders and Padding to Tables

Borders define table outlines, and padding creates space inside cells. Without styling, tables look cramped and hard to read. Let’s fix that!

Example:

table {
  border-collapse: collapse; /* Ensures clean borders */
  width: 100%; /* Makes table fit container */
}

td, th {
  border: 2px solid #333; /* Dark border for clarity */
  padding: 10px; /* Adds breathing room */
  text-align: left; /* Aligns text neatly */
}

border-collapse: collapse; removes double borders. Padding keeps text from sticking to the edges.

Pro Tip: Use lighter borders for a softer look!

Styling Table Headers

Table headers (<th>) should stand out from the rest. Let’s add some styling magic!

Example:

th {
  background-color: #007BFF; /* Stylish blue header */
  color: white; /* White text for contrast */
  font-weight: bold;
  text-transform: uppercase; /* Makes text stand out */
}

Background color makes headers pop.  Bold and uppercase text improves readability.

Pro Tip: Match header colors with your website’s theme for a cohesive look!

Alternating Row Colors for Readability

Ever seen tables where every other row has a different background color? That’s striping, and it helps users follow rows easily.

Example (Using nth-child Selector):

tr:nth-child(even) {
  background-color: #f2f2f2; /* Light gray for every second row */
}

Improves readability, especially in large tables. Enhances UI design without extra markup.

Pro Tip: Use subtle colors like light gray or pastel shades for a clean look.

Conclusion

• Borders & Padding – Keep tables structured and readable. 
• Styled Headers – Highlight important column titles.
• Alternating Rows – Improve data readability with colors.

Style your tables like a CSS wizard!