אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » טבלאות עם CSS

טבלאות עם CSS

רן בר-זיק אוגוסט 2, 2015 7:30 am אין תגובות

אפשר ליצור טבלאות עם display: table ו-CSS בקלות רבה. כאן תלמדו איך.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

ליכוד
עבודה
הרשימה המאוחדת
יש עתיד

30
24
13
11

טבלה די מגעילה ודי בסיסית, אבל טבלה. לא עשיתי אותה עם 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 או לעצב אותה בדרך מיוחדת.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
CSS

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד