טבלאות 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>).
הצאצאים של הטבלה הם לפי הסדר:
- רכיב
<caption> <colgroup>רכיבים<thead>רכיבים<tbody>רכיבים<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>.
נוספו מאפיינים להוספת מרווח פנימי בין תאים ובתוך תאים, לגבולות וליישור טקסט. את המרווח בין השורות והתאים, המגדירים את הרווח בין התוכן של התא לבין הגבול שלו, ובין הגבולות של התאים הסמוכים, יש להגדיר באמצעות המאפיינים 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 שתי כותרות: 'שנה' ו'לו מיני' (Lu Mini). האגודה הזו מספרת לנו ש-"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="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), שבוחר את הצאצא השמיני של כל שורה, ידגיש את העמודה השמינית במלואה או ידגיש את העמודה השמינית במספר שורות, אבל בצורה חלקה של תאים 9 ו-10 שמוזגו, בהתאם לשורה או לעמודה שמוזגו.
לצערנו, רק כמה מאפיינים נתמכים, הסגנונות לא עוברים בירושה לתאים, והדרך היחידה להשתמש ברכיב <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. זה אולי נשמע מיותר, אבל מאפיין display ה-CSS יכול להשפיע על עץ הנגישות בדפדפנים מסוימים.
הצגת נתונים
לאלמנטים בטבלה יש משמעויות סמנטיות שמשמשות טכנולוגיות מסייעות כדי לנווט בין השורות והעמודות בלי 'לאבד' את עצמם. אין להשתמש ברכיב <table> להצגה. אם אתם צריכים כותרת מעל רשימה, השתמשו בכותרת וברשימה. כדי לפרוס את התוכן בעמודות רבות, צריך להשתמש בפריסה מרובת עמודות.
אם רוצים לפרוס את התוכן ברשת, אפשר להשתמש ברשת CSS. אפשר להשתמש בטבלה רק לנתונים. נסו לחשוב על זה כך: אם צריך להשתמש בגיליון אלקטרוני כדי להציג את הנתונים בפגישה, השתמשו ב-<table>.
אם תרצו להשתמש בתכונות הזמינות בתוכנות מצגות, כמו Keynote או PowerPoint, סביר להניח שתזדקקו לרשימת תיאורים.
בעוד שמיון עמודות בטבלה הוא תפיסה של JavaScript, סימון הכותרות שלך כדי שהמשתמשים ידעו שניתן למיין את העמודה.
צריך ליידע את המשתמשים שהעמודות בטבלה ניתנות למיון באמצעות איקונוגרפיה: סדר עולה, יורד או לא ממוין. העמודה שממוינת כרגע צריכה לכלול את המאפיין aria-sort עם הערך הרשום של כיוון המיון.
השדה <caption> יכול להכריז בצורה מנומסת על עדכונים לסדר המיון באמצעות aria-live, ועם טווח שמתעדכן באופן דינמי, וגלוי למשתמשים בקורא מסך. מאחר שניתן למיין את העמודה על ידי לחיצה על תוכן הכותרת, תוכן הכותרת צריך להיות <button>.
אם אתם לא מציגים נתונים בטבלאות, אל תשתמשו ב-<table>. אם בכל זאת משתמשים בטבלה למצגת, יש להגדיר את role="none".
מפתחים רבים משתמשים בטבלאות כדי לפרוס טפסים, אבל אין צורך לעשות זאת. אבל כן צריך לדעת על טופסי HTML, אז נעסוק בנושא הזה.
בחינת ההבנה
בחינת הידע שלך לגבי טבלאות.
איזה רכיב משמש לסימון תאים שהם כותרות?
<header><caption><th>איזה מידע סביר שמתאים לפריסה עם טבלה?
<dl>.<ul>.