טבלאות

טבלאות 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>). כל האפשרויות הן אופציונליות, כאשר אפס או יותר נתמכות.

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

היו מאפיינים להוספת מרווח פנימי בין תאים ובתוך תאים, לגבולות וליישור טקסט. מרווח פנימי בין תאים ומרווח בין תאים, המגדיר את הרווח בין תוכן התא לגבול שלו, ובין גבולות של תאים סמוכים, עם הערכים כיווץ גבולות ו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 כולל שתי כותרות: Year ו-Lou Minious. לפי השיוך הזה אנחנו יודעים ש-"1956" האם הערך 'year' של סיום הלימודים ל"לו מיני". בדוגמה הזו, ניתן לראות את הטבלה כולה, באופן חזותי. שימוש ב-<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 לרכיבי טבלה, כולל מאפייני role של ARIA. אמנם זה אולי נשמע מיותר, אבל מאפיין display של CSS יכול להשפיע על עץ הנגישות בחלק מהדפדפנים.

הצגת נתונים

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

בעוד שמיון עמודות בטבלה הוא תחום ה-JavaScript, סימון הכותרות כדי ליידע את המשתמשים שאפשר למיין את העמודה הוא תחום ה-HTML. חשוב ליידע את המשתמשים שאפשר למיין את עמודות הטבלה באמצעות איקונוגרפיה שמציגה סדר עולה, יורד או לא ממוינת. העמודה שממוינת כרגע כוללים את המאפיין aria-sort עם הערך המספור של כיוון המיון. <caption> יכול להודיע בצ'אט על עדכונים בקשר לסדר המיון באמצעות ARIA טווח שמתעדכן באופן דינמי, וגלוי למשתמשים בקורא מסך. ניתן למיין את העמודה באמצעות לחיצה על תוכן הכותרת, ולכן תוכן הכותרת צריך להיות <button>.

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

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

בדיקת ההבנה

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