بوت‌استرپ استایل‌های آماده برای جدول‌ها داره که خیلی راحت می‌تونی ظاهرشون رو زیباتر کنی.

📌 1. جدول ساده

با کلاس .table می‌تونی یه جدول پایه بسازی:

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>نام</th>
      <th>ایمیل</th>
      <th>شهر</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>علی</td>
      <td>ali@example.com</td>
      <td>تهران</td>
    </tr>
    <tr>
      <td>2</td>
      <td>سارا</td>
      <td>sara@example.com</td>
      <td>اصفهان</td>
    </tr>
  </tbody>
</table>

📌 2. جدول با خط‌های راه‌راه (Striped)

برای راه‌راه شدن ردیف‌ها:

<table class="table table-striped">
  ...
</table>

📌 3. جدول با خط‌های افقی (Bordered & Borderless)

• جدول با حاشیه:

<table class="table table-bordered">
  ...
</table>

• جدول بدون خط:

<table class="table table-borderless">
  ...
</table>

📌 4. جدول با رنگ‌های مختلف (Contextual classes)

می‌تونی ردیف یا سلول خاصی رو رنگی کنی:

<tr class="table-primary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

📌 5. جدول کوچک (Small Table)

برای کوچیک‌تر شدن جدول از .table-sm استفاده کن:

<table class="table table-sm">
  ...
</table>

📌 6. جدول ریسپانسیو (Responsive Table)

برای اینکه جدول توی موبایل اسکرول بخوره:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

✅ نکته: این کلاس‌ها رو می‌تونی با هم ترکیب کنی. مثلاً:

<table class="table table-striped table-bordered table-hover">
  ...
</table>