תיעוד HTML עם דוגמאות להרצה: colspan ו-rowspan

Q: מה עושה colspan ב-HTML?

colspan גורם ל- או להתפרס על כמה עמודות: תופס את המקום של שלושה תאים בשורה שלו. לשורה הזו צריכים אז להיות שני תאים פחות מאשר לשאר.

Q: מה עושה rowspan ב-HTML?

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

Q: תא יכול להשתמש ב-colspan וב-rowspan יחד?

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

Q: מה הערך המקסימלי של colspan?

דפדפנים מגבילים את colspan ל-1000 ואת rowspan ל-65534. ב-colspan, ערך 0 או ערך שלא מתחיל בספרה נחשב כ-1.

colspan: תא אחד לרוחב כמה עמודות

colspan="n" הופך תא לרחב כמו n עמודות. בשורה שלו יש אז n - 1 תאים פחות. כאן הסכום מתפרס על שתי העמודות הראשונות:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>colspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
    <tr><td>Pens</td><td>2</td><td>4.00</td></tr>
    <tr><td>Paper</td><td>1</td><td>6.50</td></tr>
    <tr><td class="span" colspan="2">Total</td><td>10.50</td></tr>
  </table>
</body>
</html>

בשורה האחרונה יש שני תאים, אבל הראשון נחשב כשניים, כך שהשורה עדיין מסתכמת בשלוש עמודות כמו האחרות.

rowspan: תא אחד לאורך כמה שורות

rowspan="n" הופך תא לגבוה כמו n שורות. השורות שמתחתיו מדלגות על העמודה הזו, כי התא הגבוה כבר ממלא אותה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rowspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
  </style>
</head>
<body>
  <table>
    <tr><th>Team</th><th>Member</th></tr>
    <tr><td class="span" rowspan="3">Design</td><td>Ana</td></tr>
    <tr><td>Bob</td></tr>
    <tr><td>Cy</td></tr>
    <tr><td>Web</td><td>Dee</td></tr>
  </table>
</body>
</html>

בשורות של Bob ו-Cy יש רק <td> אחד: עמודת Team כבר תפוסה על ידי "Design". שום דבר ב-HTML לא מסמן את זה, אז קראו טבלה עם rowspan מלמעלה למטה ועקבו אחרי העמודות שעדיין מכוסות.

colspan ו-rowspan יחד: מערכת שעות

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timetable</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; text-align: center; }
    th, td { border: 1px solid #6b7280; padding: 8px 14px; }
    thead th { background: #e5e7eb; }
    .html { background: #fde68a; }
    .css { background: #bfdbfe; }
    .lab { background: #bbf7d0; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Time</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">9:00</th><td class="html" rowspan="2">HTML</td><td class="css">CSS</td><td>Free</td></tr>
      <tr><th scope="row">10:00</th><td class="lab" colspan="2" rowspan="2">Lab</td></tr>
      <tr><th scope="row">11:00</th><td>Free</td></tr>
    </tbody>
  </table>
</body>
</html>

ספרו את שורת 10:00: כותרת השעה, אחר כך Mon מכוסה על ידי HTML מהשורה שמעל, ואז Lab ממלא את Tue ו-Wed. ב-11:00, Mon שוב פנוי ו-Lab עדיין מכסה את Tue ו-Wed, כך שבשורה יש תא נתונים אחד.

ספירת תאים כדי שהטבלה תישאר ישרה

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrong count</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
    .extra { background: #fee2e2; }
  </style>
</head>
<body>
  <table>
    <caption>Wrong</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td><td class="extra">D</td></tr>
  </table>
  <table>
    <caption>Right</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td></tr>
  </table>
</body>
</html>

בטבלה השגויה, השורה השנייה שכחה ש-A מכסה את העמודה הראשונה שלה, ולכן D נוחת בעמודה שלישית שאין לאף שורה אחרת. התיקון הוא למחוק תא אחד. אותה טעות עם colspan היא להשאיר את כל התאים המקוריים בשורה שיש בה את התא הרחב.

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

כותרות מקובצות עם colspan

כותרת יכולה להתפרס על העמודות שהיא מתארת, מעל שורה של כותרות ספציפיות יותר. סמנו אותה scope="colgroup" כדי שקוראי מסך יחילו אותה על כל העמודות שמתחתיה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grouped headers</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; text-align: center; }
    thead th { background: #e5e7eb; }
  </style>
</head>
<body>
  <table>
    <colgroup><col></colgroup>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2" scope="col">City</th>
        <th colspan="2" scope="colgroup">January</th>
        <th colspan="2" scope="colgroup">July</th>
      </tr>
      <tr>
        <th scope="col">Low</th><th scope="col">High</th>
        <th scope="col">Low</th><th scope="col">High</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">Oslo</th><td>-7</td><td>-1</td><td>13</td><td>22</td></tr>
      <tr><th scope="row">Rome</th><td>3</td><td>12</td><td>19</td><td>31</td></tr>
    </tbody>
  </table>
</body>
</html>

"City" מתפרסת על שתי שורות הכותרת עם rowspan="2", וכל חודש מתפרס על שתי העמודות שלו עם colspan="2". האלמנטים <colgroup> מגדירים את קבוצות העמודות ש-scope="colgroup" מתייחס אליהן. קורא מסך על התא 31 של Rome יכול אז לומר "Rome, July, High, 31". לשאר המבנה של טבלה, ראו HTML table.

השתמשו במיזוג רק למבנה אמיתי

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

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

השארת התאים המכוסים. תא עם colspan="2" מחליף שני תאים; מחקו את אחד המקוריים.
שכחה של השורות שמתחת ל-rowspan. כל אחת מהן צריכה תא אחד פחות.
כתיבת colspan על <tr>. זה עובד רק על <td> ו-<th>.
מיזוג בשביל פריסה ויזואלית, כמו שורת באנר לרוחב טבלת פריסה של עמוד. השתמשו ב-CSS grid לפריסה.
colspan="100%" במשמעות "כל הרוחב". הדפדפן קורא רק את הספרות שבהתחלה, כך שהתא הזה מתפרס על 100 עמודות ומוסיף לטבלה עמודות ריקות. הערך הוא מספר שלם של עמודות.

שאלות נפוצות

מה עושה colspan ב-HTML?

colspan גורם ל-<td> או <th> להתפרס על כמה עמודות: <td colspan="3"> תופס את המקום של שלושה תאים בשורה שלו. לשורה הזו צריכים אז להיות שני תאים פחות מאשר לשאר.

מה עושה rowspan ב-HTML?

rowspan גורם לתא להתפרס כלפי מטה על כמה שורות: <td rowspan="2"> ממלא את השורה שלו ואת זו שמתחתיה. השורה הבאה חייבת לדלג על העמודה הזו, כי התא שמעליה כבר מכסה אותה.

תא יכול להשתמש ב-colspan וב-rowspan יחד?

כן. <td colspan="2" rowspan="2"> מכסה גוש של שתי עמודות על שתי שורות. כל שורה שהוא עובר דרכה צריכה שני תאים פחות משלה.

למה בטבלה שלי יש תא נוסף שבולט החוצה?

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

מה הערך המקסימלי של colspan?

דפדפנים מגבילים את colspan ל-1000 ואת rowspan ל-65534. ב-colspan, ערך 0 או ערך שלא מתחיל בספרה נחשב כ-1.

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

HTML colspan ו-rowspan: איך ממזגים תאים בטבלה