טבלאות עם CSS

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

איך עושים את זה? האמת שזה די קל! בואו ונדגים!

טבלה די מגעילה ודי בסיסית, אבל טבלה. לא עשיתי אותה עם tr או td אלא עם div. איך הקוד נראה? ככה:

<div class="table">
  <div class="row">
    <div class="cell">ליכוד</div>
    <div class="cell">עבודה</div>
    <div class="cell">הרשימה המאוחדת</div>
    <div class="cell">יש עתיד</div>
  </div>
  <div class="row">
    <div class="cell">30</div>
    <div class="cell">24</div>
    <div class="cell">13</div>
    <div class="cell">11</div>
  </div>
</div>

איך ה-CSS נראה?

.table {
    display:table;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
}

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

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

הנה דוגמה חיה:

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

נשאלת השאלה מה קורה עם אני שם לתא הראשון 90 אחוז, לתא השני 20 אחוז ולתא השלישי גם 20 אחוז. מה קורה כשיש יותר ממאה אחוזים? הפתרון הוא פשוט – התא הראשון לוקח את הכל ומה שנותר מתחלק לתאים האחרים. הפתרון מבחינתי הוא לא לאפשר לתאים לחרוג ממאה אחוז…

הבעיה העיקרית היא מה קורה אם אני רוצה colspan של תא אחד שיתפרס על כל השורה, כמו התא השחור בדוגמה למעלה. אם יש שני תאים או יותר, אין בעיה – אבל מה קורה אם יש לי תא אחד? במקרה הזה, אני חייב שהתא האחד הזה יהיה absolute (והטבלה תהיה relative כמובן) והרוחב שלו יוגדר למאה אחוז. הדוגמה לעיל היא דוגמה טובה,

איך זה נראה עם קוד, למי שמתעצל להסתכל בכלי המפתחים או שרוצה לעשות copy&paste? ככה:

  .example-table {
      display: table;
      table-layout: fixed;
      width: 200px;
      position: relative;
  }
  .example-row {
      display: table-row;
      height: 40px;
  }
  .example-cell {
      display: table-cell;
  }
  .red {
      background: red;
  }
  .blue {
      background: blue;
  }
  .green {
      background: green;
  }
  .black {
      background: black;
  }
  .colspan_3 {
      height: 40px;
      position: absolute;
      width: 100%;
  }
  .first {
      width: 40px;
  }
  .last {
      width: 80%;
  }
  .fill {
      width: 20%;
  }

מבנה ה-HTML נראה כך:

<div class="example-table">
   <div class="example-row"><span class="example-cell red first"></span><span class="example-cell blue fill"></span><span class="example-cell green last"></span></div>
   <div class="example-row">
      <span class="example-cell black colspan_3"></span>
   </div>
</div>

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