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

السمة 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 ولا يمنحك أي تحكم في اللون أو النمط. استخدم خاصية CSS border بدلًا منه.

كيف أجعل زوايا الجدول مستديرة؟

لا أثر لـ border-radius على جدول يحمل border-collapse: collapse. استخدم border-collapse: separate مع border-spacing: 0، وضع نصف القطر على الجدول، وأعطِ خلايا الزوايا نصف قطر مطابقًا (border-start-start-radius وأخواتها) كي لا تبرز خلفياتها من الزوايا.

كيف أزيل الحدود من الجدول؟

الجداول بلا حدود ما لم يُضفها شيء. احذف السمة border من الوسم <table>، أو اضبط border: none على table, th, td لتتجاوز ملف تنسيق يضيفها.

مفاهيم ذات صلة