لوگو لوگوی تاریک
کامپوننت ها

مثال جداول پایه

مثال هایی برای سبک انتخابی جداول با بوت استرپ. فقط کلاس پایه .table را به هر تگ <table> اضافه کنید، سپس با سبک های سفارشی یا برای ما گسترش دهید. کلاس های اصلاح کننده مختلف قرار گرفته شده است.

جدول پیش فرض

با استفاده از ابتدایی ترین نشانه گذاری جدول، در اینجا نحوه نمایش جدول های مبتنی بر .table به طور پیش فرض آمده است.

# نام نام خانوادگی رسیدگی
1 مهدی طاهری @mt
2 مجید فتحی @mf
3 سامان هاشمی @twitter
مثال کد
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">نام</th>
      <th scope="col">نام خانوادگی</th>
      <th scope="col">رسیدگی</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>مهدی</td>
      <td>طاهری</td>
      <td>@mt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>مجید</td>
      <td>فتحی</td>
      <td>@mf</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>سامان</td>
      <td>هاشمی</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

تنظیمات عنوان جدول

مانند جدول های دیگر، از کلاس های اصلاح کننده .table-light یا .table-dark برای روشن یا تاریک نشان دادن <thead> استفاده کنید.

# نام نام خانوادگی رسیدگی
1 مهدی طاهری @mt
2 مجید فتحی @mf
3 سامان هاشمی @twitter
مثال کد
<table class="table">
  <thead class="table-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">نام</th>
      <th scope="col">نام خانوادگی</th>
      <th scope="col">رسیدگی</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>مهدی</td>
      <td>طاهری</td>
      <td>@mt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>مجید</td>
      <td>فتحی</td>
      <td>@mf</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>سامان</td>
      <td>هاشمی</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# نام نام خانوادگی رسیدگی
1 مهدی طاهری @mt
2 مجید فتحی @mf
3 سامان هاشمی @twitter
مثال کد
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">نام</th>
      <th scope="col">نام خانوادگی</th>
      <th scope="col">رسیدگی</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>مهدی</td>
      <td>طاهری</td>
      <td>@mt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>مجید</td>
      <td>فتحی</td>
      <td>@mf</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>سامان</td>
      <td>هاشمی</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ردیف های راه راه جدول

از کلاس .table-stripped در تگ <table> استفاده کنید تا ردیف جدول راه راه گورخری شود.

# نام نام خانوادگی رسیدگی
1 مهدی طاهری @mt
2 مجید فتحی @mf
3 سامان هاشمی @twitter
مثال کد
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">نام</th>
      <th scope="col">نام خانوادگی</th>
      <th scope="col">رسیدگی</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>مهدی</td>
      <td>طاهری</td>
      <td>@mt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>مجید</td>
      <td>فتحی</td>
      <td>@mf</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>سامان</td>
      <td>هاشمی</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

جدول خط حاشیه دار

از کلاس .table-bordered در تگ <table> استفاده کنید تا هر سلول خط حاشیه دار شود.

# نام نام خانوادگی
1 مهدی طاهری
2 مجید فتحی
3 سامان هاشمی
مثال کد
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">نام</th>
      <th scope="col">نام خانوادگی</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>مهدی</td>
      <td>طاهری</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>مجید</td>
      <td>فتحی</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>سامان</td>
      <td>هاشمی</td>
    </tr>
  </tbody>
</table>

جدول بدون خط حاشیه

از کلاس .table-borderless در تگ <table> برای حذف هر خط حاشیه سلول استفاده کنید.

# نام نام خانوادگی رسیدگی
1 مهدی طاهری @mt
2 مجید فتحی @mf
3 سامان هاشمی @twitter
مثال کد
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">نام</th>
      <th scope="col">نام خانوادگی</th>
      <th scope="col">رسیدگی</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>مهدی</td>
      <td>طاهری</td>
      <td>@mt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>مجید</td>
      <td>فتحی</td>
      <td>@mf</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>سامان</td>
      <td>هاشمی</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ردیف قابل شناور جدول

از کلاس .table-hover در <table> برای فعال کردن حالت شناور در ردیف های جدول استفاده کنید.

# نام نام خانوادگی رسیدگی
1 مهدی طاهری @mt
2 مجید فتحی @mf
3 سامان هاشمی @twitter
مثال کد
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">نام</th>
      <th scope="col">نام خانوادگی</th>
      <th scope="col">رسیدگی</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>مهدی</td>
      <td>طاهری</td>
      <td>@mt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>مجید</td>
      <td>فتحی</td>
      <td>@mf</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>سامان</td>
      <td>هاشمی</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

جدول کوچک

برای دریافت جدول کوچکتر .table-sm را اضافه کنید.

# نام نام خانوادگی رسیدگی
1 مهدی طاهری @mt
2 مجید فتحی @mf
3 سامان هاشمی @twitter
مثال کد
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">نام</th>
      <th scope="col">نام خانوادگی</th>
      <th scope="col">رسیدگی</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>مهدی</td>
      <td>طاهری</td>
      <td>@mt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>مجید</td>
      <td>فتحی</td>
      <td>@mf</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>سامان</td>
      <td>هاشمی</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

جدول واکنشگرا

جدول واکنشگرا اجازه می دهد تا جدول به راحتی به صورت افقی اسکرول شود. با قرار دادن table با .table-responsive، هر جدولی را در همه درگاه های دید واکنشگرا کنید. یا، با استفاده از .table-responsive{-sm|-md|-lg|-xl}، حداکثر نقطه شکست را برای داشتن جدول واکنشگرا انتخاب کنید.

# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 سلول سلول سلول سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول سلول سلول سلول
مثال کد
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
© تمام حقوق محفوظ است. فارسی و راستچین سازی شده توسط فرشید ترنیان