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

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

 
מאמרים אחרונים מאמרים אחרונים
09/08/2023 17:16
בניית חנות באינטרנט למכירה של מוצרים לחיות מחמד
12/03/2023 22:03
במאמר זה נסקור את התפתחות שפת צד השרת PHP מראשית ימיה, לכל אורך גירסאותיה השונות עד לאן שהיא הגיעה ב...
08/01/2023 23:40
הקמת אתר מכירות לדלתות פנים וחוץ לבתים פרטיים ולעסקים וציוד פירזול
תגובות אחרונות תגובות אחרונות
עיצוב רקע - background
12/06/2023 19:52
היי תמר, עושים את זה באמצעות ...
עיצוב רקע - background
28/05/2023 21:36
אני רוצה ליצור כפתור שהרקע שלו...
עיצוב רקע - background
15/12/2022 20:22
איך עושים שיראו את כל התמונת ר...
תגובות אחרונות פוסטים אחרונים בפורום
08/11/2022 19:11
היי, יש לי אתר קצת מורכב. הוא...
08/11/2022 19:09
היי, אני עוסק בענף הטניס ויש ...
08/11/2022 19:03
היי, ראיתי בכל מיני אתרים שמש...

עיצוב טבלאות - גבולות, ריווח וצבע

  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

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