Author
Tables are a fundamental part of web design for displaying structured data such as schedules, pricing plans, comparisons, or reports. While HTML provides the structure, **CSS allows you to style tables to make them visually appealing, readable, and responsive across devices.
Borders are one of the most basic and important aspects of table styling. You can control:
border-collapse: collapse; removes double borders between cells.CSS Example:
table {
border: 2px solid #333; /* outer border */
border-collapse: collapse; /* removes double borders between cells */
width: 100%;
}
td, th {
border: 1px solid #ccc; /* individual cell borders */
padding: 10px;
}
Padding adds space inside each table cell, making content more readable.
Spacing can create space between cells (using border-spacing).
table {
border-spacing: 5px; /* adds space between cells */
}
td, th {
padding: 12px 15px; /* top-bottom | left-right */
}
CSS allows you to differentiate table headers and data cells for better hierarchy and visual appeal.
th {
background-color: #f2f2f2;
color: #333;
font-weight: bold;
text-align: left;
}
td {
color: #555;
}
Adding alternating row colors (zebra stripes) and hover effects improves user experience and makes data easier to scan.
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e0f7fa;
}
Tables can be tricky on mobile devices because they have fixed columns. CSS provides solutions:
Scroll Container Method:
.table-responsive {
overflow-x: auto;
width: 100%;
}
HTML :
Users can scroll horizontally on small screens.
Keeps table layout intact without breaking the design.
<div class="table-responsive">
<table>
<!-- table content -->
</table>
</div>
Rounded Borders
Use border-radius for smooth, modern corners.
table {
border-radius: 8px;
overflow: hidden; /* ensures rounded corners display correctly */
}
Column Highlighting
Style specific columns with td:nth-child(n) to emphasize data.
td:nth-child(2) {
background-color: #f0f8ff;
}
Icons and Images in Cells – Use ::before or <img> for status indicators.
/* Icons in cells using ::before */
td.status::before {
content: "✔️"; /* checkmark icon */
margin-right: 6px;
}
Sticky Headers – Keep <thead> visible while scrolling:
thead th {
position: sticky;
top: 0;
background-color: #f2f2f2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tables Example</title>
<style>
/* Responsive container */
.table-responsive {
overflow-x: auto;
}
table {
border-collapse: collapse; /* collapse double borders */
width: 100%;
max-width: 800px;
border: 2px solid #333; /* outer border */
}
th, td {
border: 1px solid #ccc; /* cell borders */
padding: 10px 15px; /* cell padding */
text-align: left;
}
th {
background-color: #f2f2f2; /* header styling */
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9; /* zebra stripes */
}
tr:hover {
background-color: #e0f7fa; /* hover effect */
}
</style>
</head>
<body>
<h3>Responsive Styled Table Example</h3>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$1</td>
<td>50</td>
<td>Available</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.5</td>
<td>100</td>
<td>Available</td>
</tr>
<tr>
<td>Mango</td>
<td>$2</td>
<td>30</td>
<td>Limited</td>
</tr>
<tr>
<td>Orange</td>
<td>$1.5</td>
<td>0</td>
<td>Out of Stock</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output :
