מדריך לעיצוב טבלאות בעזרת CSS

היו זמנים, שבהם השלד, העימוד, של דפי ה - HTML היה מורכב כולו על בסיס טבלאות HTML. ימים אלה חלפו להם זה כבר ולכן במדריך זה נלמד כיצד לעצב טבלאות לצורך הצגת נתונים בצורה נוחה ונגישה ואת תורת עימוד הדפים נשאיר למדריך אחר. לצורך הבנת מדריך זה יש להכיר את האלמנטים השונים המרכיבים טבלאות בשפת HTML. ניתן למצוא הסברים על כל האלמנטים שיוזכרו במדריך זה  במדריך השלם לשפת HTML 5 שבאתר זה.

גבולות (borders)

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

תכונה ערכים הסבר
border-width ערך מספרי
בפיקסל או
סנטימטר
וכד'

thin
medium
thick
באמצעות תכונה זו נגדיר את עובי הקו המגדיר את גבולות הטבלה.
תכונה זו מקבלת שני סוגים ערכים: ערכים המציינים מידה בפיקסלים
כגון 1px ומילים שמורות הבאים לציין האם הקו יהיה דק, עבה או בינוני.
border-collapse collapse
seperate
במקרה שהערך שתכונה זו תקבל הוא collapse גבולות הטבלה
יהפכו להיות לגבול אחד משותף. במקרה זה התכונות
border-spacing וכן empty-cells לא יהיו פעילים גם אם יוגדרו.
במקרה שנגדיר seperate אזי כל תא בטבלה יקבל גבול  נפרד משלו.
border-spacing ערך מספרי
בפיקסל או
סנטימטר
וכד'
פעיל רק כאשר התכונה border-collapse מוגדרת כ - seperate.
במקרה זה אם יוגדר רק ערך אחד הוא יתפוס לגבי הרווח שבין
התאים אופקית ואנכית.
אם יוגדרו שני ערכים אזי הערך הראשון יתייחס לרווח האופקי בין
התאים ואילו השני לרווח האנכי.
border-style dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid
מתכונה זו קובעת כיצד ייראו קווי הגבול של הטבלה. התכונה מקבלת
ערכים באמצעות מילים שמורות. הערכים מגדירים למשל האם הקו
יהיה שקוע, מקווקו, בולט, רציף וכדומה.
border-color ערך מספרי
או מילה
שמורה לצבע
בעזרת תכונה זו נגדיר מה יהיה צבע הקווים המגדירים את
גבולות הטבלה.

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

border-width:medium;
border-collapse:seperate;
border-spacing:2px;
border-style:solid;
border-color:grey;

   

גובה ורוחב טבלה (Dimensions)

ב - HTML 5 בוטלו תכונות ה - Width  וה - Height של טבלאות ומכאן החשיבות הרבה שבשימוש ב - CSS לצורך הגדרת ממדי טבלאות. באמצעות התכונות width  ו - height ב - CSS ניתן לשלוט בצורה מוחלטת על ממדי הטבלה שלנו. ולא רק על המיתאר החיצוני של הטבלה אלא גם על גובהם ורוחבם של אלמנטים שונים בתוך הטבלה. בשורות הקוד הבאות תוכלו למצוא דוגמה להגדרת רוחבה וגובהה של טבלה כמו גם שליטה על האלמנטים <th>  וגם <td> בתוכה.


table td, th
{
width:100%;
}
th
{
height:40px;
}

   

יישור ומיקום הטקסט בטבלה

בעזרת שתי תכונות: text-align ו - vertical-align ביכולתנו להגדיר את מיקום הטקסט במישור האופקי (מימין לשמאל) וברמה הורטיקלית (מלמעלה למטה). להלן טבלה המציגה תכונות אלה ואת הערכים שהן יכולות לקבל:

תכונה ערכים הסבר
text-align left
right
center
justify
inherit
בעזרת תכונה זו נגדיר את מיקום הטקסט בתוך תאי הטבלה שלנו.
ההטקסט יכול להיות ממורכז או צמוד לשמאל התא או לימינו. ביכולתנו
להגדירעבור כל סוג של אלמנט בטבלה יישור טקסט שונה.
כך למשל ביכולתנו להגדיר טקסט ממורכז עבור הכותרת וטקסט מיושר
לימין עבור התאים שבשורות מתחת לכותרת.
vertical-align baseline
bottom
inherit
middle
sub
super
text-bottom
text-top
top
בעזרת תכונה זו נגדיר מה יהיה צבע הקווים המגדירים את
גבולות הטבלה.

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

table td, th
{
text-align:left;
vertical-align:bottom;
}
th
{
text-align:center;
}

   


כותרות (caption-side)

