לומד לכתוב CSS פריסות יכולות להיות מסובכות, במיוחד אם אתה מכיר את השימוש בטבלאות ליצירת פריסות דפי אינטרנט מהודרות. אבל תוך כדי HTML5 מאפשר טבלאות לפריסה, זה לא רעיון טוב.
שולחנות אינם נגישים
דומה ל מנועי חיפוש, רוב קוראי המסך קוראים דפי אינטרנט בסדר שהם מציגים ב- HTML, וטבלאות יכולות להיות מאוד קשות לניתוח קוראי המסך. התוכן בפריסת הטבלה, למרות שהוא לינארי, לא תמיד הגיוני כשקוראים אותו משמאל לימין ומלמעלה למטה. בנוסף, עם טבלאות מקוננות, וטווחים שונים על תאי השולחן עלולים להקשות על העמוד.
זו הסיבה שה- מפרט HTML5 ממליץ נגד שולחנות לפריסה ומדוע HTML 4.01 אינו מאפשר זאת. דפי אינטרנט נגישים מאפשרים ליותר אנשים להשתמש בהם ומהווים סימן של מעצב מקצועי.
בעזרת CSS תוכלו להגדיר קטע כשייך בצד שמאל של הדף אך למקם אותו אחרון ב- HTML. ואז קוראי המסך ומנועי החיפוש כאחד יקראו קודם את החלקים החשובים (התוכן) ואת החלקים הפחות חשובים (ניווט) אחרונים.
שולחנות מסובכים
גם אם אתה יוצר טבלה עם עורך אתרים, דפי האינטרנט שלך עדיין יהיו מסובכים וקשים לתחזוקה. פרט לעיצובי דפי האינטרנט הפשוטים ביותר, רוב טבלאות הפריסה דורשות שימוש בהרבה תכונות ובטבלאות מקוננות.
בניית השולחן אולי נראית קלה בזמן שאתה עושה את זה, אבל ברגע שזה נעשה אתה צריך לשמור עליו. שישה חודשים בהמשך זה לא יכול להיות קל לזכור מדוע קיננתם את הטבלאות או כמה תאים היו ברצף וכן הלאה. שלא לדבר על זה, אם אתה שומר על דפי אינטרנט כחבר צוות, עליך להסביר לכל המעורבים כיצד הטבלאות עובדות או לצפות שייקח זמן נוסף כאשר הם צריכים לבצע שינויים.
CSS יכול להיות מורכב גם כן, אך הוא שומר על המצגת נפרדת מהתוכן ומקלה על התחזוקה הרבה יותר לטווח הארוך. בנוסף, עם פריסת CSS תוכלו לכתוב קובץ CSS אחד ולעצב את כל הדפים שלכם כך שייראו כך. ואז כאשר אתה רוצה לשנות את הפריסה של האתר שלך, אתה פשוט משנה קובץ CSS אחד, ואת כולו שינויים באתר - לא עובר יותר בכל עמוד אחד בכל פעם כדי לעדכן את הטבלאות כדי לעדכן את מַעֲרָך.
שולחנות אינם גמישים
אמנם ניתן ליצור פריסות טבלה בעלות רוחב אחוז, אך לעיתים קרובות טעינה איטית יותר ויכולה לשנות באופן דרמטי את מראה הפריסה שלך. אבל אם אתה משתמש ברוחבים שצוינו עבור הטבלאות שלך, בסופו של דבר אתה מקבל פריסה נוקשה מאוד שלא תיראה טוב על צגים בגודל שונה משלך.
יצירת פריסות גמישות שנראות טוב על צגים, דפדפנים ורזולוציות רבות היא קלה יחסית. למעשה, בשאילתות מדיה של CSS, תוכלו ליצור עיצובים נפרדים למסכי גודל שונים.
טבלאות פוגעות באופטימיזציה למנועי חיפוש
הפריסה הנפוצה ביותר שנוצרה בטבלה משתמשת בסרגל ניווט בצד שמאל של הדף ובתוכן הראשי מימין. בעת שימוש בטבלאות, גישה זו (בדרך כלל) דורשת שהתוכן הראשון שמוצג ב- HTML הוא סרגל הניווט השמאלי. מנועי חיפוש מסווגים דפים על פי התוכן, ומנועים רבים קובעים שתוכן המוצג בראש העמוד חשוב יותר מתוכן אחר. אז נראה שדף עם ניווט שמאלי ראשון מכיל תוכן פחות חשוב מהניווט.
באמצעות CSS, אתה יכול לשים את התוכן החשוב הראשון ב- HTML שלך ואז להשתמש ב- CSS כדי לקבוע היכן יש למקם אותו בעיצוב. המשמעות היא שמנועי חיפוש יראו קודם את התוכן החשוב, גם אם העיצוב מציב אותו תחתון בדף.
שולחנות לא תמיד מודפסים טוב
עיצובים רבים של שולחנות אינם מודפסים טוב מכיוון שהם פשוט רחבים מדי עבור המדפסת. לכן, כדי להתאים אותם, הדפדפנים חתכו את הטבלאות והדפיסו את החלקים למטה וכתוצאה מכך דפים לא מחוברים. לפעמים בסופו של דבר אתה מקבל דפים שנראים בסדר, אבל הצד הימני כולו חסר. דפים אחרים ידפיסו קטעים בגיליונות שונים.
באמצעות CSS תוכלו ליצור דף סגנון נפרד רק להדפסת העמוד.
טבלאות לפריסה אינן תקפות ב- HTML 4.01
ה מצבי מפרט HTML 4: "אין להשתמש בטבלאות כאמצעי בלבד לפריסת תוכן המסמך מכיוון שהדבר עלול להוות בעיות בעת העיבוד למדיה שאינה חזותית."
לכן, אם ברצונך לכתוב HTML 4.01 חוקי, אינך יכול להשתמש בטבלאות לפריסה. עליכם להשתמש בטבלאות רק עבור נתונים טבלאיים, ונתוני טבלאות בדרך כלל נראים כמו משהו שאתם עשויים להציג בגיליון אלקטרוני או אולי במסד נתונים.
עם זאת, HTML5 שינה את הכללים וכעת טבלאות לפריסה, אמנם אינן מומלצות, נחשבות ל- HTML תקפות. המפרט HTML5 קובע: "אסור להשתמש בטבלאות כעזרות פריסה." הסיבה לכך היא שקשה להבדיל בין טבלאות לפריסה, כפי שצוין לעיל.
השימוש ב- CSS למיקום ופריסה של הדפים שלך הוא הדרך היחידה החוקית ל- HTML 4.01 להשיג את העיצובים שבהם השתמשת כדי להשתמש בטבלאות ליצירה, ו- HTML5 ממליץ בחום גם על שיטה זו.