לתוכן העניינים.

בפרק הקודם, למדנו על Panels ותוך כדי עשינו חזרה על ה – Grid System, היום נראה מה נקבל בעבודה עם טבלאות פשוטות.

כפי שדברנו בהקדמה, ובפרקים הראשונים כשעסקנו בעבודה עם ה – Grid System, הבנו שלא נכון לעמד את המסך בעזרת טבלאות ותתי טבלאות, אלא עם Div, אמנם עדיין יש שימוש בטבלאות, כגון תצוגה של סיכומים, או עבודה עם גרידים (רגילים, המאפשרים מיון, חיפוש וכדו’).

כדי לקבל עיצוב נחמד ועדין לטבלאות, נוסיף את המחלקה (class) בשם table לאלמנט ה – table שלנו, בנוסף נוכל להוסיף את אחד מהמחלקות הבאות:

• table-striped – נותן צבע רקע שונה לשורות. (לא זמין ב – IE8)
• table-bordered – נקבל border מסביב לכל העמודות.
• table-hover – צבע רקע כשהעכבר יעבור על שורה.
• table-condensed – כדי לצמצם את גובה כל שורה בחצי (מאפשר לראות יותר שורות בבת אחת, רלוונטי לטבלאות עם הרבה נתונים).

בשונה מעבודה עם Div שניתן בעזרת Grid System לשנות את כמות התוכן המוצגת ברוחב ולהוריד אותם כלפי מטה, בעבודה עם טבלאות (במידע טבלאי) אנחנו לא אמורים להוריד עמודות כלפי מטה – תחשבו על טבלה המציגה ציונים, לא ניתן להוריד חלק מהעמודות לשורות הבאות, ולכן ייתכן מצב בו נקבל scrollbar למסך, כדי למנוע זאת, ניתן לעטוף את הטבלה (כלומר div שעוטף את אלמנט ה – table) שיקבל את המחלקה table-responsive, כעת הטבלה עצמה תקבל את ה – scrollbar ולא כל המסך.

בפרק הבא נלמד על עבודה עם תמונות.