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

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

ניווט

הפרק הקודם:
תגים מתקדמים של טבלאות

כל המאפיינים של טבלאות
תרגילים

הפרק הבא:
סיכום טבלאות

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