כיצד לעשות טבלה רספונסיבית

בעבר, כשבנו אתרי אינטרנט, כל העימוד נעשה על ידי שימוש בטבלאות. עם הזמן, קוד ה HTML התפתח והעימוד עבר מטבלאות ל BOX MODEL והעיצוב נעשה בעזרת CSS.

תגית TABLE נשארה ועדין משתמשים בה. רק שכיום היא משמשת למה שהיא נועדה לעשות. טבלאות.

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

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

טבלאות רספונסיביות

אם ניקח לדוגמא עמוד של תנועות אחרונות בבנק, יהיו לנו בדרך כלל השדות הבאים:
– תאריך
– תיאור
– אסמכתא
– זכות
– חובה
– יתרה

והעמוד ייראה בערך כך

כאשר נעבור לעמוד במכשיר הסלולרי שלנו, תהיה לנו גלילה רוחבית – דבר המקשה על הניווט בעמוד ולראות את כל הנתונים או שחלק מהנתונים יעלמו – אם מוגדר על אחד האלמנטים האבות של הטבלה overflow: hidden

כך תראה הטבלה במכשיר סלולרי

כיצד לעשות טבלה רספונסיבית?

אז מה עושים אם רוצים להציג את הטבלה בצורה טובה בכל המכשירים? דרך אחת היא לכתוב "טבלה" בעזרת תגיות אחרות כגון: DIV, SECTION, SPAN וכו' והדרך השניה – אם אין אפשרות לגעת בקוד למשל – היא בעזרת CSS

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

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

רכיבים כאלו ניתן למצוא לשלל הפריימוורקים השונים: React, Vue, Angular, Material UI ועוד. מי שעושה בהם שימוש, צריך לקחת בחשבון שלפעמים לעשות קסטומיזציה לאתר שלו, יכול להיות דבר מתסכל וגם אז, כשמסיימים, לפעמים מגלים שהרכיב לא עובד כמו שרוצים

הדרך הנכונה לטבלה רספונסיבית

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