יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
15/02/2022 22:51
ככה תיבנו חנות וירטואלית מותאמת סלולר שתשפר את חוויית המשתמש ותגדיל את ההמרות.
03/02/2022 0:06
תקן HTML5 לצד הלקוח באתרי אינטרנט הוא התקן המוביל בימינו. קראו על היתרונות של התקן.
31/01/2022 15:40
בניית אתר אינטרנט בשפת צד השרת PHP היא בחירה חכמה בשפת פיתוח ותיקה, מובילה ומהירה.
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...
תגובות אחרונות פוסטים אחרונים בפורום
27/06/2022 23:53
שלום רב, ישנה בעיה קטנה בא...
27/06/2022 23:51
שלום! הבעיה שלי אסביר אותה הר...
27/06/2022 23:49
הי,כיצד כדאי להשקיע בשיווק של ...

עיצוב טבלאות

  1. דף הבית
  2. מדריך HTML5
  3. עיצוב טבלאות

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

מאפייני הטבלה

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

  • table - הגדרות עיצוב המתייחסות לטבלה עצמה ככלל
  • tr - הגדרות עיצוב לשורה בטבלה
  • td - הגדרות עיצוב לתא פנימי בטבלה
  • th - הגדרות עיצוב לתא בכותרת של הטבלה

עיצוב גבולות הטבלה

הגדרת הגבולות של הטבלה נעשית ע"י התכונה border, שבאמצעותה ניתן להגדיר את הגבולות של הטבלה עצמה וכן של התאים שלה. הדוגמה הבאה מגדירה שגבולות הטבלה והתאים th ו- td יהיו מעוצבים בקו מנוקד בצבע שחור בעובי 2px:

table, th, td {
    border:2px dotted black;
}

מכיוון שהגדרנו כאן גבולות גם ל-table וגם לאלמנטים th, td, מתקבלים כאן גבולות כפולים. אם מעוניינים בטבלה עם גבול יחיד, ניתן לאחד את הגבולות ע"י שימוש בתכונה border-collapse:

table {
    border-collapse:collapse;
}
table, th, td {
    border:2px solid blue;
}

הגדרות גובה ורוחב

גובה הטבלה יוגדר ע"י התכונה height ורוחבה יוגדר ע"י התכונה width, כשהערך של תכונות אלה יהיה באחוזים או בפיקסלים. זוהי למשל טבלה שגובהה הוא המקסימום האפשרי מהאלמנט העוטף אותה:

table {
    height:100%;
}

גובה התאים יוגדר ע"י פיקסלים. בדוגמה הבאה גובה התאים בכותרת הטבלה יהיה 40px וגובה התאים של כל שורה בטבלה יהיה 30px:

th {
    height:40px;
}
tr {
    height:30px;
}

יישור הטקסט בתוך הטבלה

התכונות text-align ו- vertical-align משמשות להגדרת היישור האנכי והאופקי של הטקסט בתוך התאים בטבלה. בטבלה הבאה, למשל, הטקסט בתוך התא יהיה מיושר לשמאל, ומבחינת המיקום האנכי, הוא יופיע במרכז התא:

td {
    text-align:left;
    vertical-align:middle;
}

ריווח בתוך התא

בכדי לשלוט ברווח בין גבול הטבלה לבין הטקסט, משתמשים בתכונה padding כמו בדוגמה הבאה:

th {
    padding:8px;
}

צבעי הטבלה

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

table, td, th {
    border:2px solid purple;
}
th {
    background-color:pink;
    color:purple;
}

 

הוספת תגובה

עיצוב טבלה

29/10/2015 16:45
דוד כהן
היי ליאור,
יש לתת לכל טבלה class עם שם אחר, ובקובץ ה-CSS לבצע הגדרות מסגרת לכל class בנפרד.
סביר שנתת הגדרות משותפות וכלליות לטבלה באשר היא ולכן זה משפיע על כלל הטבלאות בעמוד.
תודה ובהצלחה,
דוד

לא מבינה משו קטן

20/10/2015 20:11
ליאור
יצרתי שתי טבלאות וכאשר אני משנה את המסגרת של אחת הטבלאות בcss זה משנה לי גם את המסגרת של הטבלה השנייה . איך אני אמורה לסדר את זה ?
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

בניית חנות אינטרנטית של מיזם גרופ תעזור לך ביצירת סיסטם עוצמתי שמגדיל מכירות.

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

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: