לדלג לתוכן

HTML/טבלאות/מאפיינים

מתוך ויקיספר, אוסף הספרים והמדריכים החופשי

מאפיינים של table

[עריכה]

מאפיינים מוכרים (תזכורת)

[עריכה]
  • width - מאפיין מסוג אורך: מגדיר את רוחב הטבלה בפיקסלים או באחוזים מהאלמנט המכיל בעזרת סימן % בסוף המספר.
  • border - מאפיין מסוג פיקסל מגדיר את עובי המסגרת בפיקסלים. אין צורך לציין 'px'. רק מספר. border="0" נותן טבלה ללא מסגרת וקווים מפרידים. חובה להשתמש בו כאשר משתמשים במאפיינים frame ו- rules שמיד נלמד.
  • summary - ערכו הוא טקסט שמתאר את הטבלה, והמסקנות ממנה, לשימוש על-ידי דפדפנים לא ויזואליים ומנועי חיפוש.

frame

[עריכה]

מתאר את סוג המסגרת שמקיפה את הטבלה. ניתן לבחור אחת מבין האפשרויות הבאות:

  • void - ללא מסגרת מסביב לטבלה.
  • above - קו מסגרת רק מעל הטבלה.
  • below - קו מסגרת רק מתחת לטבלה.
  • hsides - קו מסגרת מעל ומתחת לטבלה (h - אופקיים).
  • lhs - קו בצד השמאלי של הטבלה.
  • rhs - קו בצד הימני של הטבלה.
  • vsides - קו מסגרת משמאל ומימין לטבלה (v - אנכיים).
  • box - קופסה שמקיפה את כל הטבלה.
  • border - מסגרת שמקיפה את כל הטבלה (חפשו את ההבדלים...)

כאשר משתמשים ב-frame חובה להשתמש ב-border. על מנת להמחיש את ההבדלים נשתמש ב-border עבה - 6 פיקסלים.

לפניכם קטע הקוד שהשתמשנו בו כדי להציג כל טבלה. החליפו 'xxxxx' בערך המאפיין המתאים. על מנת להציג את הטבלאות זו לצד זו ולא אחת מתחת לשניה השתמשנו כאן ב-CSS אך הוא אינו הכרחי כדי להבין את הפרק.

<table border="6" frame="xxxxx">
  <caption>xxxxx</caption>
  <tr> <td>נסיון</td><td>נסיון</td> </tr>
  <tr> <td>נסיון</td><td>נסיון</td> </tr>
</table>


void
נסיוןנסיון
נסיוןנסיון
above
נסיוןנסיון
נסיוןנסיון
below
נסיוןנסיון
נסיוןנסיון
hsides
נסיוןנסיון
נסיוןנסיון
lhs
נסיוןנסיון
נסיוןנסיון
rhs
נסיוןנסיון
נסיוןנסיון
vsides
נסיוןנסיון
נסיוןנסיון
box
נסיוןנסיון
נסיוןנסיון
border
נסיוןנסיון
נסיוןנסיון


rules

[עריכה]

מתאר את סוג הקווים המחלקים (סרגלים) שחוצים את הטבלה. ניתן לבחור אחת מבין האפשרויות הבאות:

  • none - ללא קוים מפרידים בין התאים.
  • groups - הפרדה רק בין קבוצות של תאים שמקובצים על-ידי:colgroup, thead, tfoot ו- tbody.
  • rows - הפרדה רק בין שורות.
  • cols - הפרדה רק בין עמודות.
  • all - הפרדה בין כל התאים.

כאשר משתמשים ב-rules חובה להשתמש ב-border. על מנת להמחיש את ההבדלים נשתמש ב-border עבה - 6 פיקסלים.

לפניכם קטע הקוד שהשתמשנו בו כדי להציג כל טבלה. החליפו 'xxxxx' בערך המאפיין המתאים. על מנת להציג את הטבלאות זו לצד זו ולא אחת מתחת לשניה השתמשנו כאן ב-CSS אך הוא אינו הכרחי כדי להבין את הפרק.

<table border="3" rules="xxxxx" frame="border">
  <caption>xxxxx</caption>
  <tr> <td>נסיון</td><td>נסיון</td> </tr>
  <tr> <td>נסיון</td><td>נסיון</td> </tr>
</table>


none
נסיוןנסיון
נסיוןנסיון
groups
נסיוןנסיון
נסיוןנסיון
rows
נסיוןנסיון
נסיוןנסיון
cols
נסיוןנסיון
נסיוןנסיון
all
נסיוןנסיון
נסיוןנסיון


  • שימו לב של-rules יש השפעה גם על ה-frame!

cellpadding

[עריכה]

מאפיין זה קובע את הריווח בין שולי התא לטקסט שבתוכו. הוא מאפיין מסוג אורך הווה אומר: מספר פשוט מציין פיקסלים, מספר עם אחוזים מציין אחוזים מגודל האובייקט המכיל (במקרה שלנו - אלמנט body).

