שיעור 11: עוד על טבלאות
הכותרת "עוד על טבלאות" אולי נשמעת קצת משעממת. אבל ראה את הצד החיובי. כשאתה שולט בטבלאות, שום דבר כבר לא יפיל אותך בשפת HTML.
אז מה נשאר לנו?
שני המאפיינים colspan ו-rowspan משמשים אותך כשאתה רוצה ליצור טבלאות מסוגננות.
Colspan הוא קיצור של "colspan ."Column Span משמש בתג <td> כדי להגדיר על כמה עמודות תא ישתרע:
דוגמה 1:
<table border="1">
<tr>
<td colspan="3">Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
בדפדפן זה יראה כך:
| Cell 1 | ||
| Cell 2 | Cell 3 | Cell 4 |
על ידי קביעת colspan לערך "3", התא בשורה הראשונה ישתרע על פני שלוש עמודות. אם במקום זה נקבע את colspan לערך "2", התא ישתרע רק על שתי עמודות ויהיה צורך להכניס תא נוסף בשורה הראשונה כך שמספר העמודות יתאים בשתי השורות.
דוגמה 2:
<table border="1">
<tr>
<td colspan="2">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
בדפדפן זה יראה כך:
| Cell 1 | Cell 2 | |
| Cell 3 | Cell 4 | Cell 5 |
מה עם rowspan?
כפי שבטח ניחשת, rowspan מגדיר על כמה שורות תא ישתרע:
דוגמה 3:
<table border="1">
<tr>
<td rowspan="3">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
</table>
בדפדפן זה יראה כך:
| Cell 1 | Cell 2 |
| Cell 3 | |
| Cell 4 |
בדוגמה שלמעלה rowspan נקבע לערך "3" ב-Cell 1. זה מגדיר שהתא חייב להשתרע על שלוש שורות (השורה שלו ועוד שתי שורות נוספות). כך Cell 1 ו-Cell 2 נמצאים באותה שורה, בעוד ש-Cell 3 ו-Cell 4 יוצרים שתי שורות עצמאיות.
מבולבל: טוב, זה לא ממש קשה ומסובך לאבד את הכיוון. לכן זה יכול להיות רעיון טוב לצייר את הטבלה על פיסת נייר לפני שאתה מתחיל עם ה-HTML.
לא מבולבל? עם כך המשך וצור מספר טבלאות עם colspan ו-rowspan בעצמך.