HTML Table Styling Guide

Learn how to create beautiful and functional styled tables in HTML

Introduction to Table Styling

HTML tables are essential for displaying tabular data, but their default appearance is often plain and unappealing. With CSS, you can transform basic tables into visually appealing components that enhance readability and user experience.

Basic Table Styles

Basic Table Styling

Simple table with borders and header styling

Name	Email
Chillu Coder	chillu@example.com

<style>
.basic-table {
  border-collapse: collapse;
  width: 100%;
}
.basic-table th, .basic-table td {
  border: 1px solid #ddd;
  padding: 8px;
}
.basic-table th {
  background-color: #4a6ee0;
  color: white;
}
</style>

<table class="basic-table">
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Chillu Coder</td>
    <td>chillu@example.com</td>
  </tr>
</table><style>
.basic-table {
  border-collapse: collapse;
  width: 100%;
}
.basic-table th, .basic-table td {
  border: 1px solid #ddd;
  padding: 8px;
}
.basic-table th {
  background-color: #4a6ee0;
  color: white;
}
</style>

<table class="basic-table">
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Chillu Coder</td>
    <td>chillu@example.com</td>
  </tr>
</table>

Zebra Striping

Alternating row colors for better readability

Product	Price
Laptop	$999
Phone	$699

<style>
.zebra-table {
  border-collapse: collapse;
  width: 100%;
}
.zebra-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
.zebra-table tr:hover {
  background-color: #e6e6e6;
}
</style>

<table class="zebra-table">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$999</td>
  </tr>
  <tr>
    <td>Phone</td>
    <td>$699</td>
  </tr>
</table><style>
.zebra-table {
  border-collapse: collapse;
  width: 100%;
}
.zebra-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
.zebra-table tr:hover {
  background-color: #e6e6e6;
}
</style>

<table class="zebra-table">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$999</td>
  </tr>
  <tr>
    <td>Phone</td>
    <td>$699</td>
  </tr>
</table>

Hover Effects

Highlight rows on hover for better interactivity

Date	Event
June 15	Conference

<style>
.hover-table {
  border-collapse: collapse;
  width: 100%;
}
.hover-table tr:hover {
  background-color: #f5f5f5;
}
</style>

<table class="hover-table">
  <tr>
    <th>Date</th>
    <th>Event</th>
  </tr>
  <tr>
    <td>June 15</td>
    <td>Conference</td>
  </tr>
</table><style>
.hover-table {
  border-collapse: collapse;
  width: 100%;
}
.hover-table tr:hover {
  background-color: #f5f5f5;
}
</style>

<table class="hover-table">
  <tr>
    <th>Date</th>
    <th>Event</th>
  </tr>
  <tr>
    <td>June 15</td>
    <td>Conference</td>
  </tr>
</table>

Advanced Table Styles

Condensed Table

Compact table with reduced padding

ID	Name
001	Project Alpha

<style>
.condensed-table {
  border-collapse: collapse;
  font-size: 0.9em;
}
.condensed-table th, .condensed-table td {
  padding: 6px;
}
</style>

<table class="condensed-table">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>001</td>
    <td>Project Alpha</td>
  </tr>
</table><style>
.condensed-table {
  border-collapse: collapse;
  font-size: 0.9em;
}
.condensed-table th, .condensed-table td {
  padding: 6px;
}
</style>

<table class="condensed-table">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>001</td>
    <td>Project Alpha</td>
  </tr>
</table>

Borderless Table

Minimal table with subtle dividers

Category	Value
Views	1,245

<style>
.borderless-table {
  border-collapse: separate;
  border-spacing: 0;
}
.borderless-table td {
  border-bottom: 1px solid #eee;
}
</style>

<table class="borderless-table">
  <tr>
    <th>Category</th>
    <th>Value</th>
  </tr>
  <tr>
    <td>Views</td>
    <td>1,245</td>
  </tr>
</table><style>
.borderless-table {
  border-collapse: separate;
  border-spacing: 0;
}
.borderless-table td {
  border-bottom: 1px solid #eee;
}
</style>

