טבלאות

נכתב ע"י מוטי קרניאל 20/1/2001 , עדכון אחרון מאי 2003

טבלא נועדה לארגן נתונים (טקסט, מספרים, תמונות) במרחב.

הגדרת טבלא

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

ההגדרה להתחלת טבלא היא תגית < table > ולסיום תגית < table / >
הגדרת שורה <tr> ובסופה <tr/>
הגדרת עמודה <td> ובסיום <td/>.

על מנת לבנות טבלא בת מספר עמודות (בשורה אחת) יש להוסיף תגיות TD כמספר העמודות (תאים) הרצוי.

דוגמא לטבלא בת 4 עמודות:

כך היא נראית: 1 2 3 4

זהו הקוד <table> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> </tr> </table>

על מנת לבנות טבלא בת מספר שורות (בעמודה אחת) יש להוסיף תגיות TR כמספר השורות הרצוי, ולכל TR יש להוסיף תגית TD.

דוגמא לטבלא בת 4 שורות:

כך היא נראית: 1 2 3 4

זהו הקוד <table> <tr> <td> 1 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td> 3 </td> </tr> <tr> <td> 4 </td> </tr> </table>

הטבלא לרוב תכלול מספר עמודות ומספר שורות,, כלומר בכל תגית TR יקוננו מספר תגיות TD

דוגמא לטבלא בת 3 עמודות ו3 שורות:

כך היא נראית: 1 4 7 2 5 8 3 6 9

זהו הקוד <table> <tr> <td> 1 </td> <td> 4 </td> <td> 7 </td> </tr> <tr> <td> 2 </td> <td> 5 </td> <td> 8 </td> </tr> <tr> <td> 3 </td> <td> 6 </td> <td> 9 </td> </tr> </table>

בכדי להחליט על מספר שונה של עמודות או שורות, יש להוסיף תגיות TR ו TD מתאימות

פרמטרים לתגיות TD ו TR          

TH - כותרת בתוך הטבלא

th היא תגית המשמשת לכותרות העמודות שבתוך הטבלא,  מוגדרת ע"י התגית TH ומסתיימת ע"י TH/.
נוצר תא ברוחב העמודה ובתוכו כתובה הכותרת ממורכזת ומודגשת ., (כברירת מחדל של הדפדפן ללא צורך בפעולה מצד הכותב).
תכונות התגית דומות לאלו של תג td.

TH מקבל את הפרמטרים הבאים:

TH ALIGN=LEFT | RIGHT |  CENTER | MIDDLE | BOTTOM
VALIGN=TOP | BOTTOM | MIDDLE

ואת כל שאר הפרמטרים של צבע, יישור, גודל וכו' המשמשים בתגיות TD ו TR
תא הכותרת מקבל פרמטרים אלו' knak : רוחב רצוי  <?=TH WIDTH>

פרמטרים לתג table

border=number

אפשר להחליט האם קווי הרשת של הטבלא יוצגו או לא, ומה יהיה עובי הקו.
הפקודה לכך היא border בתוך תגית הפתיחה < TABLE BORDER=? >< /TABLE > (במקום סימן שאלה יש לרשום מספר).
אם המספר הוא - 0 לא יוצגו קווי הטבלא ראה דוגמא
אם המספר הוא - 1 יוצגו קווי הטבלא ראה דוגמא
אם המספר הוא - 2 יוצגו קווי הטבלא, ויהיו קצת יותר עבים ראה דוגמא
אם המספר הוא - 50 יוצגו קווי הטבלא, והמסגרת תהייה עבה מאד ראה דוגמא

bordercolor=color  Bordercolorlight  Bordercolordark

 (חובה להשתמש יחד עם תכונת border)
ניתן לקבוע צבע למסגרת ע"י פקודת bordercolor למשל < Table Border=3 Bordercolor=red >
תתקבל טבלא שרוחב קווי הטבלא הוא 3, וצבעם הוא אדום

דוגמא לטבלא עם גבול צבעוני:

כך היא נראית: ש נ ב ג ק כ ע י ן

זהו הקוד <TABLE BORDER bordercolor=green> <TR> <TD>ש</TD> <TD>נ</TD> <TD>ב</TD> </TR> <TR> <TD>ג</TD> <TD>ק</TD> <TD>כ</TD> </TR> <TR> <TD>ע</TD> <TD>י</TD> <TD>ן</TD> </TR> </TABLE>

ניתן ליצור תחושת תלת-מימד ע"י הפקודות Bordercolorlight ו/או Bordercolordark

שליטה על רוחב ואורך בטבלאות:

אם לא קובעים לטבלא רוחב, היא תתפרש אוטומטית על פני כל רוחב דף הדפדפן (כאילו והייתה מוגדרת כ 100%)
בעיה מתעוררת בעיקר כאשר רוחב הטבלא חורג מרוחב החלון, או כאשר רוצים ליצור טבלא צרה.

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

width=number / %

