טבלאות

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

בקטע הזה נדון בכל הרכיבים שמרכיבים את הטבלה, וגם בכמה תכונות של נגישות ונוחות שימוש שכדאי להביא בחשבון כשמציגים נתונים בטבלאות. קורס 'לימוד HTML' לא עוסק ב-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>). כל הקטעים אופציונליים, וניתן להוסיף אפס או יותר קטעים מכל סוג.

הרכיבים האלה לא עוזרים או מפריעים לנגישות של הטבלה, אבל הם שימושיים מבחינת נוחות השימוש. הם מספקים ווקים לעיצוב. לדוגמה, תוכן הכותרת יכול להיות 'דבוק', ואילו תוכן <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, שמגדירים את המרחק בין התוכן של התא לבין המסגרת שלו, ואת המרחק בין המסגרות של תאים סמוכים, באמצעות המאפיינים border-collapse ו-border-spacing ב-CSS, בהתאמה. ל-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 יש שתי כותרות: 'שנה' ו'לו מיניו'. השיוך הזה מראה ש-1956 הוא 'השנה' שבה סיים את הלימודים 'לו מיניו'. בדוגמה הזו, מכיוון שאנחנו רואים את הטבלה כולה, השיוך גלוי לעין. השימוש ב-<th> מאפשר ליצור את השיוך גם כשהעמודה או השורה של הכותרת לא מוצגות בגלל גלילה. אפשר היה להגדיר את <th scope="col">Year</th> ו-<th scope="row">Lou Minious</th> באופן מפורש, אבל בטבלה פשוטה כמו זו, ערכי ברירת המחדל המפורטים פועלים. ערכים אחרים של scope כוללים את rowgroup ואת colgroup, שהם שימושיים בטבלאות מורכבות.

מיזוג תאים

בדומה ל-MS Excel, ל-Google Sheets ול-Numbers, אפשר למזג כמה תאים לתא אחד. זה נעשה באמצעות HTML. המאפיין 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.

סגנונות <col> יעניקו לעמודה סגנון כל עוד אין סגנונות <td> או <th> שמבטלים את הסגנון הזה. לדוגמה, כשמשתמשים ב-<colspan> כדי למזג תאים בשורות מסוימות בטבלה, אבל לא בכל השורות, אי אפשר להיות בטוחים שבוחר כמו tr > *:nth-child(8), שבוחר את הצאצא השמיני של כל שורה, ידגיש את העמודה השמינית במלואה או ידגיש את העמודה השמינית בכמה שורות, אבל עם קצת תאים מהעמודה התשיעית והעשירית, בהתאם לתאים בשורה או בעמודה שמולאו.

לצערנו, יש תמיכה רק במספר מצומצם של מאפיינים, הסגנונות לא עוברים בירושה לתאים והדרך היחידה להשתמש ברכיב <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>. אם אתם רוצים להשתמש בתכונות שזמינות בתוכנות להצגת מצגות כמו Keynote או PowerPoint, סביר להניח שתצטרכו רשימת תיאורים.

אם לא מציגים נתונים בטבלה, אין להשתמש ב-<table>. אם אתם משתמשים בטבלה לשיתוף המסך, צריך להגדיר את הערך role="none".

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

בדיקת ההבנה

בודקים את הידע שלכם לגבי טבלאות.