טבלאות

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

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

רכיבי הטבלה, לפי הסדר

תג <table> עוטף את תוכן הטבלה, כולל כל רכיבי הטבלה. תפקיד ה-ARIA המרומז של <table> הוא table. אמצעי הטכנולוגיה המסייעת יודעים שהרכיב הזה הוא מבנה טבלה שמכיל נתונים שמסודרים בשורות ובעמודות. אם הטבלה שומרת על מצב הבחירה, כוללת ניווט דו-ממדי או מאפשרת למשתמש לשנות את סדר התאים, צריך להגדיר את role="grid". אם אפשר להרחיב ולכווץ את השורות של grid, צריך להשתמש במקום זאת ב-role="treegrid".

בתוך התג <table>, נמצאות כותרות הטבלה (<thead>), גופי הטבלה (<tbody>) וכותרות תחתונות של הטבלה (<tfoot>) (אופציונלי). כל אחד מהרכיבים האלה מורכב משורות בטבלה (<tr>). השורות מכילות תאים של כותרת הטבלה (<th>) ושל נתוני הטבלה (<td>), שמכילים את כל הנתונים. ב-DOM, לפני כל אלה, יכול להיות שתמצאו שתי תכונות נוספות: כיתוב הטבלה (<caption>) וקבוצות העמודות (<colgroup>). בהתאם לשאלה אם ל-<colgroup> יש מאפיין span או לא, הוא עשוי להכיל רכיבי עמודה מקוננים בטבלה (<col>).

הצאצאים של הטבלה הם, לפי הסדר:

1. רכיב <caption>
2. רכיבי <colgroup>
3. רכיבי <thead>
4. רכיבי <tbody>
5. רכיבי <tfoot>

נפרט על רכיבי הצאצא של <table>, שהם אופציונליים אבל מומלצים, ואז נסביר על שורות, תאים של כותרות טבלה ותאים של נתוני טבלה. הנושא <colgroup> יוסבר בסוף.

כיתוב הטבלה

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

האלמנט <caption> צריך להיות האלמנט הראשון שמוצב בתוך האלמנט <table>. הוספת תיאור מאפשרת לכל המשתמשים להבין מיד את מטרת הטבלה בלי לקרוא את הטקסט שמסביב. לחלופין, אפשר להשתמש ב-aria-label או ב-aria-labelledby ב-<table> כדי לספק שם נגיש ככיתוב. לרכיב <caption> אין מאפיינים ספציפיים לרכיב.

הכיתוב מופיע מחוץ לטבלה. אפשר להגדיר את המיקום של הכתוביות באמצעות מאפיין ה-CSS‏ caption-side. זו שיטה מומלצת יותר מאשר שימוש במאפיין align שיצא משימוש. כך אפשר להגדיר את הכתוביות בחלק העליון והתחתון. המיקום בצד ימין ובצד שמאל, עם inline-start ו-inline-end, עדיין לא נתמך באופן מלא. הדפדפן העליון הוא ברירת המחדל של המצגת.

מומלץ שלטבלאות הנתונים יהיו כותרות ברורות וכיתוב, והן צריכות להיות ברורות מספיק כדי להיות כמעט מובנות מאליהן. חשוב לזכור שלא לכל המשתמשים יש את אותן יכולות קוגניטיביות. אם הטבלה נועדה להעביר מסר מסוים או שנדרשת פרשנות כדי להבין אותה, צריך לספק סיכום קצר של הנקודה העיקרית או הפונקציה של הטבלה. המיקום של הסיכום תלוי באורך ובמורכבות שלו. אם הוא קצר, אפשר להשתמש בו כטקסט הפנימי של הכיתוב. אם הוא ארוך יותר, צריך לסכם אותו בכיתוב ולספק את הסיכום בפסקה שלפני הטבלה, ולשייך בין השניים באמצעות מאפיין aria-describedby. אפשרות נוספת היא להוסיף את הטבלה לתג <figure> ואת הסיכום לתג <figcaption>.

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

התוכן של הטבלאות מורכב משלושה חלקים לכל היותר: אפס כותרות טבלה (<thead>) או יותר, גופי טבלה (<tbody>) וכותרות תחתונות של טבלה (<tfoot>). כל החלקים הם אופציונליים, ואפשר להשתמש באפס או יותר מכל אחד מהם.

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

מה שיש לנו עד עכשיו:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

המיקום של הרכיב <tfoot> נקבע במקור מיד אחרי <thead> ולפני <tbody> מסיבות שקשורות לנגישות, ולכן יכול להיות שתיתקלו בסדר המקור הלא אינטואיטיבי הזה בבסיסי קוד מדור קודם.

תוכן הטבלה

