כדי להקל על הקריאה בטבלאות, לעתים קרובות מועיל לעצב שורות עם צבעי רקע מתחלפים. אחת הדרכים הנפוצות ביותר לעיצוב טבלאות היא הגדרת צבע הרקע של כל שורה אחרת. זה מכונה לעתים קרובות "פסי זברה".
אתה יכול להשיג זאת על ידי הגדרת כל שורה אחרת עם מחלקת CSS ואז הגדרת הסגנון עבור אותה מעמד. זה עובד אבל הוא לא הדרך הטובה ביותר או היעילה ביותר לעשות זאת. בעת שימוש בשיטה זו, בכל פעם שתצטרך לערוך טבלה זו ייתכן שיהיה עליך לערוך כל שורה בטבלה כדי להבטיח שכל שורה תואמת את השינויים. לדוגמה, אם אתה מכניס שורה חדשה לטבלה שלך, כל שורה אחרת מתחתיה צריכה לשנות את הכיתה.
CSS מקל על עיצוב שולחנות עם פסי זברה. אתה לא צריך להוסיף שום תוספת HTML תכונות או שיעורי CSS, אתה פשוט משתמש ב: nth-of-type (n) בורר CSS.
בורר: nth-of-type (n) הוא מעמד פסאודו מבני ב- CSS המאפשר לך לעצב אלמנטים על סמך קשריהם לאלמנטים בין ההורים והאחים. אתה יכול להשתמש בו לבחירת אלמנט אחד או יותר על סמך סדר המקור שלהם. במילים אחרות, זה יכול להתאים לכל אלמנט שהוא הילד התשיעי מסוג מסוים של ההורה שלו.
האות n יכולה להיות מילת מפתח (כמו אי זוגית או זוגית), מספר או נוסחה.
לדוגמא, כדי לעצב כל תג פסקה אחר בצבע רקע צהוב, מסמך CSS שלך יכלול:
p: nth-of-type (מוזר) {
רקע: צהוב;
}
התחל בטבלת ה- HTML שלך
ראשית, צור את הטבלה שלך כרגיל שאתה כותב אותה ב- HTML. אל תוסיף שיעורים מיוחדים לשורות או לעמודות.
בגליון הסגנונות שלך, הוסף את ה- CSS הבא:
tr: nth-of-type (odd) {
צבע רקע: #ccc;
}
זה יעצב כל שורה אחרת עם צבע רקע אפור החל מהשורה הראשונה.
סגנון עמודות מתחלפות באותו אופן
אתה יכול לעשות את אותו סוג של עיצוב לעמודות בטבלאות שלך. לשם כך, פשוט שנה את ה- tr בכיתת CSS שלך ל- td. לדוגמה:
td: nth-of-type (odd) {
צבע רקע: #ccc;
}
שימוש בנוסחאות בבורר nth מסוג (n)
התחביר לנוסחה המשמשת בבורר הוא + b.
- a הוא מספר המייצג את המחזור או גודל האינדקס.
- n היא למעשה האות "n" ומייצגת מונה, המככב ב 0.
- + הוא מפעיל, שיכול להיות גם "-"
- b הוא מספר שלם ומייצג את ערך הקיזוז - למשל, כמה שורות למטה על הבורר להתחיל להחיל את צבע הרקע. זה נדרש אם מפעיל נכלל בנוסחה.
לדוגמה, אם ברצונך להגדיר צבע רקע לכל שורה שלישית, הנוסחה שלך תהיה 3n + 0. ה- CSS שלך עשוי להיראות כך:
tr: nth-of-type (3n + 0) {
רקע: slategray;
}
כלים מועילים לשימוש בורר n-of-type
אם אתה מרגיש קצת מבוהל מהיבט הנוסחה של שימוש בבורר ה- n- מסוג הפסאודו, נסה את האתר: nth Tester ככלי שימושי שיכול לעזור לך להגדיר את התחביר להשגת המראה הרצוי. השתמש בתפריט הנפתח כדי לבחור nth מסוג (תוכל גם להתנסות בכיתות פסאודו אחרות גם כאן, כגון nth-child).