שימוש ב- CSS כדי להוסיף גבולות פנימיים בטבלת HTML

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

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

גבולות טבלאות CSS

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

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

לפני שאתה מתחיל

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

• מקיפים את כל התאים כדי ליצור רשת
• מיקום הקווים בין העמודות בלבד
• רק בין השורות
• בין עמודות או שורות ספציפיות.

ניתן גם למקם את השורות סביב תאים בודדים או בתוך תאים בודדים.

כיצד להוסיף שורות סביב כל התאים בטבלה

כדי להוסיף שורות סביב כל התאים בטבלה, יצירת אפקט רשת, הוסף את הפריטים הבאים לגיליון הסגנונות שלך:

td, th {border: solid 1px black;}

כיצד להוסיף שורות בין רק עמודות בטבלה

כדי להוסיף שורות בין העמודות ליצירת שורות אנכיות שמופעלות מלמעלה למטה על עמודות הטבלה, הוסף את הגיליון הבא לגיליון הסגנונות שלך:

td, th {border-left: Solid 1px שחור;}

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

class = "no-border">

לאחר מכן, הוסף את הסגנון הבא לגיליון הסגנונות:

.אין גבול {border-left: none;}

כיצד להוסיף שורות בין רק שורות בטבלה

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

ENTERהגבול התחתון: 1px מוצק;}

כדי להסיר את הגבול מתחתית הטבלה, תוסיף שוב מחלקה

התג

class = "no-border">

הוסף את הסגנון הבא לגיליון הסגנונות שלך:

.אין גבול {border-bottom: none;}

כיצד להוסיף שורות בין עמודות ספציפיות או שורות בטבלה

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

class = "side-border">

הוספת שורות בין שורות קלה יותר, כי אתה יכול להוסיף את הכיתה לשורה אתה רוצה את הקו.

class = "border-bottom">

לאחר מכן, הוסף את ה- CSS לגיליון הסגנונות שלך:

.border-side {border-left: Solid 1px שחור;}.border-bottom {הגבול התחתון: 1px מוצק;}

כיצד להוסיף שורות סביב תאים בודדים בטבלה

כדי להוסיף שורות סביב תאים בודדים, אתה מוסיף מחלקה לתאים שתרצה לגבול מסביב אליהם:

class = "border">

לאחר מכן הוסף את CSS הבא לגיליון הסגנונות שלך:

.גבול {border: solid 1px black;}

כיצד להוסיף שורות בתוך תאים בודדים בטבלה

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

טיפים שימושיים

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

שולחן {border-קריסה: קריסה;}

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