אפשר לחלק טבלאות לכותרות עליונות, גופים וכותרות תחתונות, אבל אף אחד מהם לא עושה שום דבר אם הטבלאות לא מכילות שורות, תאים ותוכן. כל שורה בטבלה, <tr> מכילה תא אחד או יותר. אם התא הוא תא כותרת, משתמשים ב-<th>. אחרת, משתמשים ב-<td>.

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

היו מאפיינים להוספת ריווח בין התאים ובתוך התאים, למסגרות וליישור הטקסט. המאפיינים cellPadding ו-cellSpacing, שמגדירים את הרווח בין התוכן של תא לבין הגבול שלו, ובין הגבולות של תאים סמוכים, צריכים להיות מוגדרים באמצעות מאפייני ה-CSS‏ border-collapse ו-border-spacing, בהתאמה. למדיניות Border-spacing לא תהיה השפעה אם המדיניות border-collapse: collapse מוגדרת. אם מוגדר border-collapse: separate;, אפשר להסתיר לגמרי תאים ריקים באמצעות empty-cells: hide;. כדי לקבל מידע נוסף על עיצוב טבלאות, אפשר לעיין במצגת האינטראקטיבית הזו בנושא סגנונות CSS שקשורים לטבלאות.

בדוגמאות, הוספנו גבול לטבלה ולכל תא בנפרד באמצעות CSS כדי להבליט כמה מהתכונות:

בדוגמה הזו יש כיתוב, כותרת לטבלה וגוף הטבלה. הכותרת כוללת שורה אחת עם שלושה תאי כותרת <th>, וכך נוצרות שלוש עמודות. גוף הטבלה מכיל שלוש שורות של נתונים: התא הראשון הוא תא כותרת של השורה, ולכן משתמשים ב-<th> במקום ב-<td>.

לתא <th> יש משמעות סמנטית, עם תפקידי ARIA מרומזים של columnheader או rowheader. התג מגדיר את התא ככותרת של העמודה או השורה של תאי הטבלה, בהתאם לערך של מאפיין המנייה scope. אם המדיניות scope לא מוגדרת באופן מפורש, הדפדפן יפעל בהתאם לברירת המחדל col או row. השתמשנו בתגי עיצוב סמנטיים, ולכן לתא 1956 יש שתי כותרות: Year ו-Lou Minious. השיוך הזה אומר לנו ש-1956 היא שנת הסיום של לימודי התואר של Lou Minious. בדוגמה הזו, אפשר לראות את כל הטבלה, ולכן השיוך ברור. השימוש ב-<th> מספק את השיוך גם כששורת הכותרת או עמודת הכותרת לא מוצגות. יכולנו להגדיר במפורש את <th scope="col">Year</th> ואת <th scope="row">Lou Minious</th>, אבל בטבלה כזו, ערכי ברירת המחדל המפורטים עובדים. ערכים אחרים של scope כוללים את rowgroup ו-colgroup, שימושיים בטבלאות מורכבות.

מזג תאים

בדומה ל-MS Excel, ל-Google Sheets ול-Numbers, אפשר לצרף כמה תאים לתא אחד. אפשר לעשות את זה באמצעות מאפייני ה-HTML‏ colspan ו-rowspan:

• colspan ממזג שני תאים סמוכים או יותר בשורה אחת.
• ‫rowspan ממזג תאים בשורות כשמוסיפים אותו לתא בשורה הראשונה מבין השורות הממוזגות.

בדוגמה הזו, כותרת הטבלה מכילה שתי שורות. שורת הכותרת הראשונה מכילה שלושה תאים שמשתרעים על פני ארבע עמודות: התא האמצעי מכיל colspan="2". הפעולה הזו ממזגת שני תאים סמוכים. התאים הראשון והאחרון כוללים את rowspan="2". הפעולה הזו ממזגת את התא עם התא בשורה הסמוכה, ממש מתחתיו.

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

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

יכול להיות שלא היה צורך במאפיינים headers במקרה הזה, אבל חשוב לזכור אותם כי ככל שהטבלאות נעשות מורכבות יותר, כך גדל הסיכוי שתצטרכו להשתמש בהם. בטבלאות עם מבנים מורכבים, כמו טבלאות שבהן כותרות או תאים ממוזגים או עם יותר משתי רמות של כותרות עמודות או שורות, צריך לציין במפורש את תאי הכותרת המשויכים. בטבלאות מורכבות כאלה, צריך לשייך באופן מפורש כל תא נתונים לכל תא כותרת תואם באמצעות רשימה של ערכי id של כל הכותרות המשויכות, מופרדים ברווחים, כערך של מאפיין headers.

