טבלאות

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

אין לעשות שימוש בטבלאות לעימוד ויש לממש עיצוב גראפי בעזרת בלוקים כמו DIV ולמקם אותם בעזרת CSS. הסיבה לכך היא שקוראי מסך לבעלי לקויות ראיה מקריאים את התוכן לפי הסדר התאים בטבלה ולעיתים קרובות אין זה הסדר הלוגי כפי שהוא מוצג בעמוד.

השימוש בטבלה להצגת מידע בטורים ועמודות אפשרי ומומלץ בתנאי שנעשות כמה התאמות בקוד ה-HTML כדי להנגיש אותו לקוראי מסך:

  • חובה להוסיף תגית <caption> – בראש כל טבלה חייבת להופיע תגית caption מיד לאחר התגית הפותחת <table> ויש להציג בה תיאור קצר של תוכן הטבלה.
  • להקפיד על כותרות עמודות <th> – כותרות כל העמודות בטבלה חייבות להיות מוגדרות בתוך תגית <th> במקום <td> ולהכיל מאפיין scope. אם הכותרת מתייחסת לעמודה הערך של scope יהיה col ובמקרה של שורה הערך יהיה row.
<table>
    <caption>חברי סגל המכון</caption>
           <tr>
               <th scope="col">שם</th>
               <th scope="col">טלפון</th>
               <th scope="col">email</th>
           </tr>
           <tr>
               <td>משה כהן</td>
               <td>35554</td>
               <td>moshe@email.com</td>
           </tr>
           <tr>
               <td>דוד לוי</td>
               <td>99784</td>
               <td>david@email.com</td>
           </tr>
</table>

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

חברי סגל המכון
שם טלפון email
משה כהן 35554 moshe@email.com
דוד לוי 99784 david@email.com

 טבלאות בוורדפרס

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

Cell > Table cell properties > Cell type

בעלי אתרים שיתקשו לעשות זאת מוזמנים לפנות למוקד התמיכה שלנו לקבלת עזרה.

תוסף הטבלאות TablePress – לייצור טבלאות מונגשות

התוסף ליצירת טבלאות מורכבות TablePress המותקן במערכות וורדפרס הטכניוניות הותאם על-ידי המדור לבניית אתרים לייצר טבלאות מונגשות באופן אוטומטי. בממשק הבנייה של הטבלה יש להקפיד להכניס תיאור של הטבלה, ולכל היתר ידאג התוסף, כולל הגדרת התאים בשורה העליונה של הטבלה כתאי header עם התגית <th> והוספת התכונה scope=col לכל אחד מהם.

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

TablePress setup

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

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