HTML جدول‌ها رو با <table>, <tr>, <th>, <td> می‌سازه.
ولی برای زیبا کردن اون‌ها از CSS استفاده می‌کنیم.

1️⃣ تعیین کادر جدول (Borders)

table, th, td {
  border: 1px solid black;
}

🔹 به صورت پیش‌فرض هر سلول مرز جداگانه داره. برای اینکه خطوط یکی بشن:

table {
  border-collapse: collapse; /* ادغام خطوط */
}

2️⃣ فاصله بین سلول‌ها

table {
  border-spacing: 10px; /* فقط وقتی border-collapse: separate باشه */
}

3️⃣ استایل سربرگ جدول

th {
  background-color: coral;
  color: white;
  padding: 10px;
  text-align: center;
}

4️⃣ استایل سلول‌ها

td {
  padding: 8px 12px;
  text-align: left;
}

🔹 مقادیر text-align:

• left → چپ‌چین

• right → راست‌چین

• center → وسط‌چین

5️⃣ عرض و ارتفاع جدول

table {
  width: 100%;
}
td {
  height: 40px;
}

6️⃣ تغییر رنگ ردیف‌ها (Striped Table)

tr:nth-child(even) {
  background-color: #f2f2f2;
}

🔹 این دستور باعث می‌شه ردیف‌های زوج رنگ متفاوت داشته باشن.

7️⃣ هاور روی ردیف‌ها

tr:hover {
  background-color: #ddd;
}

8️⃣ جدول واکنش‌گرا (Responsive Table)

.table-container {
  overflow-x: auto;
}

<div class="table-container">
  <table>
    <tr>
      <th>نام</th>
      <th>ایمیل</th>
      <th>شماره</th>
    </tr>
    <tr>
      <td>علی</td>
      <td>ali@email.com</td>
      <td>09120000000</td>
    </tr>
  </table>
</div>

✅ خلاصه:

• border, border-collapse, border-spacing → کنترل خطوط

• padding, text-align, width, height → کنترل ابعاد و متن

• nth-child, hover → افکت برای ردیف‌ها

• overflow-x: auto → واکنش‌گرا