מדריך CSS מספר 15 - עיצוב טבלה
על כמה מהתכונות הנדרשות לעיצוב טבלה הסברנו במדריכים קודמים. חלק מהתכונות הנדרשות הן: קו מתאר, הכוון של טקסט, צבע הרקע, צבע אותיות ומרווח פנימי.
נעתיק את הקוד הבא לטבלה לקובץ ה-html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<th>סלקטור </th>
<th>משמעות</th>
</tr>
<tr>
<td>th</td>
<td>תא כותרת</td>
</tr>
<tr>
<td>tr</td>
<td>שורה בטבלה</td>
</tr>
<tr>
<td>td </td>
<td>תא בטבלה</td>
</tr>
</table>
</body>
</htmlקוד CSS לעיצוב טבלה
נכתוב את הקוד הבא לגיליון העיצוב החיצוני, style.css. המשמעות של הקוד היא:
- שקו המתאר החיצוני של הטבלה הוא בעובי 3 פיקסלים והכתיב בטבלה מיושר למרכז.
- ששורת הכותרת תקבל כתב שחור על רקע אפור עם רווח פנימי של 5 פיקסלים.
- ששורה רגילה בטבלה תקבל קו מתאר בעובי 1 פיקסל.
table {
border: 3px solid black;
text-align: center;
}
th {
background-color: gray;
color: white;
padding: 5px;
}
td {
border: 1 solid black;
padding: 5px;
}נריץ את קובץ ה-html על הדפדפן, ונצפה בתוצאה:
אפשר לראות שבין התאים בטבלה ישנם רווחים. כדי למנוע את הופעת הרווחים נשתמש בתכונה הבאה:
border-collapse: collapse
תכונה מועילה נוספת שאפשרת לנו לקבוע את ממדי התאים בטבלה היא
table-layout: fixed
את התכונות נמקם תחת הסלקטור tabel, כך שגיליון העיצוב החיצוני, style.css, ייראה כך:
table {
border: 3px solid black;
text-align: center;
border-collapse: collapse;
table-layout: fixed;
}
th {
background-color: gray;
color: white;
padding: 5px;
}
td {
border: 1 solid black;
padding: 5px;
}נריץ את קובץ ה-html על דפדפן, ונראה את התוצאה:
כפי שניתן לראות, באמצעות השימוש ב-border-collapse ביטלנו את הרווח שהיה בין תאי הטבלה.
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.