HTML/טבלאות/תגים מתקדמים

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

th - תא שהוא כותרת

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

דוגמה:

<table border="1">
  <tr> 
    <th> כותרת 1 </th>
    <th> כותרת 2 </th> 
  </tr>
  <tr> 
    <td> פריט 1 </td>
    <td> פריט 2 </td>
  </tr>
  <tr> 
    <td> פריט 1 </td>
    <td> פריט 2 </td>
  </tr>
</table>

כותרת 1	כותרת 2
פריט 1	פריט 2
פריט 1	פריט 2

כותרת טבלה

ניקח טבלה פשוטה של עיר וארנונה למ"ר.

דוגמה:

<table border="1">
  <tr>     <th> עיר </th>         <th> ארנונה למ"ר </th>    </tr>
  <tr>     <td> ירושלים </td>     <td> 1000 ש"ח </td>       </tr>
  <tr>     <td> תל-אביב </td>     <td> 2000 ש"ח </td>       </tr>
  <tr>     <td> חיפה </td>        <td> 500 ש"ח </td>        </tr>
</table>

חשוב לציין עבור המשתמשים הלא-ויזואליים מהי כותרת הטבלה, ומה אמור להבין המשתמש שמביט בה.

את כותרת הטבלה נציין בעזרת האלמנט caption.

אלמנט caption אם בוחרים להשתמש בו, חייב להיות האלמנט הראשון בתוכן של אלמנט table, ואסור לו להופיע יותר מפעם אחת בכל אלמנט table!

בתוך caption ניתן להכניס טקסט ולעצב אותו בעזרת אלמנטים מסוג שורה. ה-caption יופיע מעל לטבלה בתור הכותרת שלה.

דוגמה:

<table border="1">
  <caption> השוואה בין עלויות הארנונה בערים הגדולות </caption>
  <tr>     <th> עיר </th>         <th> ארנונה למ"ר </th>    </tr>
  <tr>     <td> ירושלים </td>     <td> 1000 ש"ח </td>       </tr>
  <tr>     <td> תל-אביב </td>     <td> 2000 ש"ח </td>       </tr>
  <tr>     <td> חיפה </td>        <td> 500 ש"ח </td>        </tr>
</table>

• שימו לב שוב לכך שאלמנט caption הוא הראשון בתוך table!

השוואה בין עלויות הארנונה בערים הגדולות

עיר	ארנונה למ"ר
ירושלים	1000 ש"ח
תל-אביב	2000 ש"ח
חיפה	500 ש"ח

• שימו לב כיצד הדפדפן מתאים את הכותרת שלנו לרוחב הטבלה! הוא יכול לעשות זאת מכיוון שבעזרת caption הוא מבין שזוהי כותרת טבלה!

תקציר הטבלה

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

ניקח את הדוגמה הקודמת:

<table border="1" summary="מבין שלוש הערים הגדולות תל-אביב היקרה ביותר וחיפה הזולה ביותר.">
  <caption> השוואה בין עלויות הארנונה בערים הגדולות </caption>
  <tr>     <th> עיר </th>         <th> ארנונה למ"ר </th>    </tr>
  <tr>     <td> ירושלים </td>     <td> 1000 ש"ח </td>       </tr>
  <tr>     <td> תל-אביב </td>     <td> 2000 ש"ח </td>       </tr>
  <tr>     <td> חיפה </td>        <td> 500 ש"ח </td>        </tr>
</table>

השוואה בין עלויות הארנונה בערים הגדולות

עיר	ארנונה למ"ר
ירושלים	1000 ש"ח
תל-אביב	2000 ש"ח
חיפה	500 ש"ח

• אין הבדל בפלט, אך אילו הייתם משתמשים בדפדפן מקריא, הייתם שמים לב להבדל.

שורה ראשית ושורה תחתית

לעתים נרצה שהשורות הראשונות/אחרונות בטבלה יהיו נראות כל הזמן. נניח שהטבלה שלנו גדולה מאוד, ואנו רוצים להציג את כותרות הטבלה כך שהמשתמש תמיד יראה אותן. בנוסף, נניח שהמשתמש רוצה להדפיס את הטבלה, שמשתרעת על פני מספר דפים, ואנו נרצה ששורות מסוימות יופיעו בתחילת ובסוף כל דף מודפס. לשם כך נלמד שלושה אלמנטים חדשים: thead, tfoot ו- tbody.

thead מקבץ מספר שורות להיות השורות הראשיות של הטבלה, והן אמורות להופיע בראש כל דף בהדפסה. נכון לשים בו את כותרות העמודות.

thead אם הוא מופיע, חייב להופיע אחרי caption (אם caption מופיע...) ולפני tfoot, tbody ו- tr. מותר לו להופיע פעם אחת בלבד או בכלל לא.