להלן דוגמת הקוד:

<table border="1" cellpadding = "xx" width="120"> <!-- רוחב טבלה אחיד - 120 פיקסלים -->
  <caption>xx</caption>
  <tr> <td>נסיון</td><td>נסיון</td> </tr>
  <tr> <td>נסיון</td><td>נסיון</td> </tr>
</table>


ללא cellpadding
נסיוןנסיון
נסיוןנסיון
cellpadding="1"
נסיוןנסיון
נסיוןנסיון
cellpadding="5"
נסיוןנסיון
נסיוןנסיון
cellpadding="1%"
נסיוןנסיון
נסיוןנסיון
cellpadding="5%"
נסיוןנסיון
נסיוןנסיון


cellspacing

[עריכה]

בדומה ל-cellpadding, המאפיין cellspacing קובע את הריווח בין תא לתא ובין תא למסגרת. הוא מאפיין מסוג אורך הווה אומר: מספר פשוט מציין פיקסלים, מספר עם אחוזים מציין אחוזים מגודל האובייקט המכיל (במקרה שלנו - אלמנט body).

להלן דוגמת הקוד:

<table border="1" cellspacing = "xx" width="120"> <!-- רוחב טבלה אחיד - 120 פיקסלים -->
  <caption>xx</caption>
  <tr> <td>נסיון</td><td>נסיון</td> </tr>
  <tr> <td>נסיון</td><td>נסיון</td> </tr>
</table>


ללא cellspacing
נסיוןנסיון
נסיוןנסיון
cellspacing ="1"
נסיוןנסיון
נסיוןנסיון
cellspacing ="5"
נסיוןנסיון
נסיוןנסיון
cellspacing ="2%"
נסיוןנסיון
נסיוןנסיון
cellspacing ="15%"
נסיוןנסיון
נסיוןנסיון


יישור של הטקסט בתוך הטבלה

[עריכה]
  • אפשרות זו עדיין קיימת ב-XHTML 1.0 STRICT אך ככל הנראה תפסיק להיתמך בעתיד. הפתרון: שימוש ב-CSS. ההמלצה בינתיים היא להמנע משימוש ולהעדיף CSS.

ל-td, tr, thead, tfoot, tbody, col & colgroup יש מאפיינים שדואגים ליישור הטקסט: align ו- valign שניהם מסוג רשימת ערכים. כמו כן יש להם עוד שני מאפיינים char ו- charoff שמשתמשים בהם במקרה מיוחד. align הוא המאפיין האחראי על היישור האופקי של הטקסט בתוך התא. ל-align יש את הערכים האפשריים הבאים:

  • left - יישור לשמאל,
  • center - מרכוז הטקסט
  • right - יישור לימין
  • justify - מתיחת הטקסט לכל רוחב העמודה
  • char - זהו ערך מיוחד עליו נרחיב בסוף החלק.

valign הוא המאפיין האחראי על היישור האנכי של הטקסט בתוך התא. יש לו את הערכים האפשריים הבאים:

  • top - צמוד לראש התא.
  • middle - באמצע התא.
  • bottom - בתחתית התא.
  • baseline - צריך לנסות...

את כל מאפייני היישור ניתן לתת ל-td אך גם ל-tr, וכך הם יהיו תקפים (יעברו בירושה) מאלמנט האב tr לכל האלמנטים הבנים td, וכמו כן לשאר האלמנטים (col, colgroup, thead, tfoot, tbody) שיעבירו בירושה את המאפיינים האלו לבנים שלהם. יוצאים מן הכלל כאן הם col ו- colgroup שיעבירו את המאפיינים לעמודות הרלוונטיות, למרות שהתאים בעמודות אלו, אינן ממש צאצאים שלהם.

דוגמאות:

<table border = "1" width="80%">
  <tr>
    <th>/</th>
    <th> right </th>
    <th> center </th>
    <th> left </th>
    <th> justify </th>
  </tr>
  <tr valign="top">
    <th>top <br /> <br /> </th>
    <td align="right">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
    <td align="center">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
    <td align="left">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
    <td align="justify">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
  </tr>
  <tr valign="middle">
    <th>middle <br /> <br /> </th>
    <td align="right">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
    <td align="center">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
    <td align="left">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
    <td align="justify">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
  </tr>
  <tr valign="bottom">
    <th>bottom <br /> <br /> </th>
    <td align="right">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
    <td align="center">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
    <td align="left">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
    <td align="justify">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
  </tr>
  <tr valign="baseline">
    <th>baseline <br /> <br /> </th>
    <td align="right">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
    <td align="center">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
    <td align="left">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
    <td align="justify">נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון</td>
  </tr>
</table>


פלט:

/ right center left justify
top
 
 
 
נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון
middle
 
 
 
נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון
bottom
 
 
 
נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון
baseline
 
 
 
נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון נסיון


