Skip to main content Skip to docs navigation
مشاهدة على الـ GitHub

الجداول (Tables)

مستندات وأمثلة لتنسيق الجداول الاختياري (نظراً لاستخدامها الواسع في الـ JavaScript plugins) مع الـ Bootstrap.

في هذه الصفحة

نظرة عامة

نظراً للاستخدام الواسع لعناصر <table> عبر الأدوات الخارجية مثل التقويمات ومنتقيات التاريخ، فإن جداول الـ Bootstrap هي اختيارية (opt-in). أضف الفئة الأساسية .table إلى أي عنصر <table>، ثم قم بتوسيعها باستخدام فئات التعديل الاختيارية أو الأنماط المخصصة. جميع أنماط الجداول لا يتم توريثها في الـ Bootstrap، مما يعني أن أي جداول متداخلة يمكن تنسيقها بشكل مستقل عن الجدول الأب.

باستخدام أبسط علامات الجدول، إليك كيف تبدو الجداول القائمة على .table في الـ Bootstrap.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

المتغيرات (Variants)

استخدم الفئات السياقية لتلوين الجداول، أو صفوف الجداول، أو الخلايا الفردية.

تنبيه! بسبب تعقيد الـ CSS المستخدم لإنشاء متغيرات الجداول لدينا، فمن المرجح أنها لن تشهد تنسيقاً تكيفياً مع وضع الألوان حتى الإصدار v6.

ClassHeadingHeading
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell
<!-- On tables -->
<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

<!-- On rows -->
<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-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

نصيحة حول إمكانية الوصول: استخدام اللون لإضافة معنى يوفر إشارة بصرية فقط، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة مثل قارئات الشاشة. يرجى التأكد من أن المعنى واضح من المحتوى نفسه (على سبيل المثال، النص المرئي مع كافٍ تباين الألوان) أو مدرج عبر وسائل بديلة، مثل نص إضافي مخفي باستخدام الفئة (class) .visually-hidden.

الجداول المميزة

الصفوف المخططة

استخدم .table-striped لإضافة تخطيط "زيبرا" (zebra-striping) إلى أي صف جدول داخل <tbody>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-striped">
  ...
</table>

الأعمدة المخططة

استخدم .table-striped-columns لإضافة تخطيط "زيبرا" إلى أي عمود جدول.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-striped-columns">
  ...
</table>

يمكن أيضاً إضافة هذه الفئات إلى متغيرات الجداول:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-striped">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-striped-columns">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-success table-striped">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-success table-striped-columns">
  ...
</table>

صفوف قابلة للتمرير/التحويم (Hoverable rows)

أضف .table-hover لتمكين حالة التحويم على صفوف الجدول داخل <tbody>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-hover">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-hover">
  ...
</table>

يمكن أيضاً دمج هذه الصفوف القابلة للتحويم مع متغير الصفوف المخططة:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-striped table-hover">
  ...
</table>

الجداول النشطة (Active tables)

قم بتمييز صف أو خلية في الجدول عن طريق إضافة الفئة .table-active.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>

كيف تعمل المتغيرات والجداول المميزة؟

بالنسبة للجداول المميزة (الصفوف المخططة، الأعمدة المخططة، الصفوف القابلة للتحويم، والجداول النشطة])، استخدمنا بعض التقنيات لجعل هذه التأثيرات تعمل مع جميع متغيرات الجداول لدينا:

  • نبدأ بتعيين خلفية خلية الجدول باستخدام الخاصية المخصصة --bs-table-bg. ثم تقوم جميع متغيرات الجداول بتعيين تلك الخاصية المخصصة لتلوين خلايا الجدول. بهذه الطريقة، لا نواجه مشاكل إذا تم استخدام ألوان شبه شفافة كخلفيات للجداول.
  • ثم نضيف ظل صندوق داخلي (inset box shadow) على خلايا الجدول باستخدام box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); ليكون طبقة فوق أي background-color محدد. وهو يستخدم التتالي المخصص (custom cascade) لتجاوز box-shadow، بغض النظر عن خصوصية الـ CSS. ولأننا نستخدم انتشاراً ضخماً وبدون تمويه، سيكون اللون موحداً. وبما أن --bs-table-accent-bg مضبوط على transparent افتراضياً، فليس لدينا ظل صندوق افتراضي.
  • عند إضافة أي من الفئات .table-striped، .table-striped-columns، .table-hover أو .table-active، يتم تعيين إما --bs-table-bg-type أو --bs-table-bg-state (المضبوط افتراضياً على initial) إلى لون شبه شفاف (--bs-table-striped-bg، --bs-table-active-bg أو --bs-table-hover-bg) لتلوين الخلفية وتجاوز --bs-table-accent-bg الافتراضي.
  • لكل متغير جدول، نقوم بإنشاء لون --bs-table-accent-bg بأعلى تباين بناءً على ذلك اللون. على سبيل المثال، لون التمييز لـ .table-primary يكون أغمق بينما تمتلك .table-dark لون تمييز أفتح.
  • يتم إنشاء ألوان النصوص والحدود بنفس الطريقة، ويتم توريث ألوانها افتراضياً.

خلف الكواليس، يبدو الأمر كما يلي:

scss/mixins/_table-variants.scss 
@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
    $table-border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$table-border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)}; // stylelint-disable-line scss/dollar-variable-no-missing-interpolation
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)}; // stylelint-disable-line scss/dollar-variable-no-missing-interpolation
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)}; // stylelint-disable-line scss/dollar-variable-no-missing-interpolation

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

حدود الجداول

الجداول ذات الحدود

أضف .table-bordered لوضع حدود على جميع جوانب الجدول والخلايا.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-bordered">
  ...
