הרשם

התחבר

התחבר בעזרת פייסבוק:

שם משתמש סיסמא
זכור אותי

אוריגמי - קטגורית האוריגמי הגדולה בישראל

יצירה לילדים ולמבוגרים - באתר מדריכי יצירה שידהימו אתכם מחדש כל פעם

אוהבים מתוקים? לחצו בשביל עשרות מדריכי עוגות ועוגיות

‹ ›

יכול לעניין אתכם

מדריך HTML מספר 7 - איך לעשות טבלאות (Tables)
מאת: בקלות טכני

מדריך CSS מספר 5 - איך לעצב טקסט

מאת: בקלות טכני

מדריך CSS מספר 6 - רקעים (background)

מאת: בקלות טכני

מדריך CSS מספר 8 - איך לעצב רשימות (lists)
מאת: בקלות טכני

מדריך CSS מספר 9 -איך לקבץ סלקטורים

מאת: בקלות טכני

דף הבית >> מדריכים >> מחשבים >> אינטרנט >> עיצוב אתרים >> מדריך CSS מספר 7 - איך לעשות טבלאות (Tables)

מחשבים

מדריך CSS מספר 7 - איך לעשות טבלאות (Tables)

עקוב

26/07/2011 15:28:53
מאת: בקלות טכני
כתב מתחיל

דירוג:

(1מדרגים)

ניתן לשפצר ולשדרג את הטבלאות שלכם בעזרת CSS ולהפוך אותם ממלבנים וריבועים משעממים התקועים על המסך שלכם לממתק עיניים רציני (כמה שטבלה יכולה להיות ממתק עיניים).
מדריך זה יסביר כיצד לעצב את הטבלאות בעזרת CSS.

רמת קושי: מתחילים

הוראות:

אם אינכם יודעים לעשות טבלאות בHTML, עברו למדריך המסביר כיצד לעשות טבלאות בHTML.

כעת, בואו נתחיל בקביעת גבולות הטבלה, קודם כל נבנה טבלה בHTML ובכדי לקבוע את גבולותיה נשתמש בborder:

<html>
<head>
<style type='text/css'>

table{border:1px solid black;}

</style>
</head>

<body>
<table>
<tr>
<th>Name</th>
<th>Occupation</th>
</tr>
<tr>
<td>Moshe</td>
<td>Gardner</td>
</tr>
<tr>
<td>Sveta</td>
<td>Yoga instructor</td>
</tr>
<tr>
<td>Shimon</td>
<td>Chef</td>
</tr>
</table>
</body>
</html>

Name	Occupation
Moshe	Gardner
Sveta	Yoga instructor
Shimon	Chef

שימו לב שלסלקטור table הגדרנו גבול (border) בגודל פיקסל 1 בשחור.

הבעיה היא שכאשר אנו מגדירים את הגבול רק לtable, הtable header והtable data אינם מקבלים גבול, משמע, יש גם להגדיר עבורם גבול.

הוספנו את הסלקטורים th וtd וכעת גם עבורם מוגדר הגבול.
אבל גם כאן יש לנו בעיה, מכיוון שהגדרנו גבול פעמיים, יש לנו שתי גבולות - וזה לא נראה משהו.

בכדי להפוך את שתי הגבולות לגבול אחד, נשתמש
בborder-collapse :

יופי, שידרגנו את הטבלה שלנו והיא נראית יותר טוב.

חשוב מאוד להגדיר את הDoctype כאשר משתמשים בborder-collapse אחרת הוא עלול לגרום לבעיות בצפיה בדפדפנים מסויימים.

אחד הדברים שאתם תיתקלו בו הרבה בזמן יצירת טבלה הוא יישור הטקסט (או התמונה) בתוך הטבלה עצמה.

בד"כ תרצו לשים כותרות במרכז התא בטבלה ואת הטקסט מיושר לשמאל אם הוא באנגלית או מיושר לימין אם הוא בעברית.

נעשה זאת בעזרת שימוש בtext-align:

<html>
<head>
<style type='text/css'>
table{border-collapse:collapse;}
table, td, th{border:1px solid black;}

th{text-align:center;}
td{text-align:right;}
</style>

