תיעוד HTML עם דוגמאות להרצה: טבלאות

Q: איך יוצרים טבלה ב-HTML?

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

Q: מה ההבדל בין th ל-td?

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

Q: למה לטבלת ה-HTML שלי אין גבולות?

לטבלאות אין גבולות כברירת מחדל. הוסיפו אותם עם CSS: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }. המאפיין הישן border="1" מיושן.

Q: איך הופכים טבלת HTML לרספונסיבית?

שימו את הטבלה במיכל עם overflow-x: auto. במסך צר הטבלה נגללת הצידה בתוך המיכל במקום להרחיב את כל העמוד.

איך יוצרים טבלה ב-HTML

טבלה היא אלמנט <table> שבנוי משורות (<tr>), וכל שורה בנויה מתאים: <th> לתאי כותרת ו-<td> לתאי נתונים.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table</title>
  <style>
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Language</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>Ada</td>
      <td>Python</td>
      <td>2023</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>C</td>
      <td>2021</td>
    </tr>
  </table>
</body>
</html>

לטבלה אין גבולות משלה; כלל ה-CSS היחיד מוסיף אותם כדי שתוכלו לראות את התאים. העמודות נוצרות מהתאים: התא הראשון בכל שורה הוא עמודה אחת, השני הוא עמודה שתיים, וכן הלאה. בכל שורה צריך להיות אותו מספר תאים. מחקו <td> והשורה הזו נגמרת מוקדם ומשאירה חור.

תאי <th> מודגשים וממורכזים כברירת מחדל. זה רק המראה; מה שחשוב הוא שהם תוויות, ועל זה החלק הבא.

אלמנטי הטבלה

אלמנט	מה הוא
`<table>`	הטבלה
`<caption>`	הכותרת של הטבלה, הילד הראשון של `<table>`
`<thead>`	קבוצת שורות הכותרת
`<tbody>`	קבוצת שורות הגוף (בטבלה יכולות להיות כמה)
`<tfoot>`	קבוצת השורות התחתונות, כמו סיכומים
`<tr>`	שורה
`<th>`	תא כותרת
`<td>`	תא נתונים
`<colgroup>`, `<col>`	עמודות, לעיצוב עמודה שלמה (רוחב, רקע)

גבולות מוסברים ב-HTML table border, ותאים שמתפרשים על כמה עמודות או שורות ב-colspan ו-rowspan.

תאי כותרת, scope ו-caption

