מודל הטבלה ועבודה עם טבלאות ב - HTML5

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

במדריך זה נעסוק במודל הטבלה ב - HTML5, נסקור את כל התגים המרכיבים את מודל הטבלה ונעסוק בדרך הנכונה לבנות טבלה על כל מרכיביה.

מדריך וידאו המתאר את המבנה הבסיסי של טבלה


התג <table> כמסגרת העליונה לבניית טבלאות בשפת HTML5

בעזרת התג <table> נגדיר מסגרת לטבלה. התג <table> לבדו אינו מספיק על מנת להגדיר טבלה שלמה ויש להגדיר תחתיו תגים נוספים כדי ליצור טבלה מלאה בעלת עמודות ושורות. בתוך טבלה חייב להיופיע לפחות תג <tr> אחד שתפקידו להגדיר שורה. כל תג <tr> חייב שיהיו לו לפחות תג <td> או תג <th> אחד או את שני התגים גם יחד. התג <td> מגדיר תא בתוך הטבלה. מלבד תגים הכרחיים אלה ניתן להשתמש בטבלה גם בתגים <caption>, <colgroup>, <thead>, <tbody>, וכן בתג <tfoot>. בדוגמה שלמטה נעשה שימוש בכל התגים הללו.

<table>
<colgroup span="3" style="background:cyan"></colgroup>
<caption>Capital Cities</caption>
<thead>
<tr>
<th>Country</th>
<th>City</th>
</tr>
</thead>
<tr>
<td>Israel</td>
<td>Jerusalem</td>
</tr>
<tr>
<td>United States</td>
<td>Washington</td>
</tr>
</table>

התג <caption> ותפקידו הייחודי בסיוע לבעלי מוגבלויות ראייה

התג <caption> ישמש אותנו כדי להגדיר כותרת לטבלה. אין חובה להשתמש בתג זה אולם אם נעשה בו שימוש אזי חובה למקמו מייד לאחר התג <table>.

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

דוגמת קוד לשימוש בתג <caption>

<table>
<caption>תיאור הטבלה וכל אחת מעמודותיה</caption>

<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>

<tfoot>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>val 1</td>
<td>val 2</td>
</tr>
<tr>
<td>cel 1</td>
<td>cell 2</td>
</tr>
</tbody>
</table>

התג <colgroup> ותפקידו כמאגד קבוצות של עמודות

בעזרת התג <colgroup> נגדיר תכונות שונות (כגון צבע רקע או פונט) לקבוצה של עמודות בטבלה. התג <colgroup> יקנן תמיד בתוך התג <table> ונשתמש בו כדי להגדיר תכונות עיצוביות לקבוצה שלמה של עמודות במקום לכל עמודה בנפרד. כדי להגדיר תכונות לכל עמודה בנפרד נשתמש בתג <col>.

תג זה אינו תג חובה כדי להרכיב טבלה. באם נעשה בו שימוש אזי הוא יקנן בתוך התג <table> לאחר התג <caption> באם ישנו ולפני  התגים: <thead>, <tbody>, <tfoot>, <tr>.

דוגמת קוד לשימוש בתג <colgroup>

<table>
<colgroup span="3" style="background:cyan"></colgroup>
<caption>Capital Cities</caption>
<thead>
<tr>
<th>Country</th>
<th>City</th>
</tr>
</thead>
<tr>
<td>Israel</td>
<td>Jerusalem</td>
</tr>
<tr>
<td>United States</td>
<td>Washington</td>
</tr>
</table>

התג <col> ותפקידו כמאגד שורת תאים לעמודה אחת

התג <col> ישמש אותנו כדי להגדיר תכונות שונות לעמודה אחת או יותר בטבלה. בדרך כלל נשתמש בתג זה רק במקרה שאנו מעוניינים להגדיר תכונות שונות לכל עמודה בטבלה שלנו. במידה וזה לא המצב אזי עדיף להשתמש בתג <colgroup> כדי להגדיר תכונות לכל העמודות בטבלה. התג <col> הוא תג ריק שאינו גורם בפני עצמו לשינוי כלשהו בדף. על מנת שתהיה לו השפעה על הדף יש לשלבו בטבלה עם התג <td>.

דוגמת קוד לשימוש בתג <col>

<table border="1">
<col width="100" span="2" style="color:Blue"></col>
<col width="10"></col>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>

התג thead ותפקידו כמאגד שורות הכותרת בטבלה

התג <thead> ישמש אותנו כדי לאגד בתוכו את כל המידע המצוי בכותרת טבלה. בדרך כלל כאשר משתמשים בתג זה נעשה שימוש גם בתג <tbody>שמאגד בתוכו את כל המידע המצוי בגוף הטבלה ובתג <tfoot>.

דוגמת קוד לשימוש בתג <thead>

