Get Adobe Flash player
דף הבית טבלאות בניית טבלאות

האתר של רפאלי - בניית טבלאות, HTML

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

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

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

בניית טבלאות

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

תג הפתיחה של טבלה הוא: <table> המצהיר על פתיחת הטבלה, ובהמשך לו באים תגי התאים הנחלקים לשני סוגים:

  • תג פתיחת שורת טבלה חדשה (מעבר בין שורות) <tr> - Table Row
  • תג לפתיחת תא נתונים <td> - Data Cell. (תג זה יכול להיות מוחלף בתג <th> ראה הסבר בהמשך).

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

דוגמא לבניית טבלה פשוטה בת שתי שורות ושני תאים:

<table>
<tr><td>
שורה ראשונה תא שמאלי</td>
      <td>
שורה ראשונה תא ימני</td>
</tr>
<tr>
    <td>
שורה שניה תא שמאלי</td>
    <td>
שורה שניה תא ימני</td>
</tr>
</table>
טבלה עם מסגרת (border) ושורת כותרות

תג <table> כשאינו מלווה בתכונות, ייצור טבלה ללא רשת – (גבולות בין התאים) או מסגרת. את המסגרת יוצרת התכונה border. מתן ערך (בפיקסלים) יעבה את המסגרת החיצונית אך ישאיר את הרשת הפנימית בגודל של פיקסל אחד, ויצור תחושת עומק, תלת מימד (לא נתמך ע"י חלק מהדפדפנים).

במקרים רבים, הוראת העיצוב דורשת ייחוד השורה העליונה מהאחרות. התג <th> (Table Header) זהה לתג <td> אך ממרכז ומדגיש אוטומטית את הטקסט הכתוב שבתא

<table border= "2" align="center">
<tr>
    <th>
רבעון ראשון</th>
    <th>
רבעון שני</th>
    <th>
רבעון שלישי</th>
    <th>
רבעון רביעי</th>
</tr>
<tr>
   
<td>12% רווח</td>
    <td>2% הפסד</td>
    <td>5% הפסד</td>
    <td>8% רווח</td>
</tr>
<tr>
   
<td>11% רווח</td>
    <td>2% רווח</td>
    <td>3% הפסד</td>
    <td>5% רווח</td>
</tr>
</table>

תוצאת קוד זה היא:

רבעון ראשוןרבעון שנירבעון שלישירבעון רביעי

12% רווח

2% הפסד

5% הפסד

8% רווח

11% רווח

2% רווח

3% הפסד

5% רווח

מיזוג תאים colspan, rowspan

מיזוג תאים לרוחב נוצר ע"י התכונה colspan הגורמת ל"התפרסות" תא על פני מספר תאים בשורה או rowspan היוצרת השתרעות על תאים בעמודה.

למיזוג שני תאים לרוחב השורה, יש להוסיף  לתג התא את התכונה: <td colspan="2"> ולמחוק את ה <td> הבא שבשורה. זאת משום שהתא הממוזג תופס גם את שטח התא העוקב.

למיזוג 3 תאים, נכתוב colspan="3" ונפחית בהתאם שני תגי <td>

למיזוג שני התאים העליונים בעמודה, בטבלה בת 3 שורות, יש לכתוב בתא העליון <td rowspan="2"> ובשורה הבאה נמחוק את תג ה td המיותר.

בדוגמא הבאה מוצגת טבלה בעלת מיזוג תאים אופקי ואנכי.

<table border="1">
<tr>
     <th colspan=”2”>
יחס משפחתי</th> <th>גיל </th>
</tr>
<tr>
     <td rowspan=”2”>הורים</td> <td>יעקב</td><td align="center"> 147 </td>
</tr>
<tr>
     <td>
רחל</td> <td align="center">?? </td>
</tr>
<tr>
     <td rowspan=”2”>
בנים</td><td>יוסף </td><td align="center">110 </td>
</tr>
<tr>

    <td>בנימין</td> <td align="center">??</td>
<tr>
</table>
יחס משפחתיגיל
הורים יעקב 147
רחל ??
בנים יוסף 110
בנימין ??

 

אל השיעור הבא