<table class="borderless-table">
  <tr>
    <th>Category</th>
    <th>Value</th>
  </tr>
  <tr>
    <td>Views</td>
    <td>1,245</td>
  </tr>
</table>

Responsive Table

Horizontal scrolling for small screens

Column 1	Column 2	Column 3	Column 4
Data 1	Data 2	Data 3	Data 4

<style>
.responsive-container {
  overflow-x: auto;
}
.responsive-table {
  min-width: 600px;
}
</style>

<div class="responsive-container">
  <table class="responsive-table">
    <!-- Wide table content -->
  </table>
</div><style>
.responsive-container {
  overflow-x: auto;
}
.responsive-table {
  min-width: 600px;
}
</style>

<div class="responsive-container">
  <table class="responsive-table">
    <!-- Wide table content -->
  </table>
</div>

Practical Examples

Product Comparison Table

Styled table for comparing product features

Feature	Basic	Pro	Enterprise
Storage	10GB	50GB	Unlimited

<style>
.comparison-table {
  border-collapse: collapse;
  width: 100%;
}
.comparison-table th {
  background-color: #2c3e50;
  color: white;
  padding: 12px;
  text-align: left;
}
.comparison-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.comparison-table tr:nth-child(even) {
  background-color: #f8f9fa;
}
.comparison-table .highlight {
  background-color: #fffacd;
}
</style>

<table class="comparison-table">
  <tr>
    <th>Feature</th>
    <th>Basic</th>
    <th class="highlight">Pro</th>
    <th>Enterprise</th>
  </tr>
  <tr>
    <td>Storage</td>
    <td>10GB</td>
    <td class="highlight">50GB</td>
    <td>Unlimited</td>
  </tr>
</table><style>
.comparison-table {
  border-collapse: collapse;
  width: 100%;
}
.comparison-table th {
  background-color: #2c3e50;
  color: white;
  padding: 12px;
  text-align: left;
}
.comparison-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.comparison-table tr:nth-child(even) {
  background-color: #f8f9fa;
}
.comparison-table .highlight {
  background-color: #fffacd;
}
</style>

<table class="comparison-table">
  <tr>
    <th>Feature</th>
    <th>Basic</th>
    <th class="highlight">Pro</th>
    <th>Enterprise</th>
  </tr>
  <tr>
    <td>Storage</td>
    <td>10GB</td>
    <td class="highlight">50GB</td>
    <td>Unlimited</td>
  </tr>
</table>

Calendar Table

Styled table for displaying calendar data

