Prev Next

CSS Table Style

Beyond borders and alignment, you can style tables with background colors, hover effects, striped rows, and more. These enhancements improve aesthetics and usability, making large data sets more approachable and easier to parse.

Key Topics

Striped Rows

Apply alternating background colors to rows for easier reading. For example, tr:nth-child(even) could have a light gray background.

Hover Effects

Highlighting a row on hover helps users follow a row across columns. tr:hover can change the background color for better focus.

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid #ccc;
        padding: 8px;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    tr:hover {
        background-color: #e0e0e0;
    }
</style>

Explanation: Striped rows and hover states help users stay oriented, improving the table’s overall usability.

Key Takeaways

  • Aesthetics & Usability: Simple styling enhances table readability.
  • Striped Rows: Alternate row colors for easier scanning.
  • Hover Effects: Focus the user’s attention on hovered rows.
Prev Next