מאפייני הטבלה
באמצעות CSS ניתן להגדיר את מאפייני העיצוב של כל טבלה באתר אינטרנט, כמו למשל גבולות הטבלה, גובה ורוחב, יישור הטקסט בתוך הטבלה, צבעי הטבלה וריווח התאים בטבלה. ישנם כמה אלמנטים שניתן להגדיר את תכונותיהם:
- table - הגדרות עיצוב המתייחסות לטבלה עצמה ככלל
- tr - הגדרות עיצוב לשורה בטבלה
- td - הגדרות עיצוב לתא פנימי בטבלה
- th - הגדרות עיצוב לתא בכותרת של הטבלה
עיצוב גבולות הטבלה
הגדרת הגבולות של הטבלה נעשית ע"י התכונה border, שבאמצעותה ניתן להגדיר את הגבולות של הטבלה עצמה וכן של התאים שלה. הדוגמה הבאה מגדירה שגבולות הטבלה והתאים th ו- td יהיו מעוצבים בקו מנוקד בצבע שחור בעובי 2px:
border:2px dotted black;
}
מכיוון שהגדרנו כאן גבולות גם ל-table וגם לאלמנטים th, td, מתקבלים כאן גבולות כפולים. אם מעוניינים בטבלה עם גבול יחיד, ניתן לאחד את הגבולות ע"י שימוש בתכונה border-collapse:
border-collapse:collapse;
}
table, th, td {
border:2px solid blue;
}
הגדרות גובה ורוחב
גובה הטבלה יוגדר ע"י התכונה height ורוחבה יוגדר ע"י התכונה width, כשהערך של תכונות אלה יהיה באחוזים או בפיקסלים. זוהי למשל טבלה שגובהה הוא המקסימום האפשרי מהאלמנט העוטף אותה:
height:100%;
}
גובה התאים יוגדר ע"י פיקסלים. בדוגמה הבאה גובה התאים בכותרת הטבלה יהיה 40px וגובה התאים של כל שורה בטבלה יהיה 30px:
height:40px;
}
tr {
height:30px;
}
יישור הטקסט בתוך הטבלה
התכונות text-align ו- vertical-align משמשות להגדרת היישור האנכי והאופקי של הטקסט בתוך התאים בטבלה. בטבלה הבאה, למשל, הטקסט בתוך התא יהיה מיושר לשמאל, ומבחינת המיקום האנכי, הוא יופיע במרכז התא:
text-align:left;
vertical-align:middle;
}
ריווח בתוך התא
בכדי לשלוט ברווח בין גבול הטבלה לבין הטקסט, משתמשים בתכונה padding כמו בדוגמה הבאה:
padding:8px;
}
צבעי הטבלה
ניתן להגדיר את צבעי גבולות הטבלה, את צבע הרקע בתוך התאים ואת צבע הטקסט בטבלה, כמו למשל בדוגמה הבאה:
border:2px solid purple;
}
th {
background-color:pink;
color:purple;
}
עיצוב טבלה
יש לתת לכל טבלה class עם שם אחר, ובקובץ ה-CSS לבצע הגדרות מסגרת לכל class בנפרד.
סביר שנתת הגדרות משותפות וכלליות לטבלה באשר היא ולכן זה משפיע על כלל הטבלאות בעמוד.
תודה ובהצלחה,
דוד
לא מבינה משו קטן