ניתן לתת ל-align את הערך char - יישור לפי תו. במקרה הזה צריך להשתמש במאפיין char, ובו לתת את התו על פיו מיישרים את התא. כך ניתן למשל ליישר את כל המספרים על פי הנקודה העשרונית. ניתן להשתמש גם במאפיין charoff שקובע את מספר תווי ההיסט מהתו במאפיין char.

דוגמה:

<table border = "1" width="15%">
  <tr align="char" char="." charoff="50%">
    <td>123456.123456</td>
  </tr>
  <tr align="char" char="." charoff="50%">
    <td>1.123456</td>
  </tr>
  <tr align="char" char="." charoff="50%">
    <td>123456.1</td>
  </tr>
</table>


פלט:

123456.123456
1.123456
123456.1


לסיכום מאפייני היישור הם: valign, align, char, charoff כאשר ב-char חובה להשתמש כאשר align="char" ואסור כאשר ל-align יש כל ערך אחר. אם align="char" ומשתמשים גם במאפיין char מותר להשתמש במאפיין charoff על מנת לקבוע את ההיסט מהשוליים אליו התו ייושר.

מאפיינים של tr, thead, tfoot, tbody

[עריכה]

מלבד המאפיינים הכלליים (מאפייני הליבה, השפה והאירוע) שרובם משותפים לכל האלמנטים ב-HTML, עבור ארבעת האלמנטים הנ"ל ניתן לציין רק את מאפייני היישור עליהם למדנו זה עתה. thead, tfoot ו- tbody יורישו את המאפיינים האלה לאלמנטים tr שהם מכילים ואלמנטים מסוג tr יורישו את המאפיינים האלה לאלמנטים td שהם מכילים. אין לארבעת האלמנטים מאפיינים מיוחדים נוספים.

מאפיינים של col, colgroup

[עריכה]
  • מאפיינים כלליים (ליבה, אירוע ושפה).
  • מאפייני יישור של תא (valign, align, char, charoff).

את המאפיינים האלו הם יורישו לתאים שנכנסים בעמודות שהם מייצגים. כמו כן colgroup יוריש את המאפיינים לבנים שלו מסוג col.

לאלמנטים אלו עוד שני מאפיינים: span ו- width.

span קובע על פני כמה עמודות משתרע האלמנט כמו שמוסבר בפרק תגים מתקדמים.

width קובע את רוחב העמודה, כמו ב-table. (ניתן באחוזים מרוחב אלמנט האב (table, colgroup), או בפיקסלים).

מלבד שני המאפיינים האחרונים, כל המאפיינים זהים לאלו של tbody, thead, tfoot ו- tr.

מאפיינים של td ו- th

[עריכה]
  • מאפיינים כלליים (ליבה, אירוע ושפה).
  • מאפייני יישור של תא (valign, align, char, charoff).

המאפיינים colspan ו- rowspan - מציינים את פרישת התא על פני התאים שמתחתיו ואחריו בשורה על מנת ליצוג מיזוג בין תאים. הפעלתם מוסברת בפרק טבלאות מסובכות.

  • abbr - ל-abbr נותנים ערך טקסט והוא קיצור/כותרת לתוכן התא. מיועד להגברת הנגישות למשתמשים מיוחדים.
  • axis - דרך לקטלג תאים. הערך צריך להיות רשימה מופרדת בפסיקים של קטגוריות. כך יכול המשתמש לשאול את הדפדפן שאלות כמו 'כמה כסף בזבזתי במקום א' בתאריך ב') והדפדפן ינסה להוציא את הנתונים שלכותרות שלהם יש קטגוריות מקום ו- תאריך.
  • scope - ערכו אחד מארבעת הערכים הבאים: col, row, colgroup, rowgroup. משמעו - תא זה הוא כותרת שתקפה לתאים הבאים בעמודה/שורה/קבוצת עמודות (colgroup)/קבוצת שורות (thead,tbody,tfoot) בהתאם לערך הנבחר.

יש צורך להשתמש בשלושת המאפיינים האחרונים בעיקר בתאי כותרת (th) או בתאים רגילים (td) שמשמשים ככותרות בפועל.

  • headers - ערכו של מאפיין זה צריך להיות רשימת ערכים מופרדת ברווחים כשכל ערך הוא ID של תא כותרת. כך מוגדר עבור תא מסויים אילו כותרות רלוונטיות עבורו. דפדפנים לא ויזואליים יוכלו לדעת על ידי שימוש במאפיין זה לאילו כותרות שייך התא.

caption

[עריכה]

לאלמנט זה אין מאפיינים מיוחדים. רק המאפיינים הכלליים (ליבה, אירוע ושפה) רלוונטיים עבורו.

ניווט

[עריכה]
הפרק הקודם:
תגים מתקדמים של טבלאות
כל המאפיינים של טבלאות
תרגילים
הפרק הבא:
סיכום טבלאות


אלמנטים רלוונטים: