כיצד לבנות 2x2 טבלה

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

היסטוריה קצרה של טבלאות ועיצוב אתרים

לפני שנים רבות, לפני המקובל בתקני CSS ו- Web, מעצבי אתרים השתמשו באלמנט HTML

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

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

קושי: ממוצע

הזמן הנדרש: 10 דקות

הנה איך:

  1. תחילה פתח את הטבלה
  • פתח את השורה הראשונה עם תג tr
  • פתח את העמודה הראשונה עם תג td
  • כתוב את תוכן התא
  • סגור את התא הראשון ופתח את השני
  • כתוב את התוכן של התא השני
  • סגור את התא השני וסגור את השורה
  • כתוב את השורה השנייה בדיוק כמו הראשון
  • לאחר מכן סגור את הטבלה
  • תוכל גם לבחור להוסיף כותרות טבלה לטבלה באמצעות האלמנט

    . כותרות טבלה אלה יחליפו את או "טבלת נתוני הטבלה" בשורה הראשונה בטבלה, כך:

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

    אז, האם זה בסדר להשתמש טבלאות ב- HTML?

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

    נכתב על ידי ג 'ניפר קירין. בעריכת ג'רמי ג'ירארד ב -8 / 11/16

    שם תפקיד
    ג'רמי מעצב td> ג'ניפר מפתח