נצא מתוך הנחה שהגעת למסקנה שאתה בכלל צריך טבלה (נתונים טבלאיים), נשאלת
השאלה (הנכונה מבחינתך) איך לעזאזל אנו מעצבים אותה?

ישנם מספר נושאים שיש לשים עליהם דגש.

כאשר השתמשנו במאפיין border בתג הטבלה קיבלנו גבולות בין כל התאים בטבלה באופן אוטומטי.
כאשר אנו משתמשים ב-CSS, גבול לטבלה הוא למסגרת הטבלה בלבד ולא לתאים שלה, אם כן כיצד אנו פותרים זאת?

המאפיין border ב-CSS, למאפיין border ישנן אפשרויות רבות, אך אנו נתמקד בשלוש בלבד:
color, style, width

ניתן לכתוב את אלמנטי העיצוב בצורה מפורשת:

קוד:

border-color:#000000;
border-style:solid;

או בצורה מרומזת ישירות למאפיין border:

קוד:

border:solid #000066 5px;

(אין חשיבות לסדר של המאפיינים)

נחזור לענייניו, טבלאות.
ראינו שמאפיין border על התג טבלה, אחראי רק למסגרת הטבלה, כאשר רוצים לרשת את
כל הטבלה אנו נאלצים לספק מאפינים לכל תא (td).
ניתן להשתמש במחלקה (class) או ישירות לעצב את התג td:

קוד:

td.blackBorder
{
border-color:#000000;
}

מפתרון זה אנו עדים לבעיה חדשה, כאשר כל תא מקבל גבול, אזי כל מגע בין תאים מכפיל
את הגבול. כלומר אם הגדרנו לכל תא את המאפיין הבא:

קוד:

border:1px solid #000000;

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

קוד:

table {
	border-collapse:collapse;
}

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

בתקווה שהמדריך עזר,

[ זיו ]
[ fat fish ]