</table>

يمكن إضافة أدوات تلوين الحدود لتغيير الألوان:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-bordered border-primary">
  ...
</table>

الجداول بدون حدود

أضف .table-borderless لجدول بدون حدود.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-borderless">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-borderless">
  ...
</table>

الجداول الصغيرة

أضف .table-sm لجعل أي .table أكثر دمجاً عن طريق تقليل padding (الهامش الداخلي) لجميع الخلايا إلى النصف.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-sm">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-sm">
  ...
</table>

فواصل مجموعات الجداول

أضف حداً أكثر سمكاً وأغمق بين مجموعات الجدول—<thead>، <tbody>، و<tfoot>—باستخدام .table-group-divider. يمكنك تخصيص اللون عن طريق تغيير border-top-color (والذي لا نوفر له فئة أداة حالياً في الوقت الحالي).

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
html 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody class="table-group-divider">
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

المحاذاة العمودية

خلايا الجدول في <thead> تكون دائماً محاذاتهم عمودياً إلى الأسفل. أما خلايا الجدول في <tbody> فترث محاذاتها من <table> وتكون محاذاتهم إلى الأعلى افتراضياً. استخدم فئات المحاذاة العمودية لإعادة المحاذاة عند الحاجة.

Heading 1 Heading 2 Heading 3 Heading 4
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell is aligned to the top. This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. 
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

التداخل (Nesting)

أنماط الحدود، والأنماط النشطة، ومتغيرات الجداول لا يتم توريثها بواسطة الجداول المتداخلة.

# First Last Handle
1 Mark Otto @mdo
Header Header Header
A First Last
B First Last
C First Last
3 John Doe @social 
<table class="table table-striped table-bordered">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

كيف يعمل التداخل

لمنع تسرب أي أنماط إلى الجداول المتداخلة، نستخدم محدد دمج الأبناء (>) في الـ CSS الخاص بنا. وبما أننا نحتاج إلى استهداف جميع خلايا td و th في thead وtbody و tfoot، فإن محددنا سيبدو طويلاً جداً بدونه. وبناءً على ذلك، نستخدم المحدد الذي يبدو غريباً نوعاً ما .table > :not(caption) > * > * لاستهداف جميع خلايا td وth الخاصة بـ .table، ولكن ليس أي جداول متداخلة محتملة.

لاحظ أنه إذا أضفت <tr> كأبناء مباشرين لجدول، فإن تلك الـ <tr> سيتم تغليفها في <tbody> افتراضياً، مما يجعل محدداتنا تعمل كما هو مقصود.

التشريح (Anatomy)

رأس الجدول (Table head)

على غرار الجداول والجداول الداكنة، استخدم فئات التعديل .table-light أو .table-dark لجعل <thead> تظهر باللون الرمادي الفاتح أو الداكن.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

تذييل الجدول (Table foot)

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
Footer Footer Footer Footer 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

التسميات التوضيحية (Captions)

يعمل عنصر <caption> كعنوان للجدول. وهو يساعد المستخدمين الذين يستخدمون قارئات الشاشة في العثور على الجدول وفهم محتواه وتحديد ما إذا كانوا يريدون قراءته.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

يمكنك أيضاً وضع <caption> في أعلى الجدول باستخدام .caption-top.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
html 
<table class="table caption-top">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

جداول متوافقة مع الشاشات (Responsive tables)

تسمح الجداول المتوافقة مع الشاشات بتمرير الجداول أفقياً بسهولة. اجعل أي جدول متوافقاً مع الشاشات عبر جميع نوافذ العرض عن طريق تغليف .table بـ .table-responsive. أو اختر أقصى نقطة توقف (breakpoint) ليكون الجدول متوافقاً مع الشاشات حتى تلك النقطة باستخدام .table-responsive{-sm|-md|-lg|-xl|-xxl}.

القص/الاقتطاع العمودي

تستخدم الجداول المتوافقة مع الشاشات overflow-y: hidden، مما يؤدي إلى قص أي محتوى يتجاوز الحواف السفلية أو العلوية للجدول. وبشكل خاص، يمكن أن يؤدي ذلك إلى قص القوائم المنسدلة والأدوات الخارجية الأخرى.

متوافق مع الشاشات دائماً (Always responsive)

عبر كل نقطة توقف، استخدم .table-responsive للجداول التي يتم تمريرها أفقياً.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

نقاط توقف محددة (Breakpoint specific)

استخدم .table-responsive{-sm|-md|-lg|-xl|-xxl} حسب الحاجة لإنشاء جداول متوافقة مع الشاشات حتى نقطة توقف معينة. ومن تلك النقطة فصاعداً، سيتصرف الجدول بشكل طبيعي ولن يتم تمريره أفقياً.

قد تظهر هذه الجداول معطلة حتى يتم تطبيق أنماط التوافق مع الشاشات عند عرض نوافذ محددة.

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

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

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

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

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

الـ (CSS)

متغيرات الـ (Sass)

scss/_variables.scss 
$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 var(--#{$prefix}emphasis-color);
$table-bg:                    var(--#{$prefix}body-bg);
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor);

$table-border-factor:         .2;
$table-border-width:          var(--#{$prefix}border-width);
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         var(--#{$prefix}secondary-color);

$table-bg-scale:              -80%;

حلقات الـ (Sass loops)

scss/_variables.scss 
$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

تخصيص

  • تُستخدم متغيرات العامل ($table-striped-bg-factor، $table-active-bg-factor و$table-hover-bg-factor) لتحديد التباين في متغيرات الجداول.
  • باستثناء متغيرات الجداول الفاتحة والداكنة، يتم تفتيح ألوان السمة بواسطة متغير $table-bg-scale.