Get Adobe Flash player
דף הבית טבלאות תכונות הטבלה

האתר של רפאלי - בניית טבלאות, HTML

תג <table>

כאמור, התג המצהיר על הקמת הטבלה הוא התג <table>. תכונות תג זה בצירוף תכונות תגי התא, מאפשרות שליטה מלאה על מבנה הטבלה וצורתה.

יישור הטבלה - align

כתיבת מלל, הוספת תמונה או כל אלמנט אלמנט שייכתבו אחרי תג הטבלה, תציב אותם מתחתיה. אולם, הוספת התכונה align לתג, מיישרת את הטבלה לימין או לשמאל וגורמת לטקסט לגלוש סביבו.

שימוש ב align="center", יציב את הטבלה במרכז האלמנט בו היא נמצאת. אם היא בתוך ה body, היא תתפוס את אמצע השורה במסך. אם באמצע תא של טבלת אב - היא תתיצב במרכז רוחב התא.

חשוב: התכונה align הוכרזה ע"י W3C כעומדת להתבטל. ממומלץ לכן לעבוד באחת מהטכניקות הבאות:

יישור למרכז: הקף את הטבלה בתג <div align="center">. סגירת התג, תעשה כמובן מתחת לסגירת ה </table>.

גלישת טקסט: תכונת הגלישה תעשה ע"י המאפיין float של CSS. בדוגמא הבאה, הטבלה תיצמד לימין והטקסט יגלוש משמאלה:

<table style="float:right;">
 שוליים פנימיים ובין התאים

cellpadding - תכונה הקובעת את גודל השוליים שבתוך התא. היחידות הן פיקסלים, וברירת המחדל היא 1.

cellspacing - תכונה הקובעת את גודל המרווח שבין התאים. היחידות הן פיקסלים, וברירת המחדל היא 1.

לפניכם שתי דוגמאות. בדוגמא הראשונה המרווח בין התאים היא "5" והשוליים הפנימיים - 0, בשנייה המצב הפוך: המרווח הפנימי הוא "5" ובים התאים - 0.

דוגמא 1:

 

<div align="center">
   <table border="1" width="300" cellspacing="5" cellpadding="0">
      <tr>
           <td>שוליים פנימיים: 0px     מרווח בין התאים: 5px </td>  <td>&nbsp </td>
      </tr>
      <tr>
          <td>&nbsp</td>  <td>&nbsp</td>
      </tr>
    </table>
</div> 

שוליים פנימיים: 0px
מרווח בין התאים: 5px

 

דוגמא 2:

<div align="center">
   <table border="1" width="300" cellspacing="0" cellpadding="5">
      <tr>
           <td>שוליים פנימיים: 0px     מרווח בין התאים: 5px</td>  <td>&nbsp</td>
      </tr>
      <tr>
          <td>&nbsp</td>  <td>&nbsp</td>
      </tr>
    </table>
</div>

שוליים פנימיים: 5px
מרווח בין התאים: 0px

תמונות וצבע רקע

התכונה background שימשה להוספת תמונת רקע לטבלה, אולם נכון להיום, תכונה זו אינה קיימת בתקן ואינה נתמכת ע"י חלק מהדפדפנים. רצוי ועדיף להוסיף תמונה לרקע הטבלה ו/או התא הבודד ע"י CSS באמצעות המאפיין background-image.

התכונה bgcolor - מיועדת לקביעת צבע הרקע של הטבלה. תכונה זו הוכרזה גם היא כעומדת להתבטל, והתמיכה בה בדפדפנים השונים אינה ודאית. רצוי לקבוע את צבעי הרקע של הטבלה ו/או התאים הבודדים ע"י CSS באמצעות המאפיין: background-color.

רוחב וגובה הטבלה

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

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

טבלה שמידותיה בפיקסלים נקראת טבלה בעלת רוחב קבוע. בטבלה כזו, מידותיה קבועות, ומספר המילים שבשורה ישאר קבוע. במסך שרוחבו צר ממידת רוחב הטבלה, תופיע גלגלת אופקית בתחתית הדף.

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

תא בודד - תג <td>

תא בתא מאופיין ע"י כמה תכונות עקרוניות:

  • תא הוא אזור עצמאי בדף. התכונות הניתנות לתא אינן עוברות אוטומטית לתאים הבאים.
  • תא הנשאר ללא תוכן,מוצג על המסך ללא מסגרת ונראה כ"חור". מקובל להכניס לתוך התא הגדרת מרווח (&nbsp), או תמונת שקופה בגודל פיקסל על פיקסל
  • תא יכול להכיל כל תוכן שהוא. החל ממילה בודדת וכלה במקטע תוכן מלא הכולל טקסטים, תמונות, קטעי וידאו וכו'.

התג <td> עצמו מכיל כמה תכונות המשפיעות על התא כולו:

יישור הטקסט

align - יישור הטקסט לימין, לשמאל, למרכז או דו-צדדי

valign - יישור אנכי של תוכן התא. ברירת המחדל היא באמצע גובה התא (middle) והערכים האחרים הם top, bottom

מידות התא

מידות תא בודד אינן עומדות בפני עצמן. רוחב תא משפיע ישירות על התאים שבעמודה כולה, והגובה - על התאים שבשורה. אם נותנים מידות סותרות, המידה הגבוהה יותר היא הקובעת.

width - רוחב התא בפיקסלים או באחוזים. המידה באחוזים היא יחסית לרוחב הטבלה כולה.

height - גובה התא בפיקסלים או באחוזים. המידה באחוזים היא יחסית לגובה הטבלה כולה.

צבע רקע

