- כיצד להוסיף גבול-תחתון לשורת הטבלה
? - הגדר את border-bottom ל-Table Row
Element - אלמנט שולחן בסגנון
- סגנון 'td' אלמנט
- סגנון 'tr' אלמנט
כיצד להוסיף גבול-תחתון לשורת הטבלה
? הוספת הגבול-תחתון לשורה בטבלה תוסיף את הגבול לכל השורה כדי ליצור חוויה ויזואלית טובה יותר וכדי למשוך את המיקוד של המשתמש.
דוגמה מפורטת של הוספת border-bottom לשורה
בטבלה מוצגת להלן:
הגדר גבול-תחתון לשורת הטבלה
צור טבלה פשוטה המכילה 3 שורות ו-3 עמודות בקובץ ה-HTML שלנו, הנעשות באמצעות אלמנטים
, ו- :
< שולחן >
< tr מעמד = 'שׁוּרָה' >
< ה' > שֵׁם < / ה' >
< ה' > סטָטוּס < / ה' >
< ה' > חדר מס' < / ה' >
< / tr >
< tr מעמד = 'שׁוּרָה' >
< td > פקהאר < / td >
< td > סטוּדֶנט < / td >
< td > 05 < / td >
< / tr >
< tr מעמד = 'שׁוּרָה' >
< td > עומר < / td >
< td > סטוּדֶנט < / td >
< td > 05 < / td >
< / tr >
< / שולחן >בקטע הקוד שלמעלה, הקצינו מחלקה של 'שורה' לשורות הטבלה
, כך שניתן יהיה לגשת אליה מאוחר יותר ב-CSS.
דף האינטרנט ייראה כך:
אלמנט שולחן בסגנון
בחלק ה-CSS בחר את רכיב הטבלה ויישר את הטקסט למרכז. לאחר מכן, השתמש ב' קריסת גבול ' מאפיין כדי להגדיר את ערכו לכווץ:
שולחן
{
גבול-התמוטטות: התמוטטות;
יישור טקסט: מרכז;
}סגנון 'td' אלמנט
לייצוג חזותי טוב יותר, תנו לנו לתת ריפוד של 20px לרכיבי נתוני הטבלה '
' וכותרת הטבלה ' ': td
{
ריפוד:20px;
}
ה'
{
ריפוד:20px;
}הפלט נראה כך:
הפלט לעיל הראה ריפוד של 20px ויישר את הטקסט למרכז.
סגנון 'tr' אלמנט
בקובץ ה-CSS, הוסף את המאפיין border-bottom תחת הבורר 'tr'. הוא מקצה לכל שורה בטבלה כולל שורת הכותרת. לדוגמה, הגדר את הערך שלו ל-2px solid darkcyan:
tr {
border-bottom: 2px darkcyan מוצק;
}לאחר ביצוע קטע הקוד שלמעלה, דף האינטרנט נראה כך:
זה הכל על איך להוסיף גבול בתחתית כל שורה בטבלה '
'. סיכום
כדי להוסיף גבול בתחתית האלמנט
, הגדר את מאפיין ה-CSS border-collapse לכיווץ והשתמש במאפיין border-bottom באלמנט ' '. זה מאפשר למאפיין CSS להחיל גבולות על הטבלה. כך אתה יכול בקלות להוסיף גבול-תחתית לכל תג '
'. - הגדר את border-bottom ל-Table Row