מדריך שגרירים לבניית אתרים

עיצוב טבלאות

נמשיך עוד קצת עם טבלאות לפני שנעבור לנושא הבא.

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

מאפיינים נוספים של טבלאות

את שני המאפיינים הבאים ניתן לרשום בתוך כל אחת משלוש הרמות של הטבלה, אבל אם רוצים את האפקט של הצמדת התוכן של הטבלה לצד מסוים, נסתפק בשני התגים הפנימיים יותר: tr, td. אם נרשום אותם בתג של ה-table, נקבל את אותו האפקט שמקבלים בתמונה: גלישת טקסט סביב הטבלה.

align=" "
קובע לאיזה צד "יידבק" התוכן של הטבלה (או הטבלה עצמה), על הציר האופקי. האפשרויות: center, right, left.

<table border="1" width="490" >
<tr align="left">
   <td>
    מה זה?
  </td>
  <td>
    אנגלית?
  </td>
</tr>
</table>
<p>

שימו לב איך התוכן של הטבלה נדבק לצד שמאל:

מה זה? אנגלית?

אם נרצה שרק תא אחד יידבק לשמאל או לאמצע, נציין זאת בתוך תג ה-td שלו:

עכשיו רק התא השני ימורכז:

מה זה? מרכז?

valign=" "
קובע את גובה הטקסט בתאים: האם הוא יהיה בראש התא, במרכזו, או בתחתית? האפשרויות: top, center, bottom.

<table border="1">
<tr>
   <td>
    כאן יש טקסט <br> שתופס כמה <br> שורות
  </td>
  <td valign="bottom">
    ואני בכל זאת למטה!
  </td>
</tr>
</table>
<p>

במקום שהתא שיש בו פחות תוכן יהיה מלא רק למעלה, התוכן שלו יהיה דווקא למטה:

כאן יש טקסט
שתופס כמה
שורות ואני בכל זאת למטה!

שני התגים הבאים יופיעו רק בתוך התג <td>, כיוון שהם מתייחסים ליחס בין התאים.

colspan=" "
מציין על פני כמה עמודות מתפרש תא מסוים. הערך יהיה תמיד מספר.

התא התחתון כפול:

תא רגיל תא רגיל

תא כפול!

rowspan=" "
מציין על פני כמה שורות מתפרש תא מסוים. גם כאן, הערך יהיה מספר.

התא השמאלי כפול:

תא רגיל תא כפול!

תא רגיל

למעבר לנושא הבא - טפסים - לחצו כאן.

חזרה לדף html הראשי...