דלג לתוכן הראשי דלג לניווט במסמכים
in English

טבלאות

תיעוד ודוגמאות לסגנון הסכמה של טבלאות (בהתחשב בשימושן הנפוץ בתוספים של JavaScript) עם Bootstrap.

סקירה כללית

בשל השימוש הנרחב <table>באלמנטים בווידג'טים של צד שלישי כמו לוחות שנה ובוחרי תאריכים, הטבלאות של Bootstrap ניתנות להצטרפות . הוסף את מחלקת הבסיס .tableלכל <table>, ולאחר מכן הרחב עם מחלקות השינוי האופציונליות שלנו או סגנונות מותאמים אישית. כל סגנונות הטבלה אינם עוברים בירושה ב-Bootstrap, כלומר ניתן לעצב כל טבלאות מקוננות באופן עצמאי מהאב.

באמצעות סימון הטבלה הבסיסי ביותר, כך .tableנראות טבלאות מבוססות ב-Bootstrap.

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

גרסאות

השתמש במחלקות הקשריות כדי לצבוע טבלאות, שורות טבלה או תאים בודדים.

מעמד כּוֹתֶרֶת כּוֹתֶרֶת
בְּרִירַת מֶחדָל תָא תָא
יְסוֹדִי תָא תָא
מִשׁנִי תָא תָא
הַצלָחָה תָא תָא
סַכָּנָה תָא תָא
אַזהָרָה תָא תָא
מידע תָא תָא
אוֹר תָא תָא
אפל תָא תָא
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="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>
העברת משמעות לטכנולוגיות מסייעות

שימוש בצבע להוספת משמעות מספק רק אינדיקציה ויזואלית, שלא תועבר למשתמשים בטכנולוגיות מסייעות - כמו קוראי מסך. ודא שהמידע המסומן בצבע ברור מהתוכן עצמו (למשל הטקסט הגלוי), או כלול באמצעים חלופיים, כגון טקסט נוסף מוסתר .visually-hiddenבכיתה.

שולחנות מודגשים

שורות פסים

השתמש .table-stripedכדי להוסיף פסי זברה לכל שורת טבלה בתוך ה- <tbody>.

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-striped">
  ...
</table>

ניתן להוסיף מחלקות אלו גם לגרסאות הטבלה:

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-dark table-striped">
  ...
</table>
# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-success table-striped">
  ...
</table>

שורות שניתן לרחף

הוסף .table-hoverכדי לאפשר מצב ריחוף בשורות טבלה בתוך <tbody>.

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-hover">
  ...
</table>
# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-dark table-hover">
  ...
</table>

ניתן לשלב את השורות הניתנות לרחף עם גרסת הפסים:

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-striped table-hover">
  ...
</table>

שולחנות פעילים

סמן שורה או תא בטבלה על ידי הוספת .table-activeמחלקה.

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

כיצד פועלות הגרסאות והטבלאות המודגשות?

עבור הטבלאות המודגשות ( שורות פסים , שורות שניתן לרחף וטבלאות פעילות ), השתמשנו בכמה טכניקות כדי לגרום לאפקטים האלה לעבוד עבור כל גרסאות הטבלה שלנו :

  • אנו מתחילים בהגדרת הרקע של תא טבלה עם --bs-table-bgהמאפיין המותאם אישית. לאחר מכן כל גרסאות הטבלה הגדירו את המאפיין המותאם אישית הזה כדי לצבוע את תאי הטבלה. בדרך זו, אנחנו לא נכנסים לצרות אם משתמשים בצבעים חצי שקופים כרקע שולחן.
  • לאחר מכן אנו מוסיפים צל של תיבה מוכנסת על תאי הטבלה עם box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);שכבה על גבי כל שצוין background-color. מכיוון שאנו משתמשים בממרח ענק וללא טשטוש, הצבע יהיה מונוטוני. מכיוון --bs-table-accent-bgשאינו מוגדר כברירת מחדל, אין לנו צל תיבה ברירת מחדל.
  • כאשר מוסיפים .table-striped, .table-hoverאו .table-activeמחלקות, --bs-table-accent-bgההגדרה מוגדרת לצבע שקוף למחצה כדי לצבוע את הרקע.
  • עבור כל וריאנט טבלה, אנו יוצרים --bs-table-accent-bgצבע עם הניגודיות הגבוהה ביותר בהתאם לצבע זה. לדוגמה, צבע המבטא עבור .table-primaryכהה יותר בעוד .table-darkשיש לו צבע מבטא בהיר יותר.
  • צבעי טקסט וגבול נוצרים באותו אופן, והצבעים שלהם עוברים בירושה כברירת מחדל.