אחד האלמנטים ב - HTML היכולים לקנן בתוך טבלה הוא האלמנט <caption>. בתוך אלמנט זה נמקם כותרת לטבלה שלנו. שפת  CSS מאפשרת  לנו לבחור היכן תמוקם הכותרת: מעל הטבלה או מתחתיה. לשם כך נשתמש בתכונה המובנית caption-side. תכונה זו יכולה לקבל אחד משלושה ערכים כפי שביכולתכם לראות בטבלה הבאה:

תכונה ערכים הסבר
caption-side inherit

בחירה בערך inherit תגרום לכך שהכותרת תירש את הערך של האלמנט
שבתוכה היא מקננת.
bottom בחירה בערך bottom תגרום למיקום הכותרת מתחת לטבלה.
top ברירת המחדל היא top, שמשמעותו היא מיקום הכותרת מעל הטבלה.

בדוגמה הבאה אראה כיצד נמקם כותרת מתחת לטבלה:

caption
{
  caption-side:bottom;
}

   

הערה: אינטרנט אקספלורר יתמוך בתכונה זו רק אם בראש דף ה - HTML שלנו ימוקם ה - doctype של המסמך.

תאים ריקים (empty-cells)

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

תכונה ערך הסבר
empty-cells inherit
בחירה בערך inherit תגרום לכך שהכותרת תירש את הערך של האלמנט
שבתוכה היא מקננת.
hide במקרה שנעביר ערך זה נגרום לכך שהדפדפן שלנו יסתיר את גבולות ורקעי
התאים הריקים בטבלה שלנו.  התאים יוסתרו רק במקרה שהגדרנו עבור הטבלה
כי הגבולות של התאים הינם נפרדים.  כאמור, נעשה זאת באמצעות התכונה
border-collapse.
התכונה empty-cells תעבוד באינטרנט אקספלורר רק אם נגדיר בראש הדף
את סוג המסמך שלנו (doctype).
show ערך זה יגרום לכך שהתאים הריקים בטבלה שלנו יוצגו. זהו ערך ברירת המחדל
של התכונה empty-cells.

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

table
{
   border-collapse:separate;
   empty-cells:hide;
}

   


עיצוב טבלאות תוך שימוש בצבעים

השימוש בצבע מקובל מאוד בעיצוב טבלאות. CSS מעמידה לרשותנו שלוש תכונות שבאמצעותן ניתן לעצב טבלאות מרהיבות:

תכונה ערכים הסבר
border-color ערך מספרי
או מילה
שמורה לצבע
בעזרת תכונה זו נגדיר מה יהיה צבע הקווים המגדירים את
גבולות הטבלה.
background-color ערך מספרי
או מילה
שמורה לצבע
בעזרת תכונה זו נגדיר מה יהיה צבע הרקע של תאי הטבלה
color ערך מספרי
או מילה
שמורה לצבע
בעזרת תכונה זו נגדיר מה יהיה צבע הטקסט בטבלה.

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

table, td, th
{
border-width:1px;
border-style:solid;
border-color:green;
}
th
{
background-color:blue;
color:white;
}

   


עימוד טבלאות  (table-layout)

התכונה table-layout היא אחת התכונות שכמעט ולא משתמשים בה למרות שאם משתמשים בה נכון היא יעילה ועשויה להאיץ מאוד את טעינתם של דפים שבהם טבלאות מרובות שורות. להלן הערכים שניתן להעביר לתכונה table-layout ומשמעותם:

תכונה ערכים הסבר
table-layout auto זהו ערך ברירת המחדל. העברת ערך זה לתכונה table-layout פירושה שכל עמודה בטבלה תהיה ברוחב כזה שיוכל להכיל את הערך הגדול ביותר באותה עמודה. תהליך טעינת והצגת טבלה מרובת שורות יהיה במקרה זה איטי מאוד משום שהדפדפן צריך לקרוא כל שורה ושורה בטבלה ולהעריך מה צריך להיות רוחבה של כל עמודה בטבלה.
fixed כאשר נעביר ערך זה לתכונה table-layout יגרום הדבר לדפדפן לקבוע את רוחב השורה על סמך רוחבה של הטבלה והרוחב המוגדר של עמודותיה. פירוש הדבר שאין הדפדפן צריך לקרוא את כל השורות בטבלה כדי לקבוע את רוחב השורה ועמודותיה אלא הוא יכול לקרוא את השורה הראשונה בלבד ולהתחיל להציג את השורות בטבלה ללא שהות.
inherit בחירה בערך inherit תגרום לכך שהטבלה תירש את הערך של האלמנט
שבתוכו היא מקננת.

בדוגמה הבאה אציג שתי טבלאות שונות שבראשונה שבהן התכונה table-layout מקבלת את הערך fixed ואילו בשנייה את הערך auto:

<style type="text/css">
table.aut {table-layout:auto}
table.fix {table-layout:fixed}
</style>

   


מאמרים וכלים נוספים בנושא זה

איך נאיר שורה בטבלה כאשר עומדים מעליה וזאת בעזרת קוד CSS בלבד

מודל הטבלה ועבודה עם טבלאות ב - HTML


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש