היפטרות ממרחבים בטבלאות HTML

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

הגדרת טבלת HTML

ה- HTML תָג עבור טבלאות כברירת מחדל אינו שולט בדרישות ריווח מסוימות. ודא שלושה דברים בנושא שולחן תג בתוך מסמך ה- HTML שלך:

  1. האם לטבלה שלך יש את התכונה cellpadding מוגדרת כ- 0?
    1. cellpadding = "0"
  2. האם לטבלה שלך יש את התכונה 'מרווח תאים' כ- 0?
    1. cellspacing = "0"
  3. האם יש רווחים לפני או אחרי התוכן שלך ותגי הטבלה?

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

גיליונות סגנון

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

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

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

חלופות

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