Tables in CSS - Make Tables Clean and Easy to Read

Tables (table) are great for data: prices, results, comparison charts. But without CSS they often look outdated and hard to read.

If you are looking for table styling in CSS, how to use border-collapse, or the best way to style professional tables, this lesson is for you.

Table Styling Basics in CSS

The main properties you usually need are:

• border-collapse: merge cell borders.
• width: control table width.
• border on table, th, td.
• padding inside cells for readability.

Simple definition: Table styling in CSS means improving the look of a table and its cells for clarity and usability.

border-collapse in CSS (Most Important Property)

By default, borders are separated and can look old-fashioned. border-collapse: collapse; merges them into a clean single line.

table {
    border-collapse: collapse;
}

What does this code do? Removes gaps between cell borders and makes the table cleaner.

Expected result: neat, consistent borders.

Common mistake: forgetting collapse and wondering why borders look doubled.

width: 100% for Tables in CSS

Most tables should stretch to the container width.

table {
    width: 100%;
}

What does this code do? Makes the table flexible inside its container.

Expected result: balanced table width across sections.

Common mistake: using a large fixed width that breaks on small screens.

Apply Borders to table, th, and td

table,
th,
td {
    border: 1px solid #d1d5db;
}

What does this code do? Adds a consistent border to the table and all cells.

Expected result: clearer data separation, especially in comparison tables.

Complete Example: A Professional Table in CSS

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #e5e7eb;
    padding: 10px;
    text-align: right;
}

th {
    background: #f8fafc;
}

What does this code do? Applies clean, practical styling for data tables.

Line by line:

• border-collapse: merge borders.
• padding: comfortable spacing inside cells.
• text-align: right: good for RTL tables.
• th background: highlights header row.

Expected result: a clear, readable table.

Common mistake: leaving cells without padding so they look cramped.

Responsive Tip for Tables

On small screens, wrap the table in a horizontal scroll container:

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

Expected result: the table does not break the page on mobile.

Common Mistakes with Table Styling in CSS

1) Forgetting border-collapse: double borders and old look.

2) Not styling th: headers are hard to distinguish.

3) Wide tables without responsive fix: break mobile layout.

FAQ - Common Search Questions

How do I make a professional table in CSS?

Use border-collapse: collapse with padding on cells and a clear style for th.

What is the purpose of border-collapse in CSS?

It merges adjacent borders into a single clean line and prevents double borders.

How do I make a table responsive in CSS?

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

Why does my table look cramped in CSS?

Usually because there is no padding inside th and td.

Should I always use width: 100% for tables?

Often yes inside flexible containers, with a responsive fallback on small screens.