CSS Tables with Examples

What Are CSS Tables?

CSS tables are HTML tables styled with CSS to improve readability, spacing, visual hierarchy, responsiveness, and usability. Tables are best used for structured data that belongs in rows and columns.

<table class="data-table">
  <caption>Course Progress</caption>
  <thead>
    <tr>
      <th>Course</th>
      <th>Lessons</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>32</td>
      <td>Completed</td>
    </tr>
  </tbody>
</table>

Why CSS Table Styling Is Important

• Improves readability of structured data.
• Makes rows, columns, headers, and values easier to scan.
• Supports responsive layouts for mobile users.
• Improves accessibility with captions and semantic table elements.
• Creates consistent data display patterns across websites and dashboards.
• Helps users compare information quickly.

CSS Tables Cheatsheet

Basic CSS Table Styling Example

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.data-table th,
.data-table td {
  padding: 0.75rem 1rem;
  border: 1px solid #dee2e6;
  text-align: left;
  vertical-align: top;
}

.data-table th {
  background-color: #f8f9fa;
  font-weight: 700;
}

This creates a clean table with readable spacing, visible borders, and clear headers.

CSS Table Caption Styling

A table caption describes what the table contains. It improves accessibility and clarity.

.data-table caption {
  caption-side: top;
  padding: 0.75rem 0;
  font-weight: 700;
  text-align: left;
}

Use captions when the table needs a title or explanation.

Striped Table Rows Example

Striped rows make large tables easier to scan.

.data-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

Hover Table Rows Example

Hover states help users track rows in interactive tables.

.data-table tbody tr:hover {
  background-color: #eef5ff;
}

Do not rely only on hover, because touch devices may not support hover behavior.

Bordered Table Example

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

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
  padding: 0.75rem;
}

Borderless Table Example

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

.table-borderless th,
.table-borderless td {
  border: 0;
  padding: 0.75rem 0;
}

.table-borderless tr {
  border-bottom: 1px solid #dee2e6;
}

Borderless tables work well for simple summaries and profile details.

Compact Table Example

Compact tables display more data in less vertical space.

.table-compact th,
.table-compact td {
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
}

Use compact tables carefully. Very small text or spacing can hurt readability.

Table Text Alignment

Text is usually left-aligned, while numbers are often right-aligned for easier comparison.

.data-table th {
  text-align: left;
}

.data-table .text-end,
.data-table .number {
  text-align: right;
}

.data-table .text-center {
  text-align: center;
}

Responsive CSS Table Example

Wide tables can overflow on small screens. Wrap them in a responsive container.

<div class="table-responsive">
  <table class="data-table">
    ...
  </table>
</div>

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive .data-table {
  min-width: 640px;
}

This keeps the page layout stable while allowing the table to scroll horizontally.

Sticky Table Header Example

Sticky headers help users understand columns while scrolling long tables.

.table-scroll {
  max-height: 420px;
  overflow: auto;
}

.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #f8f9fa;
}

Status Table Example

Tables often show statuses with badges or labels.

.status {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.status-success {
  background-color: #d1e7dd;
  color: #0f5132;
}

.status-warning {
  background-color: #fff3cd;
  color: #664d03;
}

Pricing Table Example

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

.pricing-table th,
.pricing-table td {
  padding: 1rem;
  border: 1px solid #dee2e6;
  text-align: center;
}

.pricing-table th:first-child,
.pricing-table td:first-child {
  text-align: left;
}

Dashboard Table Example

Dashboards often need clean rows, compact spacing, status labels, and hover states.

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

.dashboard-table th,
.dashboard-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
}

.dashboard-table tbody tr:hover {
  background-color: #f8f9fa;
}

CSS Tables and Accessibility

• Use tables only for tabular data, not page layout.
• Use <caption> to describe table content when helpful.
• Use <th> for row and column headers.
• Keep header text clear and meaningful.
• Do not rely only on color to communicate status.
• Keep enough contrast for text, borders, stripes, and badges.
• Make responsive tables usable with keyboard and zoom.

CSS Tables and SEO

CSS table styling does not directly improve rankings, but semantic, readable tables help users and search engines understand structured information.

• Use real HTML tables for structured data.
• Use captions and clear headings for context.
• Keep table content readable on mobile devices.
• Use semantic markup instead of visual-only layouts.
• Readable comparison tables can improve content usefulness.

Common CSS Table Mistakes

• Using tables for page layout instead of data.
• Not using <th> for table headers.
• Forgetting a responsive wrapper for wide tables.
• Using low-contrast striped rows or status badges.
• Making compact tables too small to read.
• Relying only on color to show success, warning, or error states.
• Forgetting to test tables on mobile and zoomed screens.

CSS Table Best Practices

• Use semantic table elements: table, caption, thead, tbody, tr, th, and td.
• Use border-collapse: collapse; for clean borders.
• Use enough padding for readable cells.
• Use striped rows carefully for scanability.
• Right-align numeric values when comparing numbers.
• Wrap wide tables in a responsive scroll container.
• Use sticky headers for long tables when helpful.
• Test tables on mobile, desktop, keyboard, and zoomed text sizes.

Key Takeaways

• CSS tables improve readability and presentation of tabular data.
• border-collapse, padding, borders, and header styles are common table styles.
• Striped rows and hover states help users scan large tables.
• Responsive wrappers prevent wide tables from breaking mobile layouts.
• Semantic table markup improves accessibility and content clarity.