CSS Table

Subject: css

CSS Table

Tables in HTML are used to display data in rows and columns. With CSS, you can improve the appearance of tables by customizing borders, spacing, alignment, background colors, and more. This enhances both readability and visual design of tabular data.

Common CSS Properties for Tables

  • border: Controls the outline of cells
  • border-collapse: Determines whether borders are shared or separated
  • padding: Adds space inside cells
  • text-align: Aligns text within cells
  • background-color: Applies background colors to rows, cells, or headers
  • :nth-child(): Targets specific rows for striping
  • :hover: Adds interactivity on mouse hover

Example: Styled HTML Table with CSS

🚀 Try it in Compiler

Additional CSS Table Options

1. border-collapse

Defines how cell borders behave:

🚀 Try it in Compiler

2. Zebra Striping Rows

Use nth-child(even) to apply alternate row colors:

🚀 Try it in Compiler

3. Hover Effect on Rows

Add interactivity:

🚀 Try it in Compiler

Key Takeaways

  • Use border-collapse: collapse for cleaner table borders.
  • Add padding to table cells for better readability.
  • Use text-align to center or align cell content.
  • Use nth-child() to stripe rows and improve legibility.
  • Add :hover effects for better interactivity.
  • Tables can be made responsive using width control, table-layout, and media queries.
Next: CSS Links