כיצד להוסיף קווים פנימיים (גבולות) בטבלה עם CSS

למד כיצד ליצור מסגרת טבלת CSS תוך חמש דקות בלבד

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

class = "no-border">

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

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

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

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

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

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

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 הנ"ל ולהשתמש במאפיין הגבול בתג הטבלה. הבינו, עם זאת, כי התכונה שלו, אם כי לא הוצא משימוש, גמישה פחות באופן משמעותי מאשר CSS, כפי שאתה יכול רק להגדיר את רוחב הגבול יכול רק לקבל את זה סביב כל התאים של השולחן או אף אחד.