מאמרים אחרונים מאמרים אחרונים
24/10/2018 19:39
מתכנן הקמת חנות מתנות מקוונת? אספנו עבורך כל מה שחשוב לדעת לפני שאתה יוצא לדרך.
15/09/2018 19:27
יש לך עסק למכירת רהיטים או שאתה מתכנן אחד כזה בקרוב? קרא איך הקמת חנות וירטואלית למכירה של רהיטים בא...
06/09/2018 18:05
מחשבים זו אהבת חייך? האם חשבת למכור מחשבים, טלפונים סלולריים, קונסולות משחק וציוד היקפי באינטרנט? המ...
24/08/2018 13:39
הקמת פורטל בריאות באנגלית
22/08/2018 0:27
מתכנן להקים עסק למכירת מוצרי מזון באינטרנט? אנחנו כאן כדי לעזור לך בתכנון להצלחת העסק.
תגובות אחרונות תגובות אחרונות
בניית חנות וירטואלית
29/08/2018 13:50
חברה לבניית אתר וחנות וירטואלי...
שפת שרת מול שפת לקוח
04/07/2018 15:45
היי, השפות PHP ו-PYTHON שתי...
שפת שרת מול שפת לקוח
04/07/2018 14:10
מה ההבדל בין php ל python

עיצוב טבלאות

»
»
עיצוב טבלאות

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

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

  • 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 זה משנה לי גם את המסגרת של הטבלה השנייה . איך אני אמורה לסדר את זה ?

רוצה שנקפיץ גם את העסק שלך?

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

שילוב מנצח של טכנולוגיה שהיא חוד החנית עם ליווי אישי להצלחה!

 

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

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