কম্পিউটার

কিভাবে 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 {
      font-weight: bold;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 18px;
      text-align: left;
      padding: 16px;
   }
   tr:nth-child(even) {
      background-color: #8b8b8b;
      color: white;
   }
</style>
</head>
<body>
<h1>Zebra Striped Table Example</h1>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>BirthMonth</th>
</tr>
<tr>
<td>Jack</td>
<td>Roy</td>
<td>January</td>
</tr>
<tr>
<td>Steve</td>
<td>Smith</td>
<td>March</td>
</tr>
<tr>
<td>Brandon</td>
<td>Anderson</td>
<td>February</td>
</tr>
<table>
</body>
</html>

আউটপুট

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

তৈরি করবে

কিভাবে CSS দিয়ে একটি জেব্রা স্ট্রাইপড টেবিল তৈরি করবেন?


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

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

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

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