בתוך thead נשים שורה (tr) אחת לפחות(!) ושורות אלו יהיו השורות הראשיות.

<thead>
  <tr>     
    <th> עיר </th>         
    <th> ארנונה למ"ר </th>    
  </tr>
</thead>

• חובה לשים בתוך thead שורה (tr) אחת לפחות, וניתן לשים יותר מאחת.

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

tfoot אם הוא מופיע, חייב להופיע אחרי thead (אם thead מופיע...) ולפני tbody ו- tr. מותר לו להופיע פעם אחת בלבד או בכלל לא.

בתוך tfoot נשים שורה (tr) אחת לפחות(!) ושורות אלו יהיו השורות התחתיות.

<tfoot>     
  <tr> <th> חיפה חיפה עיר עם תחתית </th> </tr>
</tfoot>

• חובה לשים בתוך tfoot שורה (tr) אחת לפחות, וניתן לשים יותר מאחת.

tbody מעיד על גוף הטבלה. רצוי להשתמש בו אם משתמשים ב-thead או ב-tfoot, וניתן להשתמש בכמה ממנו וכך ליצור חלוקת תוכן בין שורות בטבלה (למשל, ערים גדולות ב-tbody ראשון, וערים קטנות ב-tbody שני).

tbody אם הוא מופיע, חייב להופיע בחלק התוכן האחרון של table, יחד עם tr ואחרי caption, thead או tfoot אם מי מהם מופיע. מותר לו להופיע כל מספר של פעמים, או בכלל לא.

בתוך tbody נשים שורה (tr) אחת לפחות(!) ושורות אלו יהיו גוף הטבלה.

שימוש חשוב נוסף של tbody הוא קיבוץ מספר שורות יחד בשביל תסריטי Javascript ו-סגנונות CSS. על ידי שימוש במאפיינים id ו- class

<tbody>
  <tr>     <td> ירושלים </td>     <td> 1000 ש"ח </td>       </tr>
  <tr>     <td> תל-אביב </td>     <td> 2000 ש"ח </td>       </tr>
  <tr>     <td> חיפה </td>        <td> 500 ש"ח </td>        </tr>       
</tbody>

<tbody>
  <tr>     <td> קרית מוצקין </td>     <td> 400 ש"ח </td>       </tr>
  <tr>     <td> קרית ים </td>         <td> 200 ש"ח </td>       </tr>
  <tr>     <td> קרית ביאליק </td>     <td> 300 ש"ח </td>       </tr>       
</tbody>

• חובה לשים בתוך tbody שורה (tr) אחת לפחות, וניתן לשים יותר מאחת.

דוגמה:

<table border="1" summary="מבין שלושת הערים הגדולות תל-אביב היקרה ביותר וחיפה הזולה ביותר.">
  <caption> השוואה בין עלויות הארנונה בערים הגדולות </caption>
  <thead>
    <tr>     
      <th> עיר </th>         
      <th> ארנונה למ"ר </th>    
    </tr>
  </thead>
  <tfoot>     
    <tr> <th colspan="2"> חיפה חיפה עיר עם תחתית </th> </tr>
    <tr> <th colspan="2"> קרית ים - הזולה מבין הקריות </th> </tr>
  </tfoot>
  <tbody>
    <tr>     <td> ירושלים </td>     <td> 1000 ש"ח </td>       </tr>
    <tr>     <td> תל-אביב </td>     <td> 2000 ש"ח </td>       </tr>
    <tr>     <td> חיפה </td>        <td> 500 ש"ח </td>        </tr>       
  </tbody>
  <tbody>
    <tr>     <td> קרית מוצקין </td>     <td> 400 ש"ח </td>       </tr>
    <tr>     <td> קרית ים </td>         <td> 200 ש"ח </td>       </tr>
    <tr>     <td> קרית ביאליק </td>     <td> 300 ש"ח </td>       </tr>       
  </tbody>
</table>

פלט:

השוואה בין עלויות הארנונה בערים הגדולות

עיר	ארנונה למ"ר
ירושלים	1000 ש"ח
תל-אביב	2000 ש"ח
חיפה	500 ש"ח
קרית מוצקין	400 ש"ח
קרית ים	200 ש"ח
קרית ביאליק	300 ש"ח
חיפה חיפה עיר עם תחתית
קרית ים - הזולה מבין הקריות

קיבוץ עמודות

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

colgroup מגדיר קבוצה של עמודות. קבוצה זו, גודלה יכול להיות עמודה אחת בלבד או כל מספר של עמודות. את מספר העמודות שהוא תקף לגביהן נגדיר עם המאפיין span. ניתן לתת ל-colgroup את המאפיין id או class לשם שימוש ב-javascript או ב-CSS, או מאפייני יישור (align ו- valign) והם יהיו תקפים לכל העמודות בקבוצה.