המאפיין headers נפוץ יותר ברכיבי <td>, אבל הוא תקף גם ברכיב <th>.

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

איך מעצבים טבלאות

יש שני רכיבים פחות מוכרים שהוזכרו בקצרה: קבוצת העמודות, <colgroup>, רכיב והצאצא היחיד שלו, רכיב העמודה הריק <col>. הרכיב <colgroup> משמש להגדרת קבוצות של עמודות, או רכיבי <col>, בתוך טבלה.

אם משתמשים בתיוג של קיבוץ עמודות, הוא צריך להיות מוטמע בתוך <table>, מייד אחרי <caption> ולפני נתוני הטבלה. אם הם משתרעים על יותר מעמודה אחת, צריך להשתמש במאפיין span.

סדר המתאר של תוכן בטבלה הוא בדרך כלל כפי שמופיע בהמשך, כאשר <table> ו-<caption> הם שני הרכיבים שצריך לכלול:

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

לתווים <colgroup> ו-<col> אין משמעות סמנטית, מה שיכול להשפיע על הנגישות של הטבלה. עם זאת, הם עוזרים לעצב עמודות באמצעות CSS, למשל להגדיר רוחב.

סגנונות קשורים של <td> ו-<th> מבטלים את הסגנונות של <col>. ב-CodePen, הגדרנו את התג colspan למיזוג חלק מהשורות בטבלה, אבל לא את כולן. אם בורר ה-CSS‏ nth-child מוחל על <tr>, יכול להיות שזה ישפיע על הסגנון, בהתאם לשורה או לעמודה שמוזגו.

לצערנו, יש תמיכה רק בכמה נכסים. הסגנונות לא עוברים בירושה לתאים, והדרך היחידה להגדיר תאים באמצעות <col> היא להשתמש בבורר מורכב, כמו :has() בורר יחסי.

אם גם ל-<table> וגם ל-<colgroup> יש צבע רקע, הצבע של background-color של <colgroup> יהיה מעל. סדר הציור הוא: טבלה, קבוצות עמודות, עמודות, קבוצות שורות, שורות, כאשר התאים מצוירים אחרונים ומעל, כפי שמוצג בסכימה של שכבות הטבלה. הרכיבים <td> ו-<th> הם לא צאצאים של הרכיבים <colgroup> או <col>, והם לא יורשים את הסגנון שלהם.

כדי להוסיף פסים לטבלה, כדאי להשתמש בסלקטורים מבניים של CSS. לדוגמה, tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} מוסיף שחור שקוף לכל שורה אי-זוגית בגוף הטבלה, ומאפשר לאפקטים של הרקע שמוגדרים ב-<colgroup> להופיע.

כברירת מחדל, טבלאות לא רספונסיביות. במקום זאת, כברירת מחדל, הגודל שלהם נקבע לפי התוכן שלהם. צריך לנקוט באמצעים נוספים כדי שסגנון הפריסה של הטבלה יפעל ביעילות במגוון מכשירים. אם משנים את מאפיין התצוגה ב-CSS של רכיבי טבלה, צריך לכלול מאפייני ARIA role. יכול להיות שזה נשמע מיותר, אבל המאפיין CSS display יכול להשפיע על עץ הנגישות בדפדפנים מסוימים.

הצגת נתונים

לרכיבי טבלה יש משמעויות סמנטיות שמשמשות טכנולוגיות מסייעות כדי לעזור למשתמשים לנווט בין השורות והעמודות, בלי ללכת לאיבוד. אין להשתמש ברכיב <table> להצגה. אם אתם צריכים כותרת מעל רשימה, משתמשים בכותרת וברשימה. אם רוצים להציג תוכן בכמה עמודות, משתמשים בפריסת עמודות. אם רוצים להציג תוכן בפריסה של רשת, צריך להשתמש ב-CSS grid.

השתמשו בטבלה רק לנתונים.

כדאי לחשוב על זה כך: אם הנתונים שלכם צריכים להיות בגיליון אלקטרוני כדי להציג אותם בפגישה, השתמשו ב-<table>. אם אתם רוצים להשתמש בתכונות שזמינות בתוכנות ליצירת מצגות, כמו Google Slides או PowerPoint, כנראה שתצטרכו רשימת תיאורים.

בקיצור: אם אתם לא מציגים נתונים בטבלה, אל תשתמשו ב-<table>. אם משתמשים בטבלה להצגה, מגדירים את role="none".

מפתחים רבים משתמשים בטבלאות כדי להגדיר את הפריסה של טפסים, אבל זה לא הכרחי. אתם צריכים לדעת על טופסי HTML.

בדיקת ההבנה

רוצים לבחון את הידע שלכם לגבי טבלאות?