HTML <th> תג
דוגמה
טבלת HTML פשוטה, מכילה שתי עמודות ושתי שורות:<table border="1">
<tr>
<th>חודש</th>
<th>חסכון</th>
</tr>
<tr>
<td>ינואר</td>
<td>$100</td>
</tr>
</table>הגדרות ושימוש
תג <th> מגדיר תא כותרת בטבלת HTML.
לטבלת HTML יש שני סוגי תאים:
- תאי כותרת - מכילים מידע כותרת (מיוצרים יחד עם אלמנט th)
- תאים סטנדרטים - מכילים מידע (מיוצרים יחד עם אלמנט td)
טקסט באלמנט th
מודגש וממורכז.
טקסט באלמנט
td
רגיל ומייושר שמאלה.
תמיכת דפדפנים
תג
<th> נתמך בכל הדפדפנים המוביליםהבדלים בין HTML ו- XHTML
איןתכונות נוספות
DTD: מציין באיזה HTML 4.01/XHTML 1.0 DTD תג מותר. S=Strict (קפדן), T=Transitional (מעבר), F=Frameset (מסגרות)
| תכונה | ערך | תיאור | DTD |
|---|---|---|---|
| abbr | text | מציין גרסה מקוצרת של התוכן בתא | STF |
| align | left right center justify char | מיישר תוכן בתא | STF |
| axis | category_name | מגדיר קטגוריות בתאים | STF |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | לא מומלץ לשימוש. תשתמשו בסגנונות במקום זה. מגדיר צבע רקע עבור תא | TF |
| char | character | מיישר תוכן של תא לפי תו | STF |
| charoff | number | מגדיר מספר תווים, לפיו תוכן בתוך אלמנט td ייושר מתו, שצוין בתכונה char | STF |
| colspan | number | מגדיר מספר עמודות שמחוברות | STF |
| height | pixels % | לא מומלץ לשימוש. תשתמשו בסגנונות במקום זה. מגדיר גובה של תא | TF |
| nowrap | nowrap | לא מומלץ לשימוש. תשתמשו בסגנונות במקום זה. מגדיר שתוכן בתא לא עובר לשורה הבאה | TF |
| rowspan | number | מגדיר מספר שורות שמחוברות | STF |
| scope | col colgroup row rowgroup | מגדיר שיטת חיבור כותרות של תא ונתוני תא בטבלה | STF |
| valign | top middle bottom baseline | יישור אנכי בטבלה | STF |
| width | pixels % | לא מומלץ לשימוש. תשתמשו בסגנונות במקום זה. מגדיר רוחב של תא | TF |
תכונות סטנדרטיות
Тег<th> поддерживает следующие стандартные атрибуты:| תכונה | ערך | תיאור | DTD |
|---|---|---|---|
| class | classname | מציין שם המחלקה עבור האלמנט | STF |
| dir | rtl ltr | מציין כיוון טקסט עבור תוכן של האלמנט | STF |
| id | id | מציין id ייחודי עבור אלמנט | STF |
| lang | language_code | מציין קוד שפה עבור תוכן של האלמנט | STF |
| style | style_definition | מציין סגנון מובנה עבור אלמנט | STF |
| title | text | מציין מידע נוסף עבור אלמנט | STF |
| xml:lang | language_code | מציין קוד שפה עבור תוכן של האלמנטים במסמכי XHTML | STF |
יותר מידע על תכונות ה-HTML.
אירועי ה-HTML
תג<th> תומך בתכונות אירועים הבאות:| תכונה | ערך | תיאור | DTD |
|---|---|---|---|
| onclick | script | מפעיל סקריפט בלחיצת עכבר | STF |
| ondblclick | script | מפעיל סקריפט בלחיצת עכבר כפולה | STF |
| onmousedown | script | מפעיל סקריפט כשה כפתור של העכבר נלחץ | STF |
| onmousemove | script | סקריפט מופעל כשה מצביע עכבר זז | STF |
| onmouseout | script | מפעיל סריפט כשה מצביע עכבר יוצא מאלמנט | STF |
| onmouseover | script | מפעיל סקריפט כשה מצביע עכבר עובר מעל האלמנט | STF |
| onmouseup | script | מפעיל סקריפט כשה כפתור של העכבר שוחרר | STF |
| onkeydown | script | מפעיל סקריפט כשה מקש נלחץ | STF |
| onkeypress | script | סקריפט מופעל כשה מקש נלחץ ושוחרר | STF |
| onkeyup | script | סקריפט מופעל כשה מקש שוחרר | STF |
יותר מידע על אירועי ה-HTML.
דוגמה 1
טבלאות HTML עם מסגרות שונות.<h4>מסגרת רגילה:</h4>
<table border="1">
<tr>
<td>ראשונה</td>
<td>שורה</td>
</tr>
<tr>
<td>שניה</td>
<td>שורה</td>
</tr>
</table>
<h4>ללא מסגרת:</h4>
<table border="0">
<tr>
<td>ראשונה</td>
<td>שורה</td>
</tr>
<tr>
<td>שניה</td>
<td>שורה</td>
</tr>
</table>
<h4>מסגרת עבה:</h4>
<table border="8">
<tr>
<td>ראשונה</td>
<td>שורה</td>
</tr>
<tr>
<td>שניה</td>
<td>שורה</td>
</tr>
</table>
<h4>מסגרת עבה מאוד:</h4>
<table border="15">
<tr>
<td>ראשונה</td>
<td>שורה</td>
</tr>
<tr>
<td>שניה</td>
<td>שורה</td>
</tr>
</table>דוגמה 2
כיצד להגדיר כותרות לטבלה.<h4>כותרות של הטבלה:</h4>
<table border="1">
<tr>
<th>שם</th>
<th>טלפון</th>
</tr>
<tr>
<td>ביל גייטס</td>
<td>555 77 854</td>
</tr>
</table>
<h4>כותרות אנכיות:</h4>
<table border="1">
<tr>
<th>שם:</th>
<td>ביל גייטס</td>
</tr>
<tr>
<th>טלפון:</th>
<td>555 77 854</td>
</tr>
</table>דוגמה 3
כיצד להשתמש ב- 'nbsp' כדי לטפל בתאים שלא מכילים שום תוכן.<table border="1"> <tr> <td>טקסט כלשהו</td> <td>טקסט כלשהו</td> </tr> <tr> <td></td> <td>טקסט כלשהו</td> </tr> </table>
דוגמה 4
טבלת HTML עם כותרת.<table border="1">
<caption>חסכון חודשי</caption>
<tr>
<th>חודש</th>
<th>חסכון</th>
</tr>
<tr>
<td>ינואר</td>
<td>$100</td>
</tr>
<tr>
<td>פברואר</td>
<td>$50</td>
</tr>
</table>דוגמה 5
כיצד להציג אלמנטים בתוך אלמנטים אחרים.<table border="1">
<tr>
<td>
<p>זאת פסקה</p>
<p>זאת פסקה אחרת</p>
</td>
<td>תא הזה מכיל טבלה:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>תא הזה מכיל רשימה
<ul>
<li>תפוחים</li>
<li>בננות</li>
<li>אננס</li>
</ul>
</td>
<td>שלום</td>
</tr>
</table>דוגמה 6
כיצד להגדיר תאי טבלה שמכילים יותר משורה אחת או עמודה אחת.<h4>תא שמכיל שתי עמודות:</h4> <table border="1"> <tr> <th>שם</th> <th colspan="2">טלפון</th> </tr> <tr> <td>ביל גייטס</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>תא שמכיל שתי שורות:</h4> <table border="1"> <tr> <th>שם:</th> <td>ביל גייטס</td> </tr> <tr> <th rowspan="2">טלפון:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
דוגמה 7
כיצד להשתמש ב-cellpadding כדי ליצור יותר רווח בין תוכן של התא ומסגרתו<h4>ללא cellpadding:</h4> <table border="1"> <tr> <td>ראשונה</td> <td>שורה</td> </tr> <tr> <td>שניה</td> <td>שורה</td> </tr> </table> <h4>עם cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>ראשונה</td> <td>שורה</td> </tr> <tr> <td>שניה</td> <td>שורה</td> </tr> </table>
דוגמה 8
כיצד להשתמש ב-cellspacing כדי להגדיל מרחק בין התאים<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body style="direction:rtl; text-align:right;"> <h4>ללא cellspacing:</h4> <table border="1"> <tr> <td>ראשונה</td> <td>שורה</td> </tr> <tr> <td>שניה</td> <td>שורה</td> </tr> </table> <h4>עם cellspacing:</h4> <table border="1" cellspacing="10"> <tr> <td>ראשונה</td> <td>שורה</td> </tr> <tr> <td>שניה</td> <td>שורה</td> </tr> </table> </body> </html>
דוגמה 9
כיצד להוסיף צבע רקע לטבלה:<h4>צבע רקע:</h4>
<table border="1" style="background-color:red">
<tr>
<td>ראשונה</td>
<td>שורה</td>
</tr>
<tr>
<td>שניה</td>
<td>שורה</td>
</tr>
</table>
<h4>תמונת רקע:</h4>
<table border="1" style="background-image:url('http://xhtml.co.il/images/13-red-snapper-665.gif'); color:#fff;">
<tr>
<td>ראשונה</td>
<td>שורה</td>
</tr>
<tr>
<td>שניה</td>
<td>שורה</td>
</tr>
</table>דוגמה 10
כיצד להשתמש בתכונה "frame" כדי לשלוט על הגבולות סביב הטבלה.<p>טבלה עם frame="box":</p>
<table frame="box">
<tr>
<th>חודש</th>
<th>חסכון</th>
</tr>
<tr>
<td>ינואר</td>
<td>$100</td>
</tr>
</table>
<p>טבלה עם frame="above":</p>
<table frame="above">
<tr>
<th>חודש</th>
<th>חסכון</th>
</tr>
<tr>
<td>ינואר</td>
<td>$100</td>
</tr>
</table>
<p>טבלה עם frame="below":</p>
<table frame="below">
<tr>
<th>חודש</th>
<th>חסכון</th>
</tr>
<tr>
<td>ינואר</td>
<td>$100</td>
</tr>
</table>
<p>טבלה עם frame="hsides":</p>
<table frame="hsides">
<tr>
<th>חודש</th>
<th>חסכון</th>
</tr>
<tr>
<td>ינואר</td>
<td>$100</td>
</tr>
</table>
<p>טבלה עם frame="vsides":</p>
<table frame="vsides">
<tr>
<th>חודש</th>
<th>חסכון</th>
</tr>
<tr>
<td>ינואר</td>
<td>$100</td>
</tr>
</table>האם מידע זה היה מועיל?