<table>
<thead>
<tr>
<th>Product</th>
<th>Sales</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total sales</td>
<td>8,500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Prod 1</td>
<td>1,000</td>
</tr>
<tr>
<td>Prod 2</td>
<td>7,500</td>
</tr>
</tbody>
</table>

התג <tbody> ותפקידו כמאגד כל נתוני גוף הטבלה

התג <tbody> ישמש אותנו כדי לאגד בתוכו את כל המידע המצוי בגוף טבלה. בדרך כלל כאשר משתמשים בתג זה נעשה שימוש גם בתג <thead> שמאגד בתוכו את כל המידע המצוי בכותרת הטבלה ובתג <tfoot> המאגד בתוכו את המידע שבתחתית הטבלה.

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

דוגמת קוד לשימוש בתג <tbody>

<table>
<thead>
<tr>
<th>Product</th>
<th>Sales</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total sales</td>
<td>8,500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Prod 1</td>
<td>1,000</td>
</tr>
<tr>
<td>Prod 2</td>
<td>7,500</td>
</tr>
</tbody>
</table>

התג <tfoot>  ותפקידו כמאגד שורות הסיכום בטבלה

התג <tfoot> ישמש אותנו כדי לאגד בתוכו את כל המידע המצוי בשורת הסיכום של טבלה. בדרך כלל כאשר משתמשים בתג זה נעשה שימוש גם בתג <tbody> שמאגד בתוכו את כל המידע המצוי בגוף הטבלה ובתג <thead> המאגד בתוכו את שורת הכותרת של הטבלה.

דוגמת קוד לשימוש בתג <tfoot>

<table>
<thead>
<tr>
<th>Product</th>
<th>Sales</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total sales</td>
<td>8,500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Prod 1</td>
<td>1,000</td>
</tr>
<tr>
<td>Prod 2</td>
<td>7,500</td>
</tr>
</tbody>
</table>

 

התג <tr> ותפקידו החיוני כמגדיר שורה בטבלה

בעזרת התג <tr> נגדיר שורה בתוך טבלת HTML. אין משמעות לשימוש בתג <tr> מחוץ לקונטקסט של התג <table>, כלומר מחוץ לקונטקסט של האלמנט טבלה. מלבד בתוך התג <table> התג <tr> יכול לקנן בתוך התגים הבאים (שלכולם יש משמעות רק בתוך טבלה): thead, tbody, tfoot.

דוגמת קוד לשימוש בתג <tr>

<table>
<colgroup span="3" style="background:cyan"></colgroup>
<caption>Capital Cities</caption>
<thead>
<tr>
<th>Country</th>
<th>City</th>
</tr>
</thead>
<tr>
<td>Israel</td>
<td>Jerusalem</td>
</tr>
<tr>
<td>United States</td>
<td>Washington</td>
</tr>
</table>

התג <td> ותפקידו החיוני כמגדיר תאים בתוך שורה

בעזרת התג <td> נגדיר תא בודד בתוך טבלה. התג <td>לבדו אינו מספיק על מנת להגדיר טבלה שלמה ויש להשתמש בו תחת התג <tr>. התג <tr> מצדו חייב להיות בשימוש תחת התג <table>. היחס בין שלושת התגים הללו הוא כזה: התג <table> מגדיר מסגרת לטבלה, בתוך מסגרת זו התג <tr> מגדיר שורה ואילו בתוך השורה התג <td> מגדיר תא. ב - HTML 5 ישנו עוד סוג של תג המגדיר תא והוא התג <th>. תאים המוגדרים באמצעות התג <th> ישמשו כתאי הכותרת של הטבלה. בתג <td> נשתמש כדי להגדיר את תאי גוף הטבלה.

דוגמת קוד לשימוש בתג <td>

<table>br/> <caption>Capital Cities</caption>
<thead>
<tr>
<th>Country</th>
<th>City</th>
</tr>
</thead>
<tr>
<td>Israel</td>
<td>Jerusalem</td>
</tr>
<tr>
<td>United States</td>
<td>Washington</td>
</tr>
</table>

התג <th> והשימוש בו לצורך הגדרת תאים בשורת כותרת

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

דוגמת קוד לשימוש בתג <th>

<table>
<colgroup span="3" style="background:cyan"></colgroup>
<caption>Capital Cities</caption>
<thead>
<tr>
<th>Country</th>
<th>City</th>
</tr>
</thead>
<tr>
<td>Israel</td>
<td>Jerusalem</td>
</tr>
<tr>
<td>United States</td>
<td>Washington</td>
</tr>
</table>

עיצוב טבלאות

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



מדריכים וכלים רלוונטיים נוספים בנושא זה

מחולל קוד ליצירת טבלאות HTML בקלות ובמהירות

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | מדיניות שימוש