কম্পিউটার

কিভাবে CSS এর সাথে একটি তুলনা টেবিল তৈরি করবেন?


CSS দিয়ে একটি প্রতিক্রিয়াশীল টেবিল তৈরি করতে, কোডটি নিম্নরূপ -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      border: 1px solid #ddd;
   }
   th, td {
      text-align: center;
      padding: 16px;
      font-weight: bold;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 18px;
   }
   th:first-child, td:first-child {
      text-align: left;
   }
   tr:nth-child(even) {
      background-color: #f2f2f2
   }
</style>
</head>
<body>
<h1 style="text-align: center;">Comparison Table Example</h1>
<table>
<tr>
<th style="width:50%">Features</th>
<th>Basic</th>
<th>Pro</th>
</tr>
<tr>
<td>Free</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>Customer Support</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>Validity</td>
<td>1 Year</td>
<td>Lifetime</td>
</tr>
<tr>
<td>Warranty</td>
<td>No</td>
<td>5 Years</td>
</tr>
</table>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS এর সাথে একটি তুলনা টেবিল তৈরি করবেন?


  1. কিভাবে CSS দিয়ে কার্ড তৈরি করবেন?

  2. কিভাবে CSS দিয়ে একটি কুপন তৈরি করবেন?

  3. কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল মূল্যের টেবিল তৈরি করবেন?

  4. কিভাবে CSS দিয়ে তীর তৈরি করবেন?