למה אתה צריך להימנע שולחנות עבור דף אינטרנט פריסות

CSS היא הדרך הטובה ביותר לבנות עיצובים דף אינטרנט

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

שולחנות אינם נגישים

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

זו הסיבה המפרט HTML5 ממליץ נגד טבלאות פריסה ומדוע HTML 4.01 לא מאפשר את זה. דפי אינטרנט נגישים לאפשר יותר אנשים להשתמש בהם והם סימן של מעצב מקצועי.

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

שולחנות הם מסובכים

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

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

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

טבלאות אינן גמישות

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

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

לוחות מקוננים לטעון לאט יותר מאשר CSS עבור אותו עיצוב

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

ברוב המקרים, פריסת טבלה משתמשת בתווים רבים יותר מאשר בתבנית CSS. פחות תווים פירושו פחות להוריד.

לוחות יכול לפגוע אופטימיזציה למנועי חיפוש

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

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

טבלאות אל תדפיס תמיד טוב

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

עם CSS ניתן ליצור גיליון סגנונות נפרד רק להדפסת הדף.

טבלאות לפריסה אינן חוקיות ב- HTML 4.01

מפרט ה- HTML 4 קובע: "אין להשתמש בטבלאות באופן בלעדי כאמצעי לפריסת תוכן מסמכים, מכיוון שהדבר עלול להוות בעיה בעת עיבוד למדיה לא חזותית".

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

אבל HTML5 שינה את הכללים ועכשיו טבלאות הפריסה, בעוד לא מומלץ, עכשיו HTML חוקי. מפרט HTML5 קובע: "אין להשתמש בטבלאות כעזרי פריסה".

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

שימוש ב- CSS למיקום ופריסה של הדפים שלך הוא הדרך החוקית היחידה בתבנית HTML 4.01 כדי לקבל את העיצובים שבהם השתמשת כדי ליצור טבלאות. ו- HTML5 ממליץ בחום על שיטה זו.

לוחות פריסה יכול להשפיע על סיכויי העבודה שלך

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

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

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

מוסר: למד להשתמש CSS

CSS עשוי להיות קשה ללמוד, אבל כל דבר כדאי שווה את המאמץ. אל תשמור על היכולות שלך מפני קיפאון. למד CSS ובנה את דפי האינטרנט שלך באופן שבו הם נועדו להיבנות עם CSS לפריסה.