נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך 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. המשמעות של הקוד היא:

table { 
    border: 3px solid black;
    text-align: center;
}
th { 
    background-color: gray;
    color: white;
    padding: 5px;
}
td { 
    border: 1 solid black;
    padding: 5px;
}

נריץ את קובץ ה-html על הדפדפן, ונצפה בתוצאה:

עיצוב טבלה באמצעות CSS

אפשר לראות שבין התאים בטבלה ישנם רווחים. כדי למנוע את הופעת הרווחים נשתמש בתכונה הבאה:
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 ביטלנו את הרווח שהיה בין תאי הטבלה.

 

 

הוסף תגובה חדשה

 

= 3 + 2