ABA


"|HTML| מדריך לעבודה עם טבלאות"
גירסת הדפסה        
קבוצות דיון בניית אתרים נושא #13121 מנהל    סגן המנהל    מפקח   Winner    צל"ש   מומחה  
אשכול מספר 13121
akoka

דרג אמינות חבר זה
   04:48   24.10.07   
אל הפורום  
  |HTML| מדריך לעבודה עם טבלאות  
 
   ערכתי לאחרונה בתאריך 24.10.07 בשעה 04:54 בברכה, akoka
 
המדריך הזה נכתב מסיבה אחת פשוטה,הרבה אנשים מסתבכים עם טבלאות בלי סיבה,במדריך הזה תבינו את הבסיס ומעבר אליו בעבודה עם טבלאות.

קודם כול למה נועדו טבלאות

בראש ובראשונה לעשות סדר באתר שלנו,שזה אומר לפרוס את האתר בצורה סימטרית ותואמת לכול הרזולוציות.

בואו קודם כול נעבור על המבנה הבסיסי של טבלה.


<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.

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


                                שתף        
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

  האשכול     מחבר     תאריך כתיבה     מספר  
  תודה רבה אחינו !! code_blue  24.10.07 07:14 1
  תודה רבה יא מלך :) asco88  24.10.07 22:48 2
  יפה, כל הכבוד... ותודה :) Tom_l  24.10.07 22:50 3
  תודה רבה Cool Man 27.10.07 03:14 4

       
code_blue  לחץ כאן להצגת דירוג המשתמש
חבר מתאריך 5.7.06
21280 הודעות, 7 פידבק, 14 נקודות
   07:14   24.10.07   
אל הפורום  
  1. תודה רבה אחינו !!  
בתגובה להודעה מספר 0
 
   ממש תודה


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
asco88 
חבר מתאריך 17.6.04
26757 הודעות, דרג אמינות חבר זה
   22:48   24.10.07   
אל הפורום  
  2. תודה רבה יא מלך :)  
בתגובה להודעה מספר 0
 


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
Tom_l 
חבר מתאריך 1.1.10
1696 הודעות, דרג אמינות חבר זה
   22:50   24.10.07   
אל הפורום  
  3. יפה, כל הכבוד... ותודה :)  
בתגובה להודעה מספר 0
 
  


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
Cool Man

דרג אמינות חבר זה
   03:14   27.10.07   
אל הפורום  
  4. תודה רבה  
בתגובה להודעה מספר 0
 
  


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

תגובה מהירה  למכתב מספר: 
 
___________________________________________________________________

___________________________________________________________________
למנהלים:  נעל | תייק בארכיון | מחק | העבר לפורום אחר | מחק תגובות | עגן אשכול
       



© כל הזכויות שמורות ל-רוטר.נט בע"מ rotter.net