CSS Tables

CSS Tables – Complete Beginner Guide

Tables are commonly used to display structured data like pricing plans, schedules, reports, and comparison charts. By default, HTML tables look plain and outdated — but with CSS, you can turn them into clean, modern, and responsive designs.

In this beginner-friendly, you’ll learn:

• Basic HTML table structure

• How to style tables with CSS

• Borders and spacing

• Table alignment

• Zebra striping

• Hover effects

• Responsive tables

• Best practices

Let’s get started

Basic HTML Table Structure

Before styling, understand table elements:

Table Tags Explained

Adding Borders to Tables

By default, tables have no borders.

This adds borders to all cells.

Collapsing Borders

Without collapsing, borders look doubled.

Use:

Now borders merge into single lines.

Adding Padding for Better Spacing

Improves readability.

Setting Table Width

Makes table responsive within container.

You can also use:

Styling Table Headers

Creates clear distinction between header and content.

Zebra Striping (Alternating Row Colors)

Improves readability.

Alternates row colors automatically.

Hover Effect on Rows

Useful for interactive tables.

Aligning Table Content

By default:

• Text aligns left

• Headers align center

Change alignment:

Vertical alignment:

Styling Table Borders Individually

Gives header separation.

Responsive Tables

Large tables may overflow on small screens.

Wrap table in container:

CSS:

Allows horizontal scroll on mobile.

Making Table Modern and Clean

Example:

This creates professional table design.

Using CSS Frameworks for Tables

Frameworks like:

• Bootstrap

• Tailwind CSS

Provide pre-styled tables.

Example (Bootstrap):

Example (Tailwind):

Table Caption Styling

Add caption:

Style caption:

Improves accessibility.

Fixed Table Layout

Speeds rendering and controls column width.

Setting Column Width

Controls specific column.

Common Beginner Mistakes

•  Not using border-collapse
•  Forgetting padding
•  Making tables too wide
•  Not optimizing for mobile
•  Using tables for layout instead of data

Use tables only for tabular data.

Accessibility Best Practices

•  Use <th> for headers
•  Use <caption>
•  Use proper semantic structure
•  Avoid using tables for page layout

Screen readers rely on proper structure.

Table vs Div Layout

Use <table> only for:

• Data

• Reports

• Schedules

Use <div> for layout structure.

Frequently Asked Questions (FAQs)

1. How do I add borders to a table?

Use border property on table, th, and td.

2. What does border-collapse do?

It merges table cell borders into a single border.

3. How do I make tables responsive?

Wrap table in a container with overflow-x: auto;.

4. How do I alternate row colors?

Use nth-child(even) selector.

5. Should tables be used for layout?

No. Use tables only for tabular data.

Conclusion

CSS tables allow you to transform plain data into clean, readable, and responsive designs.

You learned:

• Table structure

• Border styling

• Zebra striping

• Hover effects

• Responsive design

• Accessibility tips

Mastering CSS tables helps you present structured data professionally.