טבלה עם כותרות לאורך החלק העליון ולאורך הצד צריכה לומר לאיזה כיוון כל כותרת מצביעה. scope="col" נותן שם לעמודה שמתחתיו, scope="row" נותן שם לשורה שלצידו. <caption> נותן לטבלה כותרת גלויה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headers and caption</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    caption { font-weight: bold; padding-bottom: 6px; }
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
    thead th { background: #e5e7eb; }
    tbody th { text-align: start; }
  </style>
</head>
<body>
  <table>
    <caption>Opening hours</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Opens</th>
        <th scope="col">Closes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>9:00</td>
        <td>17:00</td>
      </tr>
      <tr>
        <th scope="row">Saturday</th>
        <td>10:00</td>
        <td>14:00</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

עם הקוד הזה, קורא מסך שעובר לתא 14:00 יכול להכריז "Saturday, Closes, 14:00", כך שהמספר אף פעם לא מוקרא לבדו. בטבלה פשוטה עם שורת כותרת אחת, דפדפנים בדרך כלל מסיקים את הכותרות גם בלי scope, אבל לכתוב אותו לא עולה כלום ומבטל את הניחושים.

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

thead, tbody ו-tfoot

שלוש הקבוצות מחלקות את השורות לכותרת, לגוף ולחלק התחתון. החלק התחתון הוא המקום לסיכומים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>thead tbody tfoot</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; }
    thead th { border-bottom: 2px solid #111827; text-align: start; }
    tfoot td, tfoot th { border-top: 2px solid #111827; font-weight: bold; }
    .num { text-align: end; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Item</th><th scope="col" class="num">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Notebook</td><td class="num">4.50</td></tr>
      <tr><td>Pens (10)</td><td class="num">11.20</td></tr>
      <tr><td>Backpack</td><td class="num">39.00</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">Total</th><td class="num">54.70</td></tr>
    </tfoot>
  </table>
</body>
</html>

שני פרטים הופכים את המספרים לקריאים: text-align: end מיישר את הנקודות העשרוניות (לכל מחיר יש שתי ספרות אחרי הנקודה), ו-font-variant-numeric: tabular-nums נותן לכל ספרה אותו רוחב.

אם כותבים <tr> ישירות בתוך <table>, כמו בדוגמה הראשונה, הדפדפן מוסיף <tbody> סביב השורות בכל מקרה. לכן סלקטור CSS כמו table > tr אף פעם לא מתאים לשום דבר: בעמוד, השורות נמצאות בתוך tbody. השתמשו ב-table tr, או כתבו את ה-<tbody> בעצמכם.

עיצוב טבלה: פסים, ריחוף ורוחב

:nth-child צובע שורות לסירוגין, :hover מדגיש את השורה שמתחת לסמן, ו-width: 100% מותח את הטבלה לרוחב המיכל שלה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped table</title>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 8px 12px; text-align: start; }
    thead th { background: #2563eb; color: #fff; }
    tbody tr:nth-child(even) { background: #f3f4f6; }
    tbody tr:hover { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Course</th><th scope="col">Lessons</th><th scope="col">Level</th></tr>
    </thead>
    <tbody>
      <tr><td>HTML</td><td>40</td><td>Beginner</td></tr>
      <tr><td>CSS</td><td>55</td><td>Beginner</td></tr>
      <tr><td>JavaScript</td><td>120</td><td>Beginner</td></tr>
      <tr><td>React</td><td>60</td><td>Intermediate</td></tr>
    </tbody>
  </table>
</body>
</html>

text-align: start מיישר את טקסט הכותרת עם הנתונים שמתחתיו; אחרת th ממורכז. start במקום left שומר על יישור נכון בשפות מימין לשמאל.

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrolling table</title>
  <style>
    .scroll { max-width: 300px; overflow-x: auto; border: 1px solid #e5e7eb; }
    table { border-collapse: collapse; white-space: nowrap; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; text-align: start; }
  </style>
</head>
<body>
  <div class="scroll" tabindex="0" role="region" aria-label="Plans">
    <table>
      <thead>
        <tr><th scope="col">Plan</th><th scope="col">Price</th><th scope="col">Courses</th><th scope="col">Certificates</th><th scope="col">Support</th></tr>
      </thead>
      <tbody>
        <tr><td>Free</td><td>0</td><td>Some</td><td>No</td><td>Community</td></tr>
        <tr><td>Pro</td><td>12 per month</td><td>All</td><td>Yes</td><td>Email</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

המיכל מוגבל כאן ל-300 פיקסלים כדי לדמות מסך טלפון; גללו אותו הצידה. tabindex="0" מאפשר למשתמשי מקלדת להעביר פוקוס למיכל ולגלול אותו עם מקשי החצים, ו-role="region" עם aria-label נותן לעצירה הזו שם.

טבלאות הן לנתונים

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

טעויות נפוצות

שורות עם מספר תאים שונה. השורות הקצרות נגמרות מוקדם והעמודות מפסיקות להתיישר.
שימוש ב-<td> עם טקסט מודגש לכותרות. השתמשו ב-<th> כדי שהכותרות יהיו תוויות אמיתיות.
המאפיינים המיושנים border, cellpadding, cellspacing, bgcolor ו-align. השתמשו ב-CSS במקום.
לשים תוכן ישירות בתוך <tr> או <table>, מחוץ לכל תא. דפדפנים מוציאים אותו מהטבלה, בדרך כלל אל מעליה.
כותרת מעל הטבלה במקום <caption>.
table > tr ב-CSS. הדפדפן הכניס <tbody>; כתבו table tr או tbody tr.

שאלות נפוצות

איך יוצרים טבלה ב-HTML?

עטפו אותה ב-<table>, כתבו <tr> אחד לכל שורה, ושימו בתוכו את התאים: <th> לתאי כותרת ו-<td> לתאי נתונים. בכל שורה צריך להיות אותו מספר תאים, אלא אם חלק מהתאים מתפרשים על כמה עמודות.

מה ההבדל בין th ל-td?

<th> הוא תא כותרת שנותן שם לעמודה או לשורה, ו-<td> הוא תא נתונים. דפדפנים מציגים את <th> מודגש וממורכז, וקוראי מסך מקריאים את הכותרת המתאימה לפני כל תא נתונים כדי שהמספרים יהיו מובנים.

מה עושים thead, tbody ו-tfoot?

הם מקבצים שורות לכותרת, לגוף ולכותרת התחתונה (סיכומים) של הטבלה. הם מבהירים את המבנה לטכנולוגיה מסייעת, נותנים ל-CSS משהו לפנות אליו, וכשמדפיסים טבלה ארוכה, דפדפנים יכולים לחזור על ה-<thead> בכל עמוד.

למה לטבלת ה-HTML שלי אין גבולות?

לטבלאות אין גבולות כברירת מחדל. הוסיפו אותם עם CSS: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }. המאפיין הישן border="1" מיושן.

איך הופכים טבלת HTML לרספונסיבית?

שימו את הטבלה במיכל עם overflow-x: auto. במסך צר הטבלה נגללת הצידה בתוך המיכל במקום להרחיב את כל העמוד.

מושגים קשורים