קביעת רוחב כולל לטבלא ע"י הפקודה width בצורה זו: <?=TABLE WIDTH>
? = רוחב רצוי (באחוזים או פיקסלים), עדיף באחוזים, כי יתאים לכל רזולוציה שיש לצופה
 

height=number / %

לקביעת גובה התא <td height=60>

מיקום הטבלה

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

יש לשם כך מספר דרכים: פקודות P ו div המכילות  את הטבלא וקובעות עבורה מבחוץ היכן להיות, או שימוש ב alighn
ניתן לעשות זאת ע"י פקודת P או div המקבלות את הפרמטרים הבאים:  left ,right ,center
למשל < p align=right>
עדיף להשתמש בתג הטבלא עצמו שהוא align

 align=left | right | center

דוגמא ליישור לשמאל:

<TABLE BORDER=1 align=left width="40%"> <TBODY> <TR> <TD><BR></TD> <TD><BR></TD> <TD><BR></TD> </TR> <TR> <TD><BR></TD> <TD><BR></TD> <TD><BR></TD> </TR> <TR> <TD><BR></TD> <TD><BR></TD> <TD><BR></TD> </TR> </TBODY> </TABLE>
 

דוגמא ליישור לימין

bgcolor= #rrggbb | color name

קובע את צבע הרקע לטבלה, אם לא נקבע - רקע הטבלה יהיה כצבעו של רקע הדף

 background= URL of image

להוספת תמונה שתוצג ברקע הטבלה כולה

nowrap

בטבלה המכילה פרמטר זה, חלון הדפדפן לא יהיה צר יותר מרוחב התא עצמו ובכך תמנע "שבירת" הטקסט המוצג בו.
<TABLE  align=center nowrap>

cellpadding=number

קובע מרווח בפיקסלים בין גבול התא לבין תוכן התא, אם אינו מוגדר - שווה ערכו ל 1
<TABLE  cellpadding=6 >

cellspacing=number

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

כיתובית -caption

זוהי הכותרת הכללית של הטבלא, המופיעה מעל הטבלא
להגדרת כיתובית יש להשתמש בתגית caption ולסיים ב caption/.
הכיתובית אינה חובה, ולמעשה רוב הטבלאות "מסתדרות" בלעדיה. ניתן להשתמש במאפיין align כדי לקבוע את המיקום בו תוצג הכיתובית, המאפיין יכול לקבל את הערכים TOP או BOTTOM

פרמטרים אפשריים:
הכותרת תוצג מעל הטבלה, ותוצמד לקצה הימני align=right
מעל הטבלה, בקצה השמאלי align=left
מעל הטבלה, במרכז align=center
מעל הטבלה, במרכז align=top
מתחת לטבלה, במרכז align=bottom
מתחת לטבלה, בצד ימין align=right valign=bottom
מתחת לטבלה, בצד שמאל align=left valign=bottom

frame=type

אם לא רוצים גבולות מלאים לטבלא, אלא רוצים לראות רק את חלק מקווי הטבלא, ניתן להשתמש בתגית  Frame בנוסף לתגית border
תגית frame=Box מציגה את כל הגבולות (שמאליים, ימניים, תחתונים ועליונים), (שווה ערך לפרמטר border=1),
הטבלא תיראה כך:

2	1
4	3

פרמטרים אפשריים לתגית  Frame :

Void לא רואים גבול חיצוני

שם	כתובת	טלפון
אבי רון	אי שם	123
אלי קופטר	כאן	145

Box מסגרת לכל הטבלה (שווה ערך לפרמטר border=1)
above רואים רק את הגבול העליון של כל שורה ושורה

שם	כתובת	טלפון
אבי רון	אי שם	123
אלי קופטר	כאן	145

Below רואים רק את הגבול התחתון של כל שורה ושורה

hsides רואים קווי גבול אופקיים (בלי הגבולות האנכיים).

עדכון (מאי 2003): תג זה הוחלף ע"י פקודות CSS מתאימות הנותנות אותו אפקט.

rules=type

rules=rows -.קובע כי לא יהיו קווים אנכיים בתוך הטבלא, הפקודה תיראה כך:
&lt;TABLE BORDER  rules=rows &gt;
rules=all - קובע כי לטבלה יהיו קווי גבול אנכיים ואופקיים (שווה ערך ל border=1)
rules=cols - .קובע כי בטבלה יוצגו הקווים האנכיים בלבד
&lt;TABLE BORDER  rules=cols &gt;
rules=groups - קובע בטבלה לא יוצגו קווי הפרדה אנכיים ואופקיים, אלא רק המתאר החיצוני.
&lt;TABLE BORDER  rules=groups &gt;
rules=none - .ללא קווי הפרדה אנכיים ואופקיים בתוך הטבלה (שווה ערך ל border=0)

עדכון (מאי 2003): תג זה הוחלף ע"י פקודות CSS הנותנות אותו אפקט (ראה דוגמאות בתג קודם).

מסגרות

מחולל מסגרות נחמד, היוצר עבורך את כל הדרוש:
http://framecodes.epolady.com/code.html

© moty karniel 2000-2005 

חזרה לדף הבית