מאחורי הקלעים זה נראה כך:

@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));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

גבולות שולחן

שולחנות עם גבול

הוסף .table-borderedעבור גבולות בכל צידי הטבלה והתאים.

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-bordered">
  ...
</table>

ניתן להוסיף כלי עזר לצבע גבול כדי לשנות צבעים:

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-bordered border-primary">
  ...
</table>

שולחנות ללא גבולות

הוסף .table-borderlessלשולחן ללא גבולות.

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-borderless">
  ...
</table>
# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-dark table-borderless">
  ...
</table>

שולחנות קטנים

הוסף .table-smכדי להפוך .tableעוד יותר קומפקטי על ידי חיתוך כל התא paddingלשניים.

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-sm">
  ...
</table>
# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-dark table-sm">
  ...
</table>

יישור אנכי

תאי טבלה של <thead>תמיד מיושרים אנכיים לתחתית. תאי טבלה <tbody>יורשים את היישור שלהם מהחלק <table>העליון ומיושרים לחלק העליון כברירת מחדל. השתמש במחלקות היישור האנכי כדי ליישר מחדש היכן שצריך.

מכוון ל 1 כותרת 2 כותרת 3 כותרת 4
תא זה יורש vertical-align: middle;מהטבלה תא זה יורש vertical-align: middle;מהטבלה תא זה יורש vertical-align: middle;מהטבלה זהו טקסט מציין מיקום כלשהו, ​​שנועד לתפוס לא מעט מקום אנכי, כדי להדגים כיצד היישור האנכי פועל בתאים הקודמים.
תא זה יורש vertical-align: bottom;משורת הטבלה תא זה יורש vertical-align: bottom;משורת הטבלה תא זה יורש vertical-align: bottom;משורת הטבלה זהו טקסט מציין מיקום כלשהו, ​​שנועד לתפוס לא מעט מקום אנכי, כדי להדגים כיצד היישור האנכי פועל בתאים הקודמים.
תא זה יורש vertical-align: middle;מהטבלה תא זה יורש vertical-align: middle;מהטבלה תא זה מיושר לחלק העליון. זהו טקסט מציין מיקום כלשהו, ​​שנועד לתפוס לא מעט מקום אנכי, כדי להדגים כיצד היישור האנכי פועל בתאים הקודמים.
<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>

קינון

סגנונות גבול, סגנונות פעילים וגרסאות טבלה אינם עוברים בירושה על ידי טבלאות מקוננות.

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת
א ראשון אחרון
ב ראשון אחרון
ג ראשון אחרון
3 לארי הציפור @טוויטר
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

איך עובד קינון

כדי למנוע דליפה של סגנונות כלשהם לטבלאות מקוננות, אנו משתמשים >בבורר ה-child combinator ( ) ב-CSS שלנו. מכיוון שאנו צריכים למקד את כל ה- tds וה- ths ב- thead, tbody, ו- tfoot, הבורר שלנו ייראה די ארוך בלעדיו. ככזה, אנו משתמשים .table > :not(caption) > * > *בבורר המוזר למדי כדי למקד לכל tdה-ו- ths של ה- .table, אך אף לא אחת מהטבלאות המקוננות הפוטנציאליות.

שים לב שאם אתה מוסיף <tr>s בתור ילדים ישירים של טבלה, אלה <tr>יהיו עטופים ב-a <tbody>כברירת מחדל, ובכך יגרום לבוררים שלנו לעבוד כמתוכנן.

