5

Create a Comparison Table with HTML and CSS

 5 months ago
source link: https://www.geeksforgeeks.org/create-a-comparison-table-with-html-and-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Create a Comparison Table with HTML and CSS

Discuss
Courses

In this article, we will see how to create a comparison table using HTML and CSS. HTML is used to create the table structure and CSS adds styles to the table.

The Comparison table contains different products and compares the products based on their features. Here, we have added courses as products and comparisons based on pricing, features, and ratings.

Example: In this example, we will create a comparison table on different products.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Product Comparison Table</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.comparison-table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.comparison-table th, .comparison-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
.comparison-table th {
background-color: #f2f2f2;
}
.product-name {
font-weight: bold;
}
@media (max-width: 768px) {
.comparison-table {
width: 100%;
}
}
</style>
</head>
<body>
<table class="comparison-table">
<thead>
<tr>
<th>Courses</th>
<th>HTML</th>
<th>CSS</th>
<th>JavaScript</th>
</tr>
</thead>
<tbody>
<tr>
<td class="product-name">Price</td>
<td>$100</td>
<td>$120</td>
<td>$90</td>
</tr>
<tr>
<td class="product-name">Features</td>
<td>Feature X, Feature Y, Feature Z</td>
<td>Feature X, Feature Z</td>
<td>Feature Y, Feature Z</td>
</tr>
<tr>
<td class="product-name">Rating</td>
<td>4.5/5</td>
<td>3.8/5</td>
<td>4.2/5</td>
</tr>
</tbody>
</table>
</body>
</html>

Output:

table1

Example 2: In this example, we will create a comparison table on different products with correct and incorrect symbols.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Product Comparison Table</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.comparison-table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.comparison-table th, .comparison-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
.comparison-table th {
background-color: #f2f2f2;
}
.product-name {
font-weight: bold;
}
.correct {
color: green;
}
.incorrect {
color: red;
}
@media (max-width: 768px) {
.comparison-table {
width: 100%;
}
}
</style>
</head>
<body>
<table class="comparison-table">
<thead>
<tr>
<th>Features</th>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td class="product-name">Styling</td>
<td class="correct">✓</td>
<td class="incorrect">✗</td>
</tr>
<tr>
<td class="product-name">Structure</td>
<td class="incorrect">✗</td>
<td class="correct">✓</td>
</tr>
<tr>
<td class="product-name">Web Page</td>
<td class="correct">✓</td>
<td class="correct">✓</td>
</tr>
<tr>
<td class="product-name">Scripting</td>
<td class="incorrect">✗</td>
<td class="incorrect">✗</td>
</tr>
</tbody>
</table>
</body>
</html>

Output:

table2
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!
Last Updated : 13 Dec, 2023
Like Article
Save Article

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK