מיזוג שורות ועמודות
חלק מהיחידה יסודות במסלול ה-HTML של Coddy. שיעור 50 מתוך 60.
ב-HTML אפשר לגרום לתאי טבלה להשתרע על פני כמה שורות או עמודות באמצעות המאפיינים rowspan ו-colspan. המאפיינים האלה מאפשרים לך ליצור פריסות טבלה מורכבות יותר באמצעות מיזוג תאים.
המאפיין colspan משמש לציון מספר העמודות שעל פניו תא אמור להשתרע. מוסיפים אותו לתגית <td> או <th> של התא שרוצים להרחיב.
הנה דוגמה לשימוש ב־colspan:
<table border="1">
<tr>
<th colspan="2">Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>בדוגמה הזו, תא הכותרת עם הטקסט "Name" משתרע על פני שתי עמודות. זה שימושי ליצירת כותרת שמכסה כמה עמודות. כך זה נראה:
המאפיין rowspan משמש לציון מספר השורות שעל פניו התא אמור להשתרע. מוסיפים אותו גם לתג <td> או <th> של התא שאותו רוצים להרחיב.
הנה דוגמה לשימוש ב־rowspan:
<table border="1">
<tr>
<th>Employee</th>
<th>Shift</th>
</tr>
<tr>
<td rowspan="2">Alex</td>
<td>Morning</td>
</tr>
<tr>
<td>Evening</td>
</tr>
</table>כאן, rowspan משמש כדי להראות שאלכס עובד גם במשמרות הבוקר וגם במשמרות הערב בלי לחזור על השם.
אפשר להשתמש גם ב־colspan וגם ב־rowspan באותה טבלה כדי ליצור פריסות מורכבות. רק זכרו להתאים את מספר התאים בכל שורה בהתאם, כדי להתחשב בתאים המשתרעים על פני כמה עמודות או שורות.
אתגר
קלצרו מסמך HTML הכולל טבלה עם תאים המשתרעים על פני כמה שורות ועמודות. מבנה הטבלה צריך להיות כך:
- שורת טבלה (
<tr>) עם תא כותרת (<th>) המשתרע על פני שלוש עמודות ומכיל את הטקסט"Student Report". - שורת טבלה נוספת (
<tr>) עם תא כותרת (<th>) שבו כתוב"Name", תא כותרת (<th>) שבו כתוב"Subject", ותא כותרת (<th>) שבו כתוב"Grade". - שורת טבלה נוספת (
<tr>) עם תא נתונים (<td>) שבו כתוב"John Doe", תא נתונים (<td>) שבו כתוב"Math", ותא נתונים (<td>) שבו כתוב"A". - שורת טבלה נוספת (
<tr>) עם תא נתונים (<td>) המשתרע על פני שתי שורות ומכיל את הטקסט"Jane Smith", תא נתונים (<td>) שבו כתוב"Science", ותא נתונים (<td>) שבו כתוב"B". - שורת הטבלה האחרונה (
<tr>) עם תא נתונים (<td>) שבו כתוב"History"ותא נתונים (<td>) שבו כתוב"A".
נסו בעצמכם
<!DOCTYPE html>
<html>
<body>
<table border="1">
<!-- כתבו כאן קוד -->
</table>
</body>
</html>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה יסודות
תרגלו בעצמכם: Web אונליין