Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a comparison table with CSS?
A comparison table with CSS helps present feature comparisons in an organized and visually appealing way. These tables are commonly used to compare products, services, or pricing plans.
Syntax
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: value;
text-align: alignment;
border: border-properties;
}
tr:nth-child(even) {
background-color: color;
}
Example: Basic Comparison Table
The following example creates a comparison table with alternating row colors and proper styling ?
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
margin: 20px auto;
}
th, td {
text-align: center;
padding: 16px;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
}
th:first-child, td:first-child {
text-align: left;
background-color: #f8f9fa;
}
th {
background-color: #007bff;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.highlight {
background-color: #e7f3ff;
font-weight: bold;
}
</style>
</head>
<body>
<h2 style="text-align: center;">Product Comparison</h2>
<table>
<tr>
<th style="width:40%">Features</th>
<th>Basic Plan</th>
<th>Pro Plan</th>
<th>Enterprise</th>
</tr>
<tr>
<td>Price</td>
<td>Free</td>
<td class="highlight">$19/month</td>
<td>$99/month</td>
</tr>
<tr>
<td>Storage</td>
<td>5GB</td>
<td>100GB</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Support</td>
<td>Email</td>
<td>24/7 Chat</td>
<td>Dedicated Manager</td>
</tr>
<tr>
<td>Users</td>
<td>1</td>
<td>5</td>
<td>Unlimited</td>
</tr>
</table>
</body>
</html>
A well-structured comparison table appears with a blue header row, alternating gray and white row backgrounds, and highlighted pricing information. The first column is left-aligned while other columns are center-aligned.
Enhanced Styling with Hover Effects
You can add hover effects and better visual hierarchy to make the table more interactive ?
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
margin: 20px auto;
}
th {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
font-size: 18px;
font-weight: 600;
}
td {
padding: 16px;
border-bottom: 1px solid #eee;
transition: background-color 0.3s ease;
}
tr:hover {
background-color: #f8f9fa;
transform: scale(1.02);
transition: all 0.2s ease;
}
.feature-col {
background-color: #f8f9fa;
font-weight: 600;
text-align: left;
}
.price {
color: #28a745;
font-weight: bold;
font-size: 18px;
}
.check {
color: #28a745;
font-size: 20px;
}
.cross {
color: #dc3545;
font-size: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th style="width:35%">Feature</th>
<th>Starter</th>
<th>Professional</th>
<th>Enterprise</th>
</tr>
<tr>
<td class="feature-col">Monthly Price</td>
<td class="price">$0</td>
<td class="price">$29</td>
<td class="price">$99</td>
</tr>
<tr>
<td class="feature-col">Projects</td>
<td>3</td>
<td>25</td>
<td>Unlimited</td>
</tr>
<tr>
<td class="feature-col">Advanced Analytics</td>
<td class="cross">?</td>
<td class="check">?</td>
<td class="check">?</td>
</tr>
<tr>
<td class="feature-col">API Access</td>
<td class="cross">?</td>
<td class="cross">?</td>
<td class="check">?</td>
</tr>
</table>
</body>
</html>
An enhanced comparison table with gradient header, hover effects, colored check/cross marks, and subtle shadows. Rows gently scale up when hovered, creating an interactive experience.
Conclusion
CSS comparison tables effectively organize feature comparisons using styling techniques like alternating row colors, hover effects, and visual hierarchy. These tables improve user experience when comparing options or making decisions.
Updated on: 2026-03-15T14:43:11+05:30
524 Views
Advertisements