הנושא הזה שוחזר באין ספור פעמים במאמרים על בניית אתרים נכונה, על חסרונות הטבלאות וגם במאמרי seo, ובכולם נאמר בבירור מוחלט שלא מומלץ להשתמש בטבלאות. אך לרוב חסר הסבר למה או לפחות מתי נכון להשתמש בהן. ברור לגמרי ברור ששימוש בהן לצורך בניית אתר כמבנה יסוד, זו טעות. לפני שנגיע לנקודה מתי כן אנחנו רוצים להשתמש בטבלאות חייב לציין שאסור ולא מומלץ להשתמש בהן לצורך בניית מבנה (layout) או לצורכי עיצוב שלא כצורך. אתם לא רוצים ולא צריכים לבנות אתר בצורה כזאת. מובן גם את הצד הטכני, שזה קל יותר למתחילים במיוחד עם תוכנות עריכה כמו Dreamviewer שמאופשר להשתמש בטבלאות ולהזיז ולשנות גדלים בגרירה עם סמל של העבר במקום ליצור מבנה באמצעות Css באופן ידני, אבל זה רחוק ממה שצריך להיות ומה שנכון. טבלאות גורמות לדף להיות כבד יותר ומכאן הרינדור של הדף ארוך יחסית לאתר שבנוי ב-דיווים.
עכשיו, אם זה כל כך רע, אז למה יש אותם?
שאלה מצוינת שנשאלת הרבה פעמים. חשוב לציין שהשתמשו בטבלאות כשאינטרנט עוד היה בחיתוליו. זה היה נחשב לפתרון מעולה כדי לעצב דפי אינטרנט עד ש Css נכנס לתמונה ואז הכל השתנה (לטובה). יש המון בעיות שנובעות מבניה טבלאי של אתר כמו איטיות טעינה, קוד ארוך, חוסר גמישות ושינוי עיצובי, לא מומלץ למטרות קידום אתרים ופשוט זה לא נכון!
אז מתי כן אנחנו יכולים להשתמש בטבלאות?
אנחנו יכולים להשתמש בטבלאות בשני מקרים הבאים:
- ברגע שאנו רוצים להציג מידע מספרי כמו לשמל אחוז מניות לפי שנים וסוגי מניות, מידע כספי ותנועות בחשבון הבנק למשל, רשימת לקוחות וכו'
- בעת בניית ניוזלטרים ומיילרים. כשבונים ניוזלטר מעוצב מסודר, חובה לבנות אותה בטבלאות כדי שהוא יתקבל בצורה תקינה במספר רב של ספקיות השונות כמו Gmail, תוכנות כמו outlook, Airmail ועוד.
2 דוגמאות אקראיות של שימוש בטבלאות?
מערכת וורדפרס – רשימת משתמשים בפנל הניהול של וורדפרס בנוים בטבלאות כמו כן גם רשימת פוסטים עמודים וכו'.
עובר ושב של בנק לאומי – רשימת הוצאות והכנסות וכל מידע אחר שקשור לתנועה בחשבון ומספרים מוצגים בטבלאות.
Css במקום טבלאות
טוב, יש פיתרון ליצירת טבלאות באמצעות Css וזה בעזרת מאפיין Display.
לצורך דוגמה ניתן להגדיר class בצורה הבאה:
- .table { display:table; }
- .table-row { display:table-row; }
- .table-cell { display:table-cell; }
איפה הבעיה?
בדפדפן האהוב עלינו, אינטרנט אקספלורר זה לא כל כך עובד. גרסאות ישנות כמו 7, 8, 9 לא עובדים כמו שצריך עם המאפיין display:table. אנחנו עוד יכולים להתעלם מ IE7 כי הוא כבר עבר מעולמנו, אבל לא יכולים בינתיים להתעלם לגמרי מ-8 ובטח לא מ IE9 שיש לו בעיות/באג/תקלה עם המאפיין. כמו תמיד, מייקרוספט יושנת בעמידה אבל לא ניתן לעשות הרבה כרגע.
לסיכום: חשוב לזכור שטבלאות נועדו למטרה ספציפית. אין להשתמש בהם למטרת בניית אתרים כאבן דרך. מבנה האתר בשום פנים ואופן לא בונים בטבלאות.
היי
תודה
משהו שלא הבנתי. האם כשאני כותב בוורדפרס טבלאות (להצגת דברים) לא לעיצוב האם זה בסדר?
או האם להימנע כמה שיותר.
אני אחדד את השאלה: האם כאשר יש לי אפשרות להציג את הדברים בצורה כתובה או בטבלה לוותר על טבלה?
תודה
🙂
להימנע מטבלאות במידה והמידע הוא לא נועד להצגה טבלאית.
מה שאני מנסה לומר, שזה בסדר גמור להשתמש בטבלאות אבל רק כשצריך.
אם אתה מציג למשל מחירים של מוצרים ברשימה ומשקלם ועלות המשלוח ועוד כמה פרטים בצורה מחולקת כמו למשל בתוכנת Exel, אין בעיה להשתמש בה, אך אם מדובר במידע קצר שלא בהכרח צריך עבורה טבלא, אז לוותר עליה מכיוון שזה כעיקרון פוגע במהירות הטעינה של הדף ומכאן השלכות יכולות להיות אחרות.
על תשתמש בטבלאות להצגת מידע אינפורמטיבי כמו למשל חלוקת תוכן טקסטואלי או יצירת מבנה לחלוקת דף או עיצוב הדף. לא לזה טבלא נועדה.
דוגמה קצרה: להציג מניות צריך בטבלאות. אין דרך אחרת להציג מניות של בורסה בלי זה. אם היה לך אולי מגע לקובץ אקסל של מניות, היתה רואה איך החישובים ואחוזים מסודרים.
לכן, אם אתה יכול להמנע מיצירת טבלאות וזה לא דבר הכרחי, אז תוותר ותשתמש במשהו אחר, אם זה חד פעמי בעמוד, שזה מידע חשוב כמו מחירון או כל דבר אחר שהוא מספרי, אז תשתמש בטבלא.
תודה
🙂