טבלאות (Tables) – מתי כן משתמשים בהן?

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

עכשיו, אם זה כל כך רע, אז למה יש אותם?

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

אז מתי כן אנחנו יכולים להשתמש בטבלאות?

אנחנו יכולים להשתמש בטבלאות בשני מקרים הבאים:

1. ברגע שאנו רוצים להציג מידע מספרי כמו לשמל אחוז מניות לפי שנים וסוגי מניות, מידע כספי ותנועות בחשבון הבנק למשל, רשימת לקוחות וכו'
2. בעת בניית ניוזלטרים ומיילרים. כשבונים ניוזלטר מעוצב מסודר, חובה לבנות אותה בטבלאות כדי שהוא יתקבל בצורה תקינה במספר רב של ספקיות השונות כמו Gmail, תוכנות כמו outlook, Airmail ועוד.

2 דוגמאות אקראיות של שימוש בטבלאות?

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

Css במקום טבלאות

טוב, יש פיתרון ליצירת טבלאות באמצעות Css וזה בעזרת מאפיין Display.
לצורך דוגמה ניתן להגדיר class בצורה הבאה:

1. .table { display:table; }
2. .table-row { display:table-row; }
3. .table-cell { display:table-cell; }

איפה הבעיה?

בדפדפן האהוב עלינו, אינטרנט אקספלורר זה לא כל כך עובד. גרסאות ישנות כמו 7, 8, 9 לא עובדים כמו שצריך עם המאפיין display:table. אנחנו עוד יכולים להתעלם מ IE7 כי הוא כבר עבר מעולמנו, אבל לא יכולים בינתיים להתעלם לגמרי מ-8 ובטח לא מ IE9 שיש לו בעיות/באג/תקלה עם המאפיין. כמו תמיד, מייקרוספט יושנת בעמידה אבל לא ניתן לעשות הרבה כרגע.

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