התכונה bgcolor - מיועדת לקביעת צבע הרקע של הטבלה. תכונה זו הוכרזה כעומדת להתבטל, והתמיכה בה בדפדפנים השונים אינה ודאית. רצוי לקבוע את צבעי הרקע של הטבלה ו/או התאים הבודדים ע"י CSS באמצעות המאפיין: background-color

תמיכה בנגישות - תוכנות הקראה

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

תכונות בנוסף לאלו, ות למטרתוכן מלא של התמלא תא, ובכל תא שורה.

header - יוצר את הקשר בין התא אל כותרת העמודה בה הוא נמצא. ערך התכונה הוא שם כותרת העמודה (התא העליון בעמודה). תוכנת ההקראה יודעת להקריא את תוכן התא בהתייחס לשם העמודה.

scope - יוצרת את הקשר שבין תוכן התא לכותרת השורה. ערך התכונה הוא שם כותרת השורה (התא הימני או השמאלי ביותר בתא). תוכנת ההקראה יודעת להקריא את תוכן התא בהתייחס לכותרת השורה.

מסגרות (border)

עובי המסגרת

הוספת התכונה border=1 בתג הפתיחה, מציגה מסגרת סביב הטבלה ובין התאים.

שינוי עובי המסגרת החיצוני, יעשה ע"י מתן ערך למשל: border="5". הערך יעבה את המסגרת החיצונית בלבד. קווי הרשת הפנימיים יישארו בגודל פיקסל 1 תמיד.

צבע המסגרת

תכונת bordercolor מוסיפה צבע לגבול.

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

bordercolorlight - קובע את צבע ה"צל" של תלת המימד (הצד עליון והשמאלי).

bordercolordark - אותו אפקט אך צובע את הצדדים ההפוכים.

רבעון ראשוןרבעון שנירבעון שלישירבעון רביעי

12% רווח

2% הפסד

5% הפסד

8% רווח

11% רווח

2% רווח

3% הפסד

5% רווח

חלקי המסגרת

תכונת frame מאפשרת איזה מצידי הטבלה יוקף במסגרת. מאפייני התכונה הם:

frame="void" - ללא מסגרת חיצונית
frame="box" - מסגרת חיצונית בלבד
frame="above" - יצור קו עליון בלבד
frame="below" - יצור קו תחתון בלבד
frame="lhs" - יצור קו שמאלי בלבד (LHS: Left Hand Side)
frame="rhs" - יצור קו ימני בלבד(Right Hand Side)
frame="vsides" - יצור את שני הקוים האנכיים (Vertical Sides)
frame="hsides" - יצור את שני הקוים האופקיים (Horizontal)

התג <caption>

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

את התג מכניסים במקום כלשהו בין תג הפתיחה של ה table לבין סיומו.

תחביר התג הוא:

<table>
<caption>
טבלה 1 </caption>

מיקום ברירת המחדל של הכותרת הוא מעל הטבלה ובמרכזה. התכונה align מאפשרת הצבתה במיקומים נוספים:

 

align="left" -  הכותרת מוצבת מעל הטבלה אך בצד שמאל

 align="right" -  הכותרת מוצבת מעל הטבלה אך בצד ימין

 align="bottom" -  הכותרת מוצבת מתחת לטבלה ובמרכז


הערה חשובה: התכונה align הוכרזה כעומדת להתבטל, ועל כן עדיף לעבוד בהגדרות CSS המאפשרות שילוב של יישור אופקי ואנכי:

המאפיין caption-side בעל שני ערכים top (ברירת המחדל) או bottom

המאפיין text-align מקבל את הערכים right ו-left

הקבצת עיצובים

תגי הטבלה מאפשרים קביעת יישור משותפת לאזורים שלמים. התג פותח אזור בטבלה שבו כל התאים יקבלו עיצוב אחיד. לאחר סגירתו ניתן לפתוח את התג בשנית עם הוראות יישור שונות.בנוסף לתגים אלו, ניתן להוסיף תג שיקבע את יישור השורה הראשונה. לעומתו, התגיקבע את היישור לשורה הראשונה, אך יציגה כשורה אחרונה!!

 

תרגיל:

צור קובץ HTML וקרא לו Tables.htm

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

  • בנה טבלה בסיסית בת שתי שורות ושני תאים וללא הגדרת מסגרת border.
  • הוסף לתג הטבלה את התכונה border עם הערך "1" בחן את השינוי.
  • שנה את ערך המסגרת וראה את התוצאה.
  • שנה את רוחב הטבלה ע"י תכונת width.
  • שנה את רוחב העמודה השמאלית.
  • קבע את יישור הטבלה לימין ולשמאל עם גלישת טקסט חיצוני לטבלה ואחר כך ללא גלישה. סיים ביישור למרכז.
  • הוסף עמודה ושתי שורות, וצור מיזוג תאים אופקי ומיזוג תאים אנכי.
  • שנה את המרווח שבין התאים cellspacing לגודל 20 ובחן את התוצאה.
  • החזר את המצב לקדמותו, ושנה את המרווח שבין התא והטקסט cellpadding לגודל 20 ובחן את התוצאה.
  • קבע צבעי רקע לטבלה כולה, אחר כך לשורה מסוימת ולבסוף לתא בודד.
  • הוסף תמונה לאחד התאים.
  • הוסף טקסט ארוך לתמונה.
  • מנע גלישת טקסט. ובחן את השינוי
  • שלוט על צבעי המסגרת. וקבע איזה מקווי המסגרת יראה ואיזה לא (תכונת frame).
לרשותך קובץ דוגמא העושה שמוש בכל התגים ורוב התכונות.

 

אל השיעור הקודם