<style>
.calendar {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
.calendar th {
  background-color: #e74c3c;
  color: white;
  padding: 10px;
}
.calendar td {
  padding: 15px;
  border: 1px solid #ddd;
}
.calendar .today {
  background-color: #e74c3c;
  color: white;
  border-radius: 50%;
}
</style>

<table class="calendar">
  <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>1</td>
    <td class="today">2</td>
  </tr>
</table><style>
.calendar {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
.calendar th {
  background-color: #e74c3c;
  color: white;
  padding: 10px;
}
.calendar td {
  padding: 15px;
  border: 1px solid #ddd;
}
.calendar .today {
  background-color: #e74c3c;
  color: white;
  border-radius: 50%;
}
</style>

<table class="calendar">
  <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>1</td>
    <td class="today">2</td>
  </tr>
</table>

Pricing Table

Attractive table for displaying pricing plans

Basic	Pro	Enterprise
$9.99/mo	$29.99/mo	Custom

<style>
.pricing-table {
  border-collapse: separate;
  border-spacing: 0 10px;
  width: 100%;
}
.pricing-table th {
  background-color: #4a6ee0;
  color: white;
  padding: 15px;
  text-align: center;
}
.pricing-table td {
  padding: 12px;
  text-align: center;
  background-color: #f8f9fa;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.pricing-table td:first-child {
  border-left: 1px solid #ddd;
  border-radius: 5px 0 0 5px;
}
.pricing-table td:last-child {
  border-right: 1px solid #ddd;
  border-radius: 0 5px 5px 0;
}
.pricing-table .popular {
  background-color: #4a6ee0;
  color: white;
}
</style>

<table class="pricing-table">
  <tr>
    <th>Basic</th>
    <th class="popular">Pro</th>
    <th>Enterprise</th>
  </tr>
  <tr>
    <td>$9.99/mo</td>
    <td class="popular">$29.99/mo</td>
    <td>Custom</td>
  </tr>
</table><style>
.pricing-table {
  border-collapse: separate;
  border-spacing: 0 10px;
  width: 100%;
}
.pricing-table th {
  background-color: #4a6ee0;
  color: white;
  padding: 15px;
  text-align: center;
}
.pricing-table td {
  padding: 12px;
  text-align: center;
  background-color: #f8f9fa;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.pricing-table td:first-child {
  border-left: 1px solid #ddd;
  border-radius: 5px 0 0 5px;
}
.pricing-table td:last-child {
  border-right: 1px solid #ddd;
  border-radius: 0 5px 5px 0;
}
.pricing-table .popular {
  background-color: #4a6ee0;
  color: white;
}
</style>

<table class="pricing-table">
  <tr>
    <th>Basic</th>
    <th class="popular">Pro</th>
    <th>Enterprise</th>
  </tr>
  <tr>
    <td>$9.99/mo</td>
    <td class="popular">$29.99/mo</td>
    <td>Custom</td>
  </tr>
</table>

Accessibility Features

Accessible Table

Table with proper scope and ARIA attributes

Monthly Sales by Region
Region	Sales
North	$10,000

<table aria-describedby="table-desc">
  <caption id="table-desc">Monthly Sales by Region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$10,000</td>
    </tr>
  </tbody>
</table>

<style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
</style><table aria-describedby="table-desc">
  <caption id="table-desc">Monthly Sales by Region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$10,000</td>
    </tr>
  </tbody>
</table>

<style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
</style>

High Contrast Table

Table designed for better visibility

Name	Email
Chillu Coder	chillu@example.com

<style>
.high-contrast-table {
  border-collapse: collapse;
  width: 100%;
}
.high-contrast-table th {
  background-color: black;
  color: white;
  padding: 12px;
  border: 2px solid white;
}
.high-contrast-table td {
  padding: 10px;
  border: 2px solid black;
  background-color: white;
  color: black;
}
</style>

<table class="high-contrast-table">
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Chillu Coder</td>
    <td>chillu@example.com</td>
  </tr>
</table><style>
.high-contrast-table {
  border-collapse: collapse;
  width: 100%;
}
.high-contrast-table th {
  background-color: black;
  color: white;
  padding: 12px;
  border: 2px solid white;
}
.high-contrast-table td {
  padding: 10px;
  border: 2px solid black;
  background-color: white;
  color: black;
}
</style>

<table class="high-contrast-table">
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Chillu Coder</td>
    <td>chillu@example.com</td>
  </tr>
</table>

Responsive Techniques

Stacked Responsive Table

Table that stacks on small screens

Name	Email
Chillu Coder	chillu@example.com

Name:Chillu Coder

Email:chillu@example.com

<style>
@media (max-width: 600px) {
  .stacked-table thead {
    display: none;
  }
  .stacked-table tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ddd;
  }
  .stacked-table td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  .stacked-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}
</style>

<table class="stacked-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">Chillu Coder</td>
      <td data-label="Email">chillu@example.com</td>
    </tr>
  </tbody>
</table><style>
@media (max-width: 600px) {
  .stacked-table thead {
    display: none;
  }
  .stacked-table tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ddd;
  }
  .stacked-table td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  .stacked-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}
</style>

<table class="stacked-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">Chillu Coder</td>
      <td data-label="Email">chillu@example.com</td>
    </tr>
  </tbody>
</table>

Horizontal Scroll Table

Table with horizontal scrolling on small screens

Column 1	Column 2	Column 3
Data 1	Data 2	Data 3

<style>
.scroll-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll-table {
  min-width: 600px;
}
</style>

<div class="scroll-table-container">
  <table class="scroll-table">
    <!-- Wide table content -->
  </table>
</div><style>
.scroll-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll-table {
  min-width: 600px;
}
</style>

<div class="scroll-table-container">
  <table class="scroll-table">
    <!-- Wide table content -->
  </table>
</div>

< Previous Next >