HTML/טבלאות/מסובכות

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

מספר תאים לא שווה בכל שורה

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

<table border="1">
  <tr>
    <td><b> כותרת ראשונה </b></td>
    <td><b> כותרת שניה </b></td>
    <td><b> כותרת שלישית </b></td>
  </tr>
  <tr>
    <td> עמודה ראשונה </td>
  </tr>
  <tr>
    <td> עמודה ראשונה </td>
    <td> עמודה שניה </td>
  </tr>
</table>

כותרת ראשונה	כותרת שניה	כותרת שלישית
עמודה ראשונה
עמודה ראשונה	עמודה שניה

colspan ו- rowspan

colspan ו- rowspan הם שני מאפיינים של td ומעידים על כמה משבצות טבלה הוא משתרע. כך ניתן לפתור את הבעיה מהדוגמה הקודמת.

אם ניתן לtd מאפיין colspan עם ערך 2, הוא יתפוס את המשבצת שהיה אמור לתפוס, וזו שאחריו בשורה.

אם ניתן לtd מאפיין rowspan עם ערך 2, הוא יתפוס את המשבצת שהיה אמור לתפוס, וזו שבשורה מתחתיו.

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

<table border="1">
  <tr>
    <td><b> כותרת ראשונה </b></td>
    <td><b> כותרת שניה </b></td>
    <td rowspan = "3"><b> כותרת שלישית </b></td>
  </tr>
  <tr>
    <td colspan = "2"> עמודה ראשונה </td>
  </tr>
  <tr>
    <td> עמודה ראשונה </td>
    <td> עמודה שניה </td>
  </tr>
</table>

כותרת ראשונה	כותרת שניה	כותרת שלישית
עמודה ראשונה
עמודה ראשונה	עמודה שניה

קל יותר להבין איך colspan פועל. אם נתנו לו ערך 3 לדוגמא, הוא יתפוס מקום של שלושה תאים (td) בשורה שלנו.

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

ניתן להשתמש גם ב-colspan וגם ב-rowspan באותו תא. התוצאה תהיה שהתא יתפוס מרובע של תאים שמשתרע על פני colspan תאים לאורך ו-rowspan תאים לגובה.

טבלה בתוך טבלה

עוד שיטה ליצור טבלאות מורכבות היא טבלה בתוך טבלה. בתוך אלמנט td ניתן לשים הרבה אלמנטים, ובפרט אלמנט table.

דוגמה:

<table border="1">
  <tr>
    <td><b> כותרת ראשונה </b></td>
    <td><b> כותרת שניה </b></td>
    <td><b> כותרת שלישית </b></td>
    <td rowspan = "4"><b> כותרת רביעית </b></td>
  </tr>
  <tr>
    <td> עמודה ראשונה </td>
    <td colspan = "2" rowspan="2"> 
      תת טבלה <br />
      <table border="1">
         <tr>
           <td>תת-טבלה 1,1</td>     
           <td>תת-טבלה 2,1</td>     
         </tr>     
         <tr>
           <td>תת-טבלה 1,2</td>     
           <td>תת-טבלה 2,2</td>     
         </tr> 
      </table>
    </td>
  </tr>
  <tr>
    <td> עמודה ראשונה </td>
  </tr>
  <tr>
    <td> עמודה ראשונה </td>
    <td> עמודה שניה </td>
    <td> עמודה שלישית </td>
  </tr>
</table>

כותרת ראשונה	כותרת שניה	כותרת שלישית	כותרת רביעית
עמודה ראשונה	תת טבלה תת-טבלה 1,1 תת-טבלה 2,1 תת-טבלה 1,2 תת-טבלה 2,2
עמודה ראשונה
עמודה ראשונה	עמודה שניה	עמודה שלישית

תאים ריקים

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

דוגמה:

<table border="1">
  <tr>
    <td>1,1</td>     
    <td>2,1</td>     
  </tr>     
  <tr>
    <td></td>     
    <td>2,2</td>     
  </tr> 
</table>

1,1	2,1
	2,2

על מנת להמנע מהתקלה הזו, נוסיף את יישות הרווח ( ) לתוך התא הריק:

דוגמה:

<table border="1">
  <tr>
    <td>1,1</td>     
    <td>2,1</td>     
  </tr>     
  <tr>
    <td>&nbsp;</td>     
    <td>2,2</td>     
  </tr> 
</table>

1,1	2,1
	2,2

ניווט

הפרק הקודם: טבלאות פשוטות

טבלאות מסובכות תרגילים

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

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

• table
• tr
• td