תגיות הקשורות לטבלאות

במאמר זה, נסביר על תגיות הקשורות לטבלאות.

הסבר זה מתאר כיצד לערוך טבלאות וכיתובי טבלאות ב-HTML יחד עם דוגמאות.

YouTube Video

תגיות הקשורות לטבלאות

תגית <table>

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• תגית <table> משמשת ליצירת טבלה שמארגנת ומציגה נתונים בשורות ובעמודות.

  תגית <table> מארגנת נתונים חזותית ויוצרת טבלאות עם מספר שורות ועמודות. שורות מוגדרות עם תגית <tr>, תאי כותרות עם תגית <th> ותאי נתונים עם תגית <td>.

• ניתן להתאים את סגנון ופריסת הטבלה באמצעות CSS.

תגית <tr>

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• תגית <tr> משמשת להגדרת שורות בטבלה.

  תגית <tr> משמשת ליצירת כל שורה בטבלה, הכוללת תאים (<td> או <th>).

• כל שורה יכולה להכיל מספר תאים, וכך יוצרת את המבנה הכללי של הטבלה.

תגיות <th> ו-<td>

1<th>Header 1</th>
2<td>Data 1</td>

• תגית <th> מגדירה תא כותרת בטבלה. בדרך כלל בשורות כותרת, תוכן התאים הוא מודגש וממוקם במרכז.
• תגית <td> מגדירה תא נתוני טבלה סטנדרטי, המציג נתונים רגילים בטבלה.

מאפייני colspan ו-rowspan

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

המאפיינים colspan ו-rowspan משמשים כאשר תאי טבלה משתרעים על פני מספר עמודות או שורות.

• המאפיין colspan מאפשר לתא להתרחב על פני עמודות מרובות.
• מאפיין rowspan מאפשר לתא להתפרש על פני מספר שורות.

תגיות <thead>, <tbody>, <tfoot>

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• תגית <thead> משמשת להגדיר את חלק הכותרת של הטבלה. בדרך כלל היא מכילה את כותרות העמודות.

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

• תגית <tbody> מגדירה את חלק הגוף של הטבלה. היא מכילה את שורות הנתונים.

  תגית <tbody> מכילה את גופו המרכזי של נתוני הטבלה. היא ממוקמת בין השורות המקיפות את תגיות <thead> ו- <tfoot>.

• תגית <tfoot> מגדירה את חלק הכותרת התחתונה של הטבלה, שמכיל סיכומים או הערות.

  תגית <tfoot> ממוקמת בסיום הטבלה ומשמשת להציג סיכומים או הערות נוספות. היא שימושית במיוחד כאשר מסכמים או מציגים סיכומים עבור סטים גדולים של נתונים.

תגיות <caption> ו-<colgroup>

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• תגית <caption> מוסיפה כותרת המבהירה את תוכן הטבלה. בדרך כלל היא ממוקמת בראש הטבלה ומשמשת לסיכום תוכן הטבלה הכללי.

• תגית <colgroup> מקבוצת עמודות בתוך הטבלה ומשמשת להחלת עיצובים או פריסות. באמצעות הכללת התגית <col> ניתן להגדיר צבעי רקע או רוחבים עבור עמודות מסוימות.

דוגמת טבלה

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• תגית <table> משמשת ליצירת טבלה המציגה נתונים בשורות ובעמודות.

• תגית <thead> מקבצת את שורות הכותרת של הטבלה. היא בדרך כלל מכילה תגיות <th>, אשר משמשות ככותרות.

• תגית <tbody> מקבצת את התוכן הראשי של הטבלה. היא בדרך כלל מכילה שורות נתונים המורכבות מתגיות <td>.

• תגית <tfoot> מקבצת את שורות הכותרת התחתונה של הטבלה. היא מתאימה להצגת סכומים או הערות.

• תגית <colgroup> מקבצת את עמודות הטבלה ומשמשת להחלת סגנונות על כולן יחד.

• תגית <caption> מוסיפה כיתוב או כותרת לטבלה, מה שמקל על המשתמשים להבין את תוכן הטבלה.

• המאפיין colspan מאפשר לתא להתרחב על פני עמודות מרובות.

• מאפיין rowspan מאפשר לתא להתפרש על פני מספר שורות.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video