</head>
<body>
<table>
<tr>
<th>שם</th>
<th>מקצוע</th>
</tr>
<tr>
<td>משה</td>
<td>גנן</td>
</tr>
<tr>
<td>סבטה</td>
<td>מדריכת יוגה</td>
</tr>
<tr>
<td>שמעון</td>
<td>שף</td>
</tr>
</table>
</body>
</html>

שם	מקצוע
משה	גנן
סבטה	מדריכת יוגה
שמעון	שף

אז הגדרנו שהכותרות (th) יהיו מיושרות למרכז בעזרת
text-align:center והגדרנו שכל התאים (td) יהיו מיושרים לימין בעזרת text-align:right.

ניתן ליישר את הטקסט או התמונות בתאים לא רק לימין, שמאל ומרכז, ניתן גם ליישר גם לחלק התחתון,למרכז או לחלק העליון (bottom,center,top) של התא
בעזרת vertical-align.

לדוגמא:

th{vertical-align:top;}

כעת אפשר להתחיל לקבוע את הגובה והרוחב של הטבלה בעזרת width וheight.
כמו כמעט בכל גודל של אלמנט כלשהו שתקבעו בCSS, תכלו להשתמש בפיקסלים (px) או באחוזים.

אז בואו נראה דוגמא:

<html>
<head>
<style type='text/css'>
table,td,th{border:1px solid black;}
table{width:50%;}
th{height:50%;}

td{text-align:right;}
</style>

</head>
<body>
<table>
<tr>
<th>שם</th>
<th>מקצוע</th>
</tr>
<tr>
<td>משה</td>
<td>גנן</td>
</tr>
<tr>
<td>סבטה</td>
<td>מדריכת יוגה</td>
</tr>
<tr>
<td>שמעון</td>
<td>שף</td>
</tr>
</table>
</body>
</html>

שם	מקצוע
משה	גנן
סבטה	מדריכת יוגה
שמעון	שף

הגדרנו את הtable ברוחב 50 אחוז ואת גובה הth ב50 אחוז וזה יראה כמו בתמונה.
באותה מידה יכולנו להגדיר את הגובה והרוחב בפיקסלים.

ניתן להגדיר את המרווח בין הטקסט לגבולות הטבלה בעזרת padding:

th{padding:10px;}

בכדי לתבל את העניינים, אפשר לצבוע את הטבלה, את הרקע של התאים, את הטקסט עצמו ואת הגבולות.

* בשביל לצבוע את רקע התא נשתמש בbackground-color.
* בשביל לצבוע את הטקסט נשתמש בcolor.
* את צביעת הגבול ראינו כבר בצעד 2

אז בואו נתרגל את זה מעט:

<html>
<head>
<style type='text/css'>
table,td,th{border:1px solid blue;}

th{background-color:blue;color:white;}
td{text-align:right;color:green;}

</style>

</head>
<body>
<table>
<tr>
<th>שם</th>
<th>מקצוע</th>
</tr>
<tr>
<td>משה</td>
<td>גנן</td>
</tr>
<tr>
<td>סבטה</td>
<td>מדריכת יוגה</td>
</tr>
<tr>
<td>שמעון</td>
<td>שף</td>
</tr>
</table>
</body>
</html>

שם	מקצוע
משה	גנן
סבטה	מדריכת יוגה
שמעון	שף

אז הגדרנו את הגבולות שלנו בכחול, את הרקע של הth בכחול גם כן ואת צבע הטקסט שלו בלבן.

את הטקסט בtd הגדרנו בירוק.

פשוט לא?

הוסף למועדפים שלחו לחבר הדפיסו את המדריך

ראיתם משהו שאהבתם? יש לכם שאלה? כתבו תגובה

אם לא בא לכם להשאיר תגובה דרך הפייסבוק:

מדריכים נוספים בנושא:

איך לעצב אתר בצורה יעילה.

איך לבחור את הצבעים המתאימים לאתר האינטרנט שלך.

איך לבחור לוגו

מדריך HTML מספר 12 - מתוה דף אינטרנט ( layouts and div tags)

עוד מדריכים בנושא זה