המדריך הזה נכתב מסיבה אחת פשוטה,הרבה אנשים מסתבכים עם טבלאות בלי סיבה,במדריך הזה תבינו את הבסיס ומעבר אליו בעבודה עם טבלאות.קודם כול למה נועדו טבלאות
בראש ובראשונה לעשות סדר באתר שלנו,שזה אומר לפרוס את האתר בצורה סימטרית ותואמת לכול הרזולוציות.
בואו קודם כול נעבור על המבנה הבסיסי של טבלה.
<table> <tr> <td>Rotter.Net</td> </tr> </table>
|
1.הטבלה מורכבת משורות ותאים בכול שורה:
התגית-table מתחילה טבלה חדשה
התגית-tr מתחילה שורה חדשה בטבלה.
התגית-td יוצרת תא חדש בתוך השורה.
המאפיינים של התגית Tabel הבסיסיים שאתם צריכים לדעת זה
width-קובע את הרוחב של הטבלה לעבוד תמיד באחוזים.
cellpadding-המרווח הפנימי של התוכן בטבלה.(מקבלת ערך מספרי)
cellspacing-מרווח מתא לתא ושורה משורה.(מקבלת ערך מספרי)
style=למי שעובד בשיטת Inline בCSS
align
_
right-מיישרת את הטבלה לצד ימין של הדף
center-מיישרת את הטבלה למרכז הדף
left-מיישרת את הטבלה לצד שמאל של הדף
___
class-מי שעובד עם CSS כעיקרון זה אמור ליהיות מוכר לו
id-מזהה לטבלה(אפשרות לשלוט על הטבלה עם CSS דרכו ועם JS).
border=קביעת הגבול לטבלה שוב מי שמתעסק בCSS זה לא בשבילו.
זה בכללי המאפיינים שטבלה יכולה לקבל.
נעבוד לתגית td (שימו לב שדילגתי על התגית tr כי אני אישית לא נותן לה שום מאפיין רק אם אני עובד עם JS וdeleteRow,insertRow,createCaption... אז יש סיבה לתת לה id)
התגית td מקבלת את המאפיינים הבאים
style=למי שעובד עם CSS בשיטת Inline לא מומלץ לדעתי,צריך לעבוד מסודר ליצור קובץ CSS לתת קלאסים שצריך להשתמש בפאסודו קלאס שצריך,כי אחר כך נוצר בלאגן לעבור תגית תגית ולראות איפה טעינו בסטייל באתרים גדולים. )
width=רוחב התא בטבלה,פה צריך לדעת לוגיקה פשוטה
אם נתתם לטבלה שלכם רוחב של 500 פיקסל ולתא שלכם נתתם רוחב של 100 אחוז זה לא אומר שהתא ייפרס על כול הדף אלא
100 אחוז מ500 פיקסל משמע 500 פיקסל.
height=גובה התא,שימו לב שבמאפיינים של טבלה לא כתבתי height כי זה לא קיים לפי התקן XHTML .
valign(vertical align)=המיקום הוורטיקלי(לא מצאתי לזה מילה בעברית אולי אנכי אבל לא בטוח) של הטקסט בתא זאת אומרת
top-מיקום הטקסט יהיה בראש התא
middle-מיקום הטקסט יהיה באמצע בתא
bottom-מיקום הטקסט יהיה בתחתית התא
סיימנו עם השטויות בוא נגיע לדברים קצת יותר מורכבים שאנשים נוטשים טבלאות בגללם
________
colspan
נגיד ויצרתם שורה בטבלה שבתוכה יש תא אחד שאתם רוצים שיהיה לאורך 2 תאים בשורה מתחתיו
<table> <tr> <td colspan="2">Rotter.Net</td> </tr> <tr> <td>dsadasdas</td> <td>dasdasdas</td> </tr> </table>
|
פשוט נכון?
נעבור לrowspan
נגיד ויצרתם תא בטבלה ואתם רוצים שהוא ייתפוס 6 שורות לאורך
<table border="1"> <tr> <td rowspan="6">Rotter.Net</td> <td>dsadasdas</td> </tr> <tr> <td>dasdasdas</td> </tr> <tr> <td>dasdasdas</td> </tr> <tr> <td>dasdasdas</td> </tr> <tr> <td>dasdasdas</td> </tr> <tr> <td>dasdasdas</td> </tr> </table>
|
הכי פשוט שבעולם.
השורה הבאה היא בשביל שני וגם בשבילכם
אגב המדריך הזה לא בא להגיד לכם להשתמש בטבלאות הדרך התקנית והנכונה לפרוס את האתר היא שימוש בdiv.
תהנו ובהצלחה בקרוב עוד שורה של מדריכים
אם פיספסתי משהו זאת השעה סליחה ותתקנו אם יש מה לתקן