عناصر جدول توضیح هدر در این قسمت قرار دارد...


جدول پایه

با استفاده از ابتدایی ترین نشانه گذاری جدول، در اینجا نحوه ظاهر جداول مبتنی بر جدول در بوت‌سترپ آمده است. همچنین می‌توانید رنگ‌ها را با متن روشن در پس‌زمینه‌های تیره معکوس کنید .table-dark.

جدول پیش فرض
# اول آخر هندل
1 مارک اوتو @mdo
2 جیکوب ترون @fat
3 لری پرنده @twitter
جدول تیره
# اول آخر هندل
1 مارک اوتو @mdo
2 جیکوب ترون @fat
3 لری پرنده @twitter
<!-- default table -->
<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>@mdo</td>
    </tr>
    ...
  </tbody>
</table>

<!-- dark table -->
<table class="table table-dark">
  ...
</table>

ویژگی هد جدول

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

هدر تیره
# اول آخر هندل
1 مارک اوتو @mdo
2 جیکوب ترون @fat
3 لری پرنده @twitter
هدر روشن
# اول آخر هندل
1 مارک اوتو @mdo
2 جیکوب ترون @fat
3 لری پرنده @twitter
<!-- thead-light -->
<table class="table">
  <thead class="table-light">...</thead>
</table>

<!-- thead-dark -->
<table class="table">
  <thead class="table-dark">...</thead>
</table>

ردیف راه راه

استفاده کنید .table-striped برای اضافه کردن راه راه به هر ردیف جدول در <tbody>.

# اول آخر هندل
1 مارک اوتو @mdo
2 جیکوب ترون @fat
3 لری پرنده @twitter
<!-- table-striped -->
<table class="table table-striped">
  ...
</table>

جدول خط دار

اضافه کردن .table-borderedبرای مرزها در هر طرف میز و سلول ها.

# اول آخر هندل
1 مارک اوتو @mdo
2 جیکوب ترون @fat
3 لری پرنده @twitter
<!-- table-bordered -->
<table class="table table-bordered">
  ...
</table>

جدول بدون خط

# اول آخر هندل
1 مارک اوتو @mdo
2 جیکوب ترون @fat
3 لری پرنده @twitter
<!-- table-borderless -->
<table class="table table-borderless">
  ...
</table>

جدول قابل هاور

اضافه کردن .table-hover برای فعال کردن یک هاور بر روی ردیف های جدول در یک<tbody>.

# اول آخر هندل
1 مارک اوتو @mdo
2 جیکوب ترون @fat
3 لری پرنده @twitter
<!-- table-hover -->
<table class="table table-hover">
  ...
</table>

جدول کوچک

اضافه کردن .table-smبرای ساخت جداول با برش سلولی به نصف کاهش می یابد.

# اول آخر هندل
1 مارک اوتو @mdo
2 جیکوب ترون @fat
3 لری پرنده @twitter
<!-- table-sm -->
<table class="table table-sm">
  ...
</table>

کلاس های متنی

از کلاسهای متنی به ردیف های جدول رنگ یا سلول های فردی استفاده کنید.

کلاس هدینگ هدینگ
فعال سلول سلول
پیشفرض سلول سلول
اصلی سلول سلول
ثانویه سلول سلول
موفقیت سلول سلول
خطر سلول سلول
هشدار سلول سلول
اطلاعات سلول سلول
روشن سلول سلول
تیره سلول سلول
هشدار سلول سلول
اطلاعات سلول سلول
روشن سلول سلول
تیره سلول سلول
تیره سلول سلول
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</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>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
</tr>

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
</tr>

کپشن

یک <caption> مانند یک عنوان برای یک جدول عمل می کند. این به کاربران دارای صفحه‌خوان کمک می‌کند تا جدولی را پیدا کنند و بفهمند درباره چیست و تصمیم بگیرند که آیا می‌خواهند آن را بخوانند یا خیر.

List of users
# اول آخر هندل
1 مارک اوتو @mdo
2 جیکوب ترون @fat
3 لری پرنده @twitter
<!-- caption -->
<table class="table">
  <caption>List of users</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

جدول رسپانسیو

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

# هدینگ هدینگ هدینگ هدینگ هدینگ هدینگ هدینگ هدینگ هدینگ
1 سلول سلول سلول سلول سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول سلول سلول سلول سلول
<!-- table-responsive -->
< class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
رنگ قالب
کاور تم