שיעור 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
בעצמך.