Default Table Styles

HTML tables have minimal default styling from the browser. Cells have no visible borders, spacing is inconsistent, and the overall appearance is plain. CSS gives you complete control over table presentation.

Table Borders

Basic Borders

CSS

table {
  border: 1px solid #ddd;
}

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

By default, table borders have gaps between them. This is because the default border-collapse value is separate.

Collapsing Borders

CSS

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
}

border-collapse: collapse merges adjacent borders into a single line, creating a clean grid appearance. This is what you want in most cases.

Border Spacing

When using border-collapse: separate (default), control the gap between cells:

CSS

table {
  border-collapse: separate;
  border-spacing: 8px;
}

Table Width and Layout

Full-Width Tables

CSS

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

Fixed Table Layout

By default, column widths are determined by content. Use table-layout: fixed for predictable widths:

CSS

table {
  width: 100%;
  table-layout: fixed;
}

With fixed layout, columns are sized by the first row's widths or explicit width values, not by content. This improves rendering performance for large tables.

Styling Table Headers

CSS

th {
  background-color: #2c3e50;
  color: white;
  font-weight: 600;
  text-align: left;
  padding: 1rem;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

Styling Table Cells

CSS

td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

Vertical Alignment

CSS

td { vertical-align: top; }     /* Align to top */
td { vertical-align: middle; }  /* Align to middle (default) */
td { vertical-align: bottom; }  /* Align to bottom */

Striped Rows

Alternating row colors improve readability in data-heavy tables:

CSS

/* Zebra striping */
tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* Or odd rows */
tbody tr:nth-child(odd) {
  background-color: #f8f9fa;
}

Hover Effects

CSS

tbody tr:hover {
  background-color: #e8f4fd;
  cursor: pointer;
}

/* Smooth transition */
tbody tr {
  transition: background-color 0.15s ease;
}

Complete Styled Table Example

CSS

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
}

.data-table thead {
  background: #2c3e50;
  color: white;
}

.data-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.data-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #eee;
}

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

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

.data-table tbody tr:last-child td {
  border-bottom: none;
}

Caption Styling

The caption element provides a title for the table:

CSS

caption {
  caption-side: top;  /* or bottom */
  padding: 0.75rem;
  font-weight: bold;
  font-size: 1.1rem;
  text-align: left;
  color: #555;
}

Responsive Tables

Tables often overflow on small screens. Here are common solutions:

Horizontal Scroll

CSS

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

HTML

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

Column Hiding

CSS

@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
}

Stacked Layout

CSS

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead {
    display: none; /* Hide header row */
  }

  td {
    padding-left: 50%;
    position: relative;
    border-bottom: 1px solid #eee;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    font-weight: 600;
  }
}

Summary

CSS provides extensive control over table styling through border-collapse, table-layout, padding, and pseudo-classes. Use striped rows and hover effects for readability, border-collapse: collapse for clean borders, and overflow-x: auto for responsive tables. Well-styled tables present data clearly and professionally.