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

Q: איך מוסיפים גבול לטבלה ב-HTML?

השתמשו ב-CSS על הטבלה ועל התאים שלה: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. הגבול על התאים מצייר את הרשת, ו-border-collapse: collapse ממזג גבולות שכנים לקווים בודדים.

Q: למה יש לטבלה שלי גבולות כפולים?

כברירת מחדל כל תא מצייר גבול משלו עם רווח בין התאים (border-collapse: separate), כך שתאים שכנים מציגים שני קווים. הגדירו border-collapse: collapse על ה- כדי למזג אותם לקו אחד.

Q: איך מעגלים את הפינות של טבלה?

ל-border-radius אין השפעה על טבלה עם border-collapse: collapse. השתמשו ב-border-collapse: separate עם border-spacing: 0, שימו את הרדיוס על הטבלה, ותנו לתאי הפינה רדיוס תואם (border-start-start-radius וחבריו) כדי שהרקעים שלהם לא יבלטו מהפינות.

Q: איך מסירים את הגבול מטבלה?

לטבלאות אין גבול אלא אם משהו מוסיף אותו. הסירו את המאפיין border מהתגית , או הגדירו border: none על table, th, td כדי לדרוס גיליון סגנונות שמוסיף אותם.

איך מוסיפים גבול לטבלה

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table border</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
  </style>
</head>
<body>
  <table>
    <tr><th>Size</th><th>Price</th></tr>
    <tr><td>Small</td><td>3.00</td></tr>
    <tr><td>Large</td><td>4.50</td></tr>
  </table>
</body>
</html>

הקיצור border מקבל רוחב, סגנון וצבע, בכל סדר: 1px solid #6b7280. שימו אותו על th, td, לא רק על table: גבול על הטבלה מצייר רק את המסגרת החיצונית.

border-collapse: separate מול collapse

border-collapse קובע אם תאים חולקים גבולות.

