وثائق HTML قابلة للتشغيل: الجداول في 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، والخلايا الممتدة على عدة أعمدة أو صفوف في 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، لكن كتابتها لا تكلف شيئًا وتزيل التخمين.

والتسمية التوضيحية هي أيضًا ما يعلنه قارئ الشاشة حين يصل إلى الجدول. فضّلها على عنوان موضوع فوق الجدول لا يرتبط به.

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. على الشاشة الضيقة يتمرر الجدول أفقيًا داخل الحاوية بدلًا من توسيع الصفحة كلها.

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