צור קשר
מאמרים אחרונים
הגדרת טבלה ב-HTML5
ליצירת טבלה ב-HTML5 משתמשים בתגית table. כל טבלה מחולקת לשורות (table rows) המוגדרות ע"י תגית tr, ובדומה לכך, כל שורה מחולקת לתאי נתונים (table data) המכילים את המידע שמופיע בטבלה. את התאים יוצרים באמצעות התגית td. הדוגמה הבאה ממחישה את ההסבר:
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
בדוגמה זו ישנה תגית table שבתוכה שתי תגיות tr, שבכל אחת מהן שתי תגיות td. כלומר בטבלה יש שתי שורות ובכל שורה שני תאים. כך תיראה הטבלה הנוצרת ע"י הקוד הנ"ל:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
כל תא בטבלה יכול להכיל טקסט, קישורים, רשימות, תמונות, טבלאות נוספות וכן הלאה.
כותרת הטבלה
בכדי להגדיר כותרת לטבלה (השורה העליונה בטבלה, המופיעה ברוב הדפדפנים בבולד), משתמשים בתגית th הנמצאת תחת תגית tr, כמו בדוגמה הבאה:
<tr>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>Swimming</td>
<td>Surfing</td>
</tr>
<tr>
<td>Running</td>
<td>Skying</td>
</tr>
</table>
הטבלה שנוצרת נראית כך:
| Men | Women |
|---|---|
| Swimming | Surfing |
| Running | Skying |
המאפיינים colspan ו-rowspan עבור תאים בטבלה
לעתים, הטבלה שאנו זקוקים לה איננה סימטרית, ונרצה שבעוד שבשורה מסויימת יהיו נניח 5 תאים, בשורה אחרת יהיו רק 3 תאים. לשם כך ישנם מאפיינים שיעזרו לנו להגדיר את הרוחב של שורה ושל טור בטבלה. נשים לב כי מאפיינים אלו הם עבור התאים בטבלה (מסוג td או th) ולא עבור הטבלה עצמה.
colspan - מגדיר את רוחבו של התא בעמודות.
rowspan - מגדיר את גובהו של התא בשורות.
לדוגמא:
<tr>
<td colspan="3">Training Program</td>
</tr>
<tr>
<th rowspan="2">S<br />U<br />N<br />D<br />A<br />Y</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>Swimming</td>
<td>Surfing</td>
</tr>
</table>
דוגמא זו תראה כך:
| Training Program | ||
| S U N D A Y |
Men | Women |
|---|---|---|
| Swimming | Surfing | |
הנחיה לעיצוב טבלאות
עיצוב הטבלה צריך להעשות באמצעות קובץ CSS חיצוני. בקוד ה-HTML5 אנו רושמים אך ורק את הסמנטיקה של הטבלה (כלומר את המבנה שלה: כותרות, שורות ותאים וכו').
עיצוב אתרים בטבלה
בעבר נעשה שימוש בעיצוב אתרים במבנה של טבלה, כלומר כל האתר היה מעוצב על ידי הכנסתו לטבלה אחת גדולה. היום כבר לא מעצבים כך, ושיטה של עיצוב בטבלה איננה מומלצת. הסיבה לכך היא שחשוב שהקוד יהיה סמנטי ולא יכיל בתוכו מידע עיצובי, ועיצוב טבלאי אינו עונה על הדרישה של הפרדת קוד מעיצוב. השימוש בטבלה יבוא רק כאשר באמת רוצים שהגולש יראה טבלה אמיתית עם נתונים. כדי לעצב אתר נשתמש בתגיות div והעיצוב יעשה בקובץ CSS חיצוני.
אהבתי מאוד (ל"ת)