ערך	תוצאה
`separate` (ברירת מחדל)	לכל תא גבול משלו, עם רווח בין התאים שנקבע על ידי `border-spacing`
`collapse`	תאים שכנים חולקים גבול אחד; `border-spacing` מוזנח

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border: 2px solid #2563eb; }
    th, td { border: 2px solid #f59e0b; padding: 6px 10px; }
    .separate { border-collapse: separate; border-spacing: 6px; }
    .collapse { border-collapse: collapse; }
  </style>
</head>
<body>
  <table class="separate">
    <caption>separate</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
  <table class="collapse">
    <caption>collapse</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
</body>
</html>

בטבלה הנפרדת רואים את שתי השכבות: מסגרת הטבלה הכחולה ותיבה כתומה נפרדת סביב כל תא, עם border-spacing ביניהן. שנו את 6px ל-0 והתאים נוגעים זה בזה, אבל הקווים עדיין כפולים. רק collapse ממזג אותם.

כששני גבולות ממוזגים נפגשים ושונים זה מזה, הרחב מביניהם גובר. באותו רוחב, הסגנון מכריע (double גובר על solid, שגובר על dashed ועל dotted), ובתיקו הגבול של התא גובר על זה של השורה, שגובר על זה של הטבלה. לכן הקצה החיצוני של הטבלה הממוזגת כתום ולא כחול: לתאים ולטבלה יש שם גבולות solid של 2px, והתאים מנצחים.

רק קווים אופקיים, או רק קווים פנימיים

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border patterns</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 32px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { padding: 6px 12px; text-align: start; }

    /* 1. Row lines only */
    .rows th, .rows td { border-bottom: 1px solid #d1d5db; }
    .rows thead th { border-bottom: 2px solid #111827; }

    /* 2. Inner grid, no outer frame */
    .inner th, .inner td { border: 1px solid #d1d5db; }
    .inner tr:first-child th, .inner tr:first-child td { border-top: 0; }
    .inner tr:last-child th, .inner tr:last-child td { border-bottom: 0; }
    .inner th:first-child, .inner td:first-child { border-inline-start: 0; }
    .inner th:last-child, .inner td:last-child { border-inline-end: 0; }
  </style>
</head>
<body>
  <table class="rows">
    <thead><tr><th>Name</th><th>Score</th></tr></thead>
    <tbody>
      <tr><td>Ana</td><td>92</td></tr>
      <tr><td>Bob</td><td>87</td></tr>
    </tbody>
  </table>

  <table class="inner">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
  </table>
</body>
</html>

הטבלה השנייה מסירה את הגבול בצד החיצוני של כל תא קצה. border-inline-start ו-border-inline-end פירושם ההתחלה והסוף של השורה, כך שאותו CSS נשאר נכון בשפות מימין לשמאל, שבהן התא הראשון נמצא בצד השני.

פינות מעוגלות לטבלה

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rounded table</title>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #9ca3af;
      border-radius: 10px;
      font-family: system-ui, sans-serif;
    }
    th, td {
      padding: 8px 14px;
      border-bottom: 1px solid #9ca3af;
      border-inline-end: 1px solid #9ca3af;
    }
    th { background: #e5e7eb; }
    tr:first-child > :first-child { border-start-start-radius: 9px; }
    tr:first-child > :last-child { border-start-end-radius: 9px; }
    tr > :last-child { border-inline-end: 0; }
    tr:last-child > * { border-bottom: 0; }
  </style>
</head>
<body>
  <table>
    <tr><th>Plan</th><th>Price</th></tr>
    <tr><td>Free</td><td>0</td></tr>
    <tr><td>Pro</td><td>12</td></tr>
  </table>
</body>
</html>

שני תאי הפינה של הכותרת מקבלים רדיוס משלהם כדי שהרקע האפור יעקוב אחרי העיקול. בלעדיו, הפינות המרובעות שלהם בולטות מעבר לגבול המעוגל. הרדיוס הוא 9px, ה-10px של הטבלה פחות הגבול שלה ב-1px, כך ששני העיקולים מתיישרים.

צבע ועובי גבול לכל חלק

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border per part</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 14px; border: 1px solid #e5e7eb; text-align: start; }
    thead th { border-bottom: 3px solid #2563eb; }
    tfoot td { border-top: 3px double #111827; font-weight: bold; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Month</th><th>Sales</th></tr></thead>
    <tbody>
      <tr><td>July</td><td>120</td></tr>
      <tr><td>August</td><td>135</td></tr>
    </tbody>
    <tfoot><tr><td>Total</td><td>255</td></tr></tfoot>
  </table>
</body>
</html>

הקווים של 3px גוברים על האפורים של 1px במקום שבו הם נפגשים, לפי כללי המיזוג שלמעלה. לשאר מבנה הטבלה (thead, tfoot, th), ראו HTML table.

המאפיין border

מדריכים ישנים משתמשים במאפיינים על התגית <table>:

<table border="1" cellspacing="0" cellpadding="6">

דפדפנים עדיין מכבדים את border="1": הוא מצייר גבול על הטבלה ועל כל תא, במודל הנפרד, וזה נותן את המראה הכפול. שלושת המאפיינים מיושנים ב-HTML5. המקבילים ב-CSS הם border על התאים, border-spacing (או border-collapse: collapse) על הטבלה, ו-padding על התאים.

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

גבול רק על table. מקבלים מסגרת בלי קווים בפנים. הוסיפו את הגבול ל-th, td.
לשכוח את border-collapse: collapse, ואז לראות קווים כפולים.
border-radius עם border-collapse: collapse. הרדיוס מוזנח.
border-spacing עם border-collapse: collapse. ריווח עובד רק במודל הנפרד.
גבולות על <tr> במודל הנפרד. שורות לא מציירות גבולות אלא אם הטבלה ממוזגת; עצבו את התאים במקום.
שימוש ב-border="1" בקוד חדש. זה עדיין עובד, אבל אי אפשר לקבוע בו צבע והוא מיושן.

שאלות נפוצות

איך מוסיפים גבול לטבלה ב-HTML?

השתמשו ב-CSS על הטבלה ועל התאים שלה: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. הגבול על התאים מצייר את הרשת, ו-border-collapse: collapse ממזג גבולות שכנים לקווים בודדים.

למה יש לטבלה שלי גבולות כפולים?

כברירת מחדל כל תא מצייר גבול משלו עם רווח בין התאים (border-collapse: separate), כך שתאים שכנים מציגים שני קווים. הגדירו border-collapse: collapse על ה-<table> כדי למזג אותם לקו אחד.

האם המאפיין border של טבלה עדיין תקין?

<table border="1"> עדיין מצייר גבולות בכל דפדפן, אבל הוא מיושן ב-HTML5 ולא נותן שליטה בצבע או בסגנון. השתמשו במאפיין border של CSS במקום.

איך מעגלים את הפינות של טבלה?

ל-border-radius אין השפעה על טבלה עם border-collapse: collapse. השתמשו ב-border-collapse: separate עם border-spacing: 0, שימו את הרדיוס על הטבלה, ותנו לתאי הפינה רדיוס תואם (border-start-start-radius וחבריו) כדי שהרקעים שלהם לא יבלטו מהפינות.

איך מסירים את הגבול מטבלה?

לטבלאות אין גבול אלא אם משהו מוסיף אותו. הסירו את המאפיין border מהתגית <table>, או הגדירו border: none על table, th, td כדי לדרוס גיליון סגנונות שמוסיף אותם.

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