وثائق 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.

احتفظ بالامتدادات للبنية الحقيقية

الامتدادات تجعل الجدول أصعب قراءة بقارئ الشاشة، وأصعب في الفرز والتصفية والنسخ إلى جدول بيانات. استخدمها حيث تكون البيانات مجمّعة فعلًا (مجموع، عنوان فوق أعمدة فرعية، حصة تستمر ساعتين). وإذا احتاج جدول إلى امتدادات كثيرة، فجدولان أبسط غالبًا أوضح.

أخطاء شائعة

الإبقاء على الخلايا المغطّاة. خلية 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 في الجداول