Source

טבלאות

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

דוגמאות

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

באמצעות סימון הטבלה הבסיסי ביותר, כך .tableנראות טבלאות מבוססות ב-Bootstrap. כל סגנונות הטבלה עוברים בירושה ב-Bootstrap 4 , כלומר כל טבלאות מקוננות יעוצב באותו אופן כמו האב.

# ראשון אחרון ידית
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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

אתה יכול גם להפוך את הצבעים - עם טקסט בהיר על רקע כהה - עם .table-dark.

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

אפשרויות ראש שולחן

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

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר 
<table class="table">
  <thead class="thead-dark">
    <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 class="table">
  <thead class="thead-light">
    <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-stripedכדי להוסיף פסי זברה לכל שורת טבלה בתוך ה- <tbody>.

# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר 
<table class="table table-striped">
  <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>
# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר 
<table class="table table-striped table-dark">
  <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-borderedעבור גבולות בכל צידי הטבלה והתאים.

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

שולחן ללא שוליים

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

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

.table-borderlessיכול לשמש גם על שולחנות כהים.

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

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

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

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

שולחן קטן

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

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

  <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>

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

# כּוֹתֶרֶת כּוֹתֶרֶת
1 תָא תָא
2 תָא תָא
3 תָא תָא
4 תָא תָא
5 תָא תָא
6 תָא תָא
7 תָא תָא
8 תָא תָא
9 תָא תָא 
<!-- 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>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
העברת משמעות לטכנולוגיות מסייעות

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

צור טבלאות רספונסיביות על ידי עטיפה של כל טבלאות .tableעם .table-responsive{-sm|-md|-lg|-xl}, מה שגורם לטבלה לגלול אופקית בכל max-widthנקודת שבירה של עד (אך לא כולל) 576px, 768px, 992px ו-1120px, בהתאמה.

שים לב שמכיוון שדפדפנים אינם תומכים כרגע בשאילתות הקשר של טווח , אנו עוקפים את המגבלות של הקידומות min-ויציאותmax- התצוגה עם רוחב חלקי (שיכול להתרחש בתנאים מסוימים במכשירים בעלי dpi גבוה, למשל) על ידי שימוש בערכים עם דיוק גבוה יותר עבור השוואות אלה .

כתוביות

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

רשימת משתמשים
# ראשון אחרון ידית
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר 
<table class="table">
  <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}.

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

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

תמיד מגיב

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

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

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

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

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

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