אֲנָטוֹמִיָה

ראש שולחן

בדומה לטבלאות ולטבלאות כהות, השתמש במחלקות השינוי .table-lightאו .table-darkכדי לגרום ל- <thead>s להיראות בהיר או אפור כהה.

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

רגל שולחן

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
כותרת תחתונה כותרת תחתונה כותרת תחתונה כותרת תחתונה
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

כתוביות

A <caption>מתפקד כמו כותרת לטבלה. זה עוזר למשתמשים עם קוראי מסך למצוא טבלה ולהבין במה מדובר ולהחליט אם הם רוצים לקרוא אותה.

רשימת משתמשים
# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

אתה יכול גם לשים את <caption>החלק העליון של הטבלה עם .caption-top.

רשימת משתמשים
# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

טבלאות רספונסיביות

טבלאות רספונסיביות מאפשרות גלילה אופקית של טבלאות בקלות. הפוך כל שולחן למגיב בכל יציאות התצוגה על ידי גלישת א .tableעם .table-responsive. לחלופין, בחר נקודת עצירה מקסימלית שאיתה יש טבלה רספונסיבית באמצעות .table-responsive{-sm|-md|-lg|-xl|-xxl}.

גזירה/קטיעה אנכית

טבלאות רספונסיביות עושות שימוש ב- overflow-y: hidden, אשר חותך כל תוכן שחורג מהקצוות התחתונים או העליונים של הטבלה. בפרט, זה יכול לחתוך תפריטים נפתחים ווידג'טים אחרים של צד שלישי.

תמיד מגיב

על פני כל נקודת שבירה, השתמש .table-responsiveלגלילה אופקית של טבלאות.

# כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת
1 תָא תָא תָא תָא תָא תָא תָא תָא תָא
2 תָא תָא תָא תָא תָא תָא תָא תָא תָא
3 תָא תָא תָא תָא תָא תָא תָא תָא תָא
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

נקודת שבירה ספציפית

השתמש .table-responsive{-sm|-md|-lg|-xl|-xxl}לפי הצורך כדי ליצור טבלאות רספונסיביות עד לנקודת שבירה מסוימת. מנקודת השבירה הזו ומעלה, הטבלה תתנהג כרגיל ולא תגלול אופקית.

טבלאות אלה עשויות להיראות שבורות עד שהסגנונות הרספונסיביים שלהן יחולו ברוחב נקודת מבט ספציפי.

# כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת
1 תָא תָא תָא תָא תָא תָא תָא תָא
2 תָא תָא תָא תָא תָא תָא תָא תָא
3 תָא תָא תָא תָא תָא תָא תָא תָא
# כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת
1 תָא תָא תָא תָא תָא תָא תָא תָא
2 תָא תָא תָא תָא תָא תָא תָא תָא
3 תָא תָא תָא תָא תָא תָא תָא תָא
# כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת
1 תָא תָא תָא תָא תָא תָא תָא תָא
2 תָא תָא תָא תָא תָא תָא תָא תָא
3 תָא תָא תָא תָא תָא תָא תָא תָא
# כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת
1 תָא תָא תָא תָא תָא תָא תָא תָא
2 תָא תָא תָא תָא תָא תָא תָא תָא
3 תָא תָא תָא תָא תָא תָא תָא תָא
# כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת
1 תָא תָא תָא תָא תָא תָא תָא תָא
2 תָא תָא תָא תָא תָא תָא תָא תָא
3 תָא תָא תָא תָא תָא תָא תָא תָא
# כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת כּוֹתֶרֶת
1 תָא תָא תָא תָא תָא תָא תָא תָא
2 תָא תָא תָא תָא תָא תָא תָא תָא
3 תָא תָא תָא תָא תָא תָא תָא תָא
<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>

סאס

משתנים

$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:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

לוּלָאָה

$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-levelהמשתנה.