<colgroup span="3" align="center"></colgroup> <!--קבוצה לשלושת העמודות הראשונות שמשנה בהן את המרכוז --> 

לאחר אלמנט ה-colgroup נכתוב את הטבלה כרגיל, וכל התאים בשלושת העמודות הראשונות ייושרו למרכז. אם נרצה למרכז דווקא את העמודות 3-5 ניצור קבוצה שמשתרעת על 2 עמודות ואחריה את הקבוצה שיצרנו עכשיו:

<colgroup span="2"></colgroup> <!-- קבוצה לשתי העמודות הראשונות שלא עושה כלום, כי אין לה מאפיינים-->
<colgroup span="3" align="center"></colgroup> <!--קבוצה לשלושת העמודות הבאות שמשנה בהן את המרכוז -->

האלמנט col זהה לחלוטין לאלמנט colgroup. ההבדל הוא שמותר לו להיות בן של table וגם בן של colgroup. כך ניתן ליצור תת-קבוצה של עמודות בתוך colgroup.

<colgroup span="2"></colgroup> 
<colgroup align="center">
  <col span="3" valign="bottom"></col>
  <col valign="middle"></col>
  <col valign="top"></col>
</colgroup> 

• ל-colgroup אסור שיהיו בנים אחרים מלבד col.
• col הוא תמיד אלמנט ריק, ואף על פי כן יש לרשום אותו בעזרת שני תגים: פותח וסוגר.
• כאשר ל-colgroup יש בנים מסוג col, הדפדפן אמור להתעלם ממאפיין ה-span שלו

ננתח את הדוגמה האחרונה:

• אלמנט ה-colgroup הראשון מקבץ את שתי העמודות הראשונות, אך לא מחיל עליהן שום מאפיין. הוא משמש כדי לדלג על שתי העמודות הראשונות.
• אלמנט ה-colgroup השני מגדיר יישור אופקי מרכזי (center) לכל העמודות שבתוכו שהן:
  • שלושת העמודות הבאות (3-5) שיישורו אנכית לתחתית (bottom).
  • עמודה 6 שתיושר אנכית למרכז (middle).
  • עמודה 7 שתיושר אנכית לראש תא (top).

ניתן להסתכל על tbody בתור סוג של colgroup (רק ללא המאפיין span). בעזרתו ניתן לקבץ כמה שורות ביחד ולהחיל עליהן סגנונות ותסריטים.

דוגמה בתוך טבלה:

<table border="1" width="60%">
  <caption>
    דוגמה לשימוש ב-
    <b>colgroup</b> ו- <b>col</b>
    בטבלאות.
  </caption>
  <colgroup span="2"></colgroup> 
  <colgroup align="center">
    <col span="3" valign="bottom"></col>
    <col valign="middle"></col>
    <col valign="top"></col>
  </colgroup>
  <tbody>
    <tr>
       <td> נסיון 1 <br /><br /></td> <td> נסיון 2 </td> <td> נסיון 3 </td> <td> נסיון 4 </td>
       <td> 5 נסיון </td> <td> נסיון 6 </td> <td> נסיון 7 </td>
    </tr>
    <tr>
       <td> נסיון 1 <br /><br /></td> <td> נסיון 2 </td> <td> נסיון 3 </td> <td> נסיון 4 </td>
       <td> 5 נסיון </td> <td> נסיון 6 </td> <td> נסיון 7 </td>
    </tr>
  </tbody>
</table>

דוגמה לשימוש ב- colgroup ו- col בטבלאות.

נסיון 1	נסיון 2	נסיון 3	נסיון 4	נסיון 5	נסיון 6	נסיון 7
נסיון 1	נסיון 2	נסיון 3	נסיון 4	נסיון 5	נסיון 6	נסיון 7

• מה קרה פה? בעמודה הראשונה הוספנו שני מעברי שורה (<br />) על מנת שהשורות יקבלו גובה, כדי שנוכל לראות את ההבדלים שיוצר הפרמטר valign. לכן בעמודה הראשונה יש שלוש שורות טקסט, וזה גובה כל שורת טבלה. בעמודה השניה, לא ציינו מאפיין valign. ברירת המחדל שלו היא 'middle' ומכיוון שיש בו רק שורת טקסט אחת, ולתא שלו יש גובה של שלוש שורות טקסט, הוא מיושר לאמצע. שאר העמודות מיושרות כפי שקבענו בעזרת col ו- colgroup.

ניווט

הפרק הקודם: טבלאות מסובכות

תגים מתקדמים של טבלאות תרגילים

הפרק הבא: כל המאפיינים של טבלאות

אלמנטים חדשים לפרק זה:

• th
• caption
• thead
• tfoot
• tbody
• colgroup
• col

אלמנטים רלוונטים:

• table
• tr
• td