טבלאות הן הכלי הנפוץ והיעיל ביותר לייצוג נתונים בצורה מאורגנת. בזמנים מוקדמים יותר, לפני CSS, ה <טבלה> האלמנט שימש ליצירת פריסות עיצוב עשירות. אבל בימינו, פריסות נוצרות על ידי שימוש במספר מאפייני CSS אחרים. ליתר דיוק, רכיב ה-HTML '
' משמש ליצירת טבלת אינטרנט, אותה ניתן לעצב עוד יותר על ידי החלת מאפייני CSS שונים.
מחקר זה ינחה בנושא עיצוב טבלאות עם CSS.
איך לעצב טבלה עם CSS?
כדי להחיל סגנונות על הטבלה, נעבור על סדרת השלבים המפורטים להלן.
' משפחת גופן 'נכס עם הערך' ורדנה, ז'נבה, טהומה, סן-סריף ' משמש להחלת הגופן שנתמך על ידי הדפדפן. אם הדפדפן אינו תומך בסגנון הגופן הראשון, ייעשה שימוש בשני.
' צבע רקע ' מאפיין מגדיר את צבע הרקע של האלמנט.
שלב 3: סגנון 'כיתוב' אלמנט
כּוֹתֶרֶת { גוֹפָן- גודל : 25px; טֶקסט- ליישר : מרכז; רקע כללי- צֶבַע : #1C6758; צֶבַע : תירס; }
האלמנט
מעוצב בצורה הבאה:
' גודל גופן 'מאפיין משמש להגדרת גודל הגופן.
' יישור טקסט ' המאפיין מציין את היישור של הטקסט של האלמנט.
' צֶבַע ' מאפיין מתייחס לצבע הגופן של האלמנט.
הנה הפלט של הקוד שסופק לעיל:
שלב 4: הוסף גבול לטבלה ה ' גבול 'מאפיין משמש להוספת גבול סביב האלמנט. זהו מאפיין קיצור המציין את רוחב הגבול, סגנון הגבול וצבע הגבול.
בואו נחיל את הגבול, יחד עם הריפוד, והשוליים לטבלה:
' גבול ' מאפיין מתאים את הגבול סביב הטבלה, על ידי ציון רוחב הגבול, סגנון הגבול וצבע הגבול.
' ריפוד ” מציין את הרווח סביב תוכן האלמנט, כאשר הערך הראשון מגדיר רווח בחלק העליון-תחתון והערך השני מוסיף רווח בצד ימין-שמאל של התוכן.
' שולים 'נכס עם הערך' אוטומטי ' מוסיף רווח שווה סביב האלמנט.
תְפוּקָה
פתק : אם אנחנו לא רוצים את הרווחים בין גבולות הטבלה, השתמש במאפיין border-collapse.
שלב 5: כווץ את מרווח הגבול מהטבלה ניתן להסיר את הרווחים בין גבולות השולחן על ידי שימוש ב' קריסת גבול ' מאפיין עם הערך 'התמוטטות':
גבול-התמוטטות: התמוטטות;
שלב 6: התאם את גודל הטבלה בואו נראה כיצד להתאים את גודל השולחן:
thead th { רוֹחַב : 160px; }
התוספת ' רוֹחַב ' מאפיין עם האלמנט
יתאים אוטומטית את גודל הטבלה לפיו::
אנו יכולים גם להחיל סגנונות על תא הטבלה הספציפי. בואו נדון בהם!
שלב 7: סגנון תאי טבלה ספציפיים כדי לעצב את תא הטבלה הספציפי, ציין את שם המחלקה של התא המסוים הזה. לדוגמה, הקוד שלהלן מייצג שלתא השלישי בשורה השנייה מוקצה שם מחלקה ' שִׂיא ”:
ה ' :ילד n(אפילו) בורר פסאודו משמש כדי לקחת ארגומנט אחד שמציין את התבנית שעליה יש להחיל את הסגנון.
' צבע רקע 'מאפיין משמש כדי להגדיר את צבע הרקע של האלמנט.
ניתן לראות שצבע הרקע מוחל בהצלחה על השורות הזוגיות:
זה היה הכל על עיצוב שולחנות עם CSS
סיכום
טבלאות הן כלי חשוב לשמירה על ארגון הנתונים. ניתן ליצור את הטבלה על ידי שימוש ברכיבי HTML
,
,
ועוד. מספר מאפייני CSS משמשים כדי לסגנן את הטבלה, כגון גבול, מאפיין צבע רקע, מאפיין משפחת גופנים ועוד רבים נוספים. להבנה טובה יותר, כתוב זה הסביר הליך שלב אחר שלב לסגנון טבלה עם CSS.
