דף הבית -> דף פירוט מדריכים
-> שיפור האתר - דף השיעורים
-> שיעור שלישי-טבלאות
 
שיפור האתר - שיעור שלישי
טבלאות

חתוך את הטבלאות שלך    השתמש בתכונת הרוחב    תכניס את הצורות שלך לטבלה

תכניס טבלאות  אל תסמוך על עורכי WYSIWYG    אף פעם אל תקנן טבלאות


מאת ג'ייסון קוק
בואו נכיר באמת: <LAYER > ו <DIV > זו אולי הדרך האידיאלית לסדר עמוד, אבל אתה
תאבד את כל החבר'ה עם גרסאות דפדפנים של .2 או .3 אם אתה רוצה פתרון פשרני לכל
הדפדפנים ולכל הפלטפורמות, אתה עדיין חייב לסדר את הדברים בטבלה.
לא שטבלאות זה דבר כל כך רע. רוב המעצבים לומדים לעצב עם סורג, כך שהכנסת דברים
לתוך טבלה צריכה להיות טבעית בשבילם. אנחנו גם אוהבים את הדואליות שלהן: טבלאות
יכולות גם להראות ארגון וגם להגיב לאלמנטים הלא צפויים בדף. להיות מעצב רשת אומר
להתמודד עם דברים לא צפויים ולמצוא פשרה בין העיצוב שלך וגמישות הגולש (הגולשים
צריכים שתהיה להם את האפשרות להגדיל גופנים למשל). לרוע המזל, טבלאות גם מגדילות את
הזמן שלוקח לעמוד לעלות, ולפעמים במידה ניכרת.
בגלל שדפדפנים צריכים להבין לחלוטין את מבנה הטבלה לפני שהם יכולים למשוך את התוכן
שלה, שום דבר לא יכול לעלות עד שרוב, אם לא כל, התוכן של הטבלה עולה. וככל שהטבלאות
גדלות, כך גדלה כמות האינפורמציה שזקוקה לעיבוד. במחשבים ישנים כל עבודת העיבוד הזו
לא עוברת בקלות, וזמן רב יכול לעבור לפני שהטבלה מבוצעת.
למרבה המזל, ישנן דרכים להימנע מבעיות הביצוע האלו.

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

השתמש בתכונת הרוחב
בכדי לוודא שהHTML שלך ידידותי למשתמש עד כמה שאפשר, תוודא שאתה משתמש
בתכונת הרוחב של תוויות ה<TABLE> וה -<TD> כמו שצריך. התכונה הזו מאפשרת לך
להגדיר את רוחב כל הטבלה כמו גם את רוחב כל תא שמרכיב את הטבלה. אם הדברים לא
מסתכמים יפה תבלבל את הדפדפן ותאט אותו. לכן תבדוק היטב שהמתמטיקה שלך עובדת - אם
רוחב התא הוא 100 תווים, ואז אתה דוחס לתוכו תמונה של 110 תווים, הטבלה תופיע
באופן זמני ואז תעלם בזמן שהיא מתאימה את עצמה מחדש לקבלת התמונה. אין צורך לומר,
התופעה הזו מעצבנת וגם איטית.

ראש העמוד עמוד ההפניות עמוד השיעורים תחילת הפיסקה



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

תכניס טבלאות:

  I
This a non-breaking line like
  this
  axis

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

  I
This a non-breaking line like
  this
  axis


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

ראש העמוד עמוד ההפניות עמוד השיעורים תחילת הפיסקה



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

.This is not that big a deal

קומפוזיצית שולחן השח הזו לא מערבת טבלאות בקן, אבל הסיבוך שלה אומר שזמן הביצוע
איטי.

             
             
this is        
  complex      
             
             
             

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

this is 
    EASY  
   
   
   
   
   
   
   

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


Branding
 

.nav






 

content content
content content
content content
content content
content content
content content
content content

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


Branding
 
align= left

.nav






 

content content
content content
content content
content content
content content
content content
content content

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

ראש העמוד עמוד ההפניות עמוד השיעורים תחילת הפיסקה