البرمجة

بناء الجداول في HTML

اخر تحديث 16/05/2025
20 تمت قراءة 4 دقيقة

أساسيات بناء الجداول في HTML

تُعد الجداول من العناصر الأساسية في تصميم صفحات الويب، حيث تُستخدم بشكل واسع لعرض البيانات المنظمة بطريقة سهلة القراءة والفهم. تعتمد الجداول في HTML على مجموعة من العناصر الهيكلية التي تُشكل شبكة من الصفوف والأعمدة تُرتب فيها البيانات بشكل منطقي ومرتب. في هذا المقال سيتم استعراض كافة أساسيات بناء الجداول في HTML بشكل مفصل، مع التركيز على كيفية إنشاء الجداول وتنسيقها واستخدامها بكفاءة في مختلف التطبيقات.

تعريف الجدول في HTML

الجدول في HTML هو هيكل يستخدم لعرض المعلومات على هيئة صفوف وأعمدة، ويتكون من عدة عناصر رئيسية تسمح بترتيب البيانات بطريقة منظمة. يمثل الجدول في مستند HTML باستخدام العنصر

مواضيع ذات صلة
، الذي يحتوي بداخله على صفوف

, كل صف بدوره يحتوي على خلايا بيانات

أو خلايا عناوين

.

يُعتبر استخدام الجداول في صفحات الويب طريقة تقليدية وفعالة لتقديم البيانات المعقدة التي تحتاج إلى تنظيم دقيق مثل الجداول المالية، الجداول الإحصائية، تقارير الأداء، وقوائم المنتجات.

العناصر الأساسية لبناء الجدول

لفهم طريقة بناء الجداول في HTML، من الضروري التعرف على العناصر الأساسية التي تُستخدم في هيكلة الجدول، وهي:

  • : العنصر الرئيسي الذي يحدد بداية ونهاية الجدول.

    • : يُستخدم لتعريف الصف داخل الجدول.

    • : يُستخدم لتحديد خلية بيانات داخل الصف.

    		• : يُستخدم لتحديد خلية عنوان داخل الصف، وغالبًا ما تكون في الصف الأول أو في الأعمدة الرئيسية لتوضيح محتوى الجدول.

    1. عنصر

    يُعتبر العنصر الأساسي في بناء الجدول، ويُستخدم كبداية لإنشاء جدول جديد. داخل هذا العنصر تُدرج بقية عناصر الجدول من صفوف وخلايا. يمكن إضافة خصائص مثل الحدود، عرض الجدول، والمحاذاة باستخدام سمات هذا العنصر أو عبر CSS.

    2. عنصر

    هو اختصار لـ “Table Row” أي صف الجدول. يُستخدم هذا العنصر لإنشاء صف جديد داخل الجدول. يمكن أن يحتوي الصف على خلايا بيانات أو خلايا عناوين.

    3. عنصر

    : يحتوي على الصفوف التي تمثل رؤوس الأعمدة.

    • : يحتوي على الصفوف التي تمثل بيانات الجسم الأساسية.

    • : يحتوي على الصفوف التي تمثل تذييل الجدول، والتي يمكن استخدامها لمجموع القيم أو معلومات أخرى.

    تساعد هذه العناصر في فصل هيكل الجدول وتسهيل التحكم به باستخدام CSS وجافا سكريبت، كما تدعم بعض المحركات عرض الجدول بشكل محسّن.

    مثال على استخدام هذه العناصر:

    html
    <table border="1">
  <thead>
    <tr>
      <th>المنتجth>
      <th>السعرth>
      <th>الكميةth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>حاسوبtd>
      <td>3000td>
      <td>7td>
    tr>
    <tr>
      <td>هاتفtd>
      <td>1500td>
      <td>15td>
    tr>
  tbody>
  <tfoot>
    <tr>
      <td>الإجماليtd>
      <td>4500td>
      <td>22td>
    tr>
  tfoot>
table>

    3. التحكم في حجم الجدول والخلية

    يمكن التحكم في عرض وارتفاع الجدول والخلية باستخدام سمات HTML مثل width و height أو باستخدام CSS، ما يسمح بتحسين العرض على مختلف الأجهزة.

    مثال:

    html
    <table style="width:80%; height:200px; border:1px solid black;">
  <tr>
    <td style="width:50%;">محتوى 1td>
    <td style="width:50%;">محتوى 2td>
  tr>
table>

    أفضل الممارسات لبناء الجداول في HTML

    • استخدام

    ,

    , و

    لفصل أقسام الجدول.

  • تجنب استخدام الجداول للتصميم العام للصفحات، فهي مخصصة لعرض البيانات المنظمة فقط.

  • استخدام CSS لفصل التنسيق عن الهيكلية، مما يسهل التعديل والصيانة.

  • توثيق الجدول بإضافة سمات مثل caption لوصف محتوى الجدول بوضوح.

    • استخدام العنصر

    يعبر عن “Table Data” أي خلية بيانات، ويحتوي على محتوى الجدول مثل نصوص، أرقام، صور، أو حتى عناصر HTML أخرى. هذا العنصر يُمثل وحدة العرض الأساسية داخل الصف.

    4. عنصر

    يمثل “Table Header” أي خلية عنوان، ويستخدم لتحديد العناوين داخل الجدول، سواء كانت في الصف العلوي (رؤوس الأعمدة) أو في الأعمدة الأولى (عناوين الصفوف). يظهر النص داخل

    		عادة بشكل عريض ووسط محاذاة.

    كيفية إنشاء جدول بسيط في HTML

    لبناء جدول بسيط يحتوي على ثلاثة أعمدة وصفين، يمكن استخدام الكود التالي كمثال:

    html
    <table border="1">
  <tr>
    <th>الاسمth>
    <th>العمرth>
    <th>المدينةth>
  tr>
  <tr>
    <td>محمدtd>
    <td>30td>
    <td>الرياضtd>
  tr>
  <tr>
    <td>سارةtd>
    <td>25td>
    <td>جدةtd>
  tr>
table>

    في هذا المثال:

    • تم إنشاء جدول بسيط بحدود باستخدام السمة border="1".

    • الصف الأول يحتوي على خلايا عناوين (الاسم، العمر، المدينة).

    • الصفان التاليان يحتويان على بيانات لكل شخص.

    التحكم في مظهر الجدول باستخدام CSS

    رغم أن HTML يسمح ببناء الجداول، إلا أن تنسيقها وتحسين مظهرها يتم بشكل أفضل باستخدام CSS. من خلال CSS يمكن التحكم في ألوان الخلفية، حدود الخلايا، محاذاة النص، والتباعد بين الخلايا.

    مثال على تنسيق جدول باستخدام CSS:

    html
    <style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 2px solid #333;
    padding: 10px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
    font-weight: bold;
  }
  tr:nth-child(even) {
    background-color: #fafafa;
  }
style>

<table>
  <tr>
    <th>المنتجth>
    <th>السعرth>
    <th>الكميةth>
  tr>
  <tr>
    <td>حاسوب محمولtd>
    <td>3500 ريالtd>
    <td>5td>
  tr>
  <tr>
    <td>هاتف ذكيtd>
    <td>1200 ريالtd>
    <td>10td>
  tr>
table>

    في هذا المثال:

    • استخدمنا border-collapse: collapse لجعل حدود الخلايا متجاورة بدلاً من منفصلة.

    • تم تحديد حجم الحواف والتباعد الداخلي.

    • أضيف لون خلفية مختلف للصفوف الزوجية لتحسين القراءة.

    خصائص متقدمة للجداول في HTML

    1. دمج الخلايا (الصفوف والأعمدة)

    في كثير من الأحيان تحتاج الخلية أن تمتد عبر عدة أعمدة أو صفوف، وهذا ما يُعرف بدمج الخلايا باستخدام الخاصيتين colspan و rowspan.

    • colspan: تسمح للخلية بالامتداد عبر عدة أعمدة.

    • rowspan: تسمح للخلية بالامتداد عبر عدة صفوف.

    مثال على دمج الخلايا:

    html
    <table border="1">
  <tr>
    <th>الشهرth>
    <th colspan="2">المبيعاتth>
  tr>
  <tr>
    <td>ينايرtd>
    <td>1000td>
    <td>1200td>
  tr>
  <tr>
    <td rowspan="2">فبرايرtd>
    <td>1100td>
    <td>1300td>
  tr>
  <tr>
    <td>1150td>
    <td>1250td>
  tr>
table>

    في المثال أعلاه:

    • رأس الجدول يحتوي على خلية تمتد عبر عمودين.

    • خلية الشهر “فبراير” تمتد عبر صفين.

    2. إضافة ترويسات متقدمة

    تُستخدم عناصر أخرى في HTML لتنظيم الجدول بشكل أكثر دقة، مثل:
    لتحديد رؤوس الأعمدة والصفوف لزيادة وضوح الجدول وتحسين الوصولية.

  • استخدام عناصر

    • يُستخدم لوصف محتوى الجدول بطريقة موجزة وواضحة، ويُعرض عادةً فوق الجدول. هذا العنصر يعزز من قابلية الفهم وإمكانية الوصول للزوار.

    مثال:

    html
    <table border="1">
  <caption>جدول المبيعات الشهريةcaption>
  <tr>
    <th>الشهرth>
    <th>المبيعاتth>
  tr>
  <tr>
    <td>ينايرtd>
    <td>5000td>
  tr>
table>

    جداول متجاوبة (Responsive Tables)

    مع تنوع الأجهزة التي يُعرض عليها محتوى الويب، أصبح من الضروري تصميم جداول تستجيب لأحجام الشاشات المختلفة. تقنيات مثل CSS Flexbox، Grid، واستخدام السكربتات تساعد على تحسين تجربة عرض الجداول على الهواتف والأجهزة المحمولة.

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

    مثال كامل متقدم على جدول منسق

    html
    html>
<html lang="ar">
<head>
  <meta charset="UTF-8" />
  <title>جدول منسقtitle>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      font-family: Arial, sans-serif;
    }
    caption {
      caption-side: top;
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 10px;
    }
    th, td {
      border: 1px solid #444;
      padding: 12px;
      text-align: center;
    }
    th {
      background-color: #ddd;
      font-weight: bold;
    }
    tbody tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    tfoot {
      background-color: #eee;
      font-weight: bold;
    }
  style>
head>
<body>
  <table>
    <caption>تفاصيل الطلبات الشهريةcaption>
    <thead>
      <tr>
        <th>رقم الطلبth>
        <th>اسم العميلth>
        <th>المنتجth>
        <th>الكميةth>
        <th>السعرth>
        <th>التاريخth>
      tr>
    thead>
    <tbody>
      <tr>
        <td>001td>
        <td>أحمدtd>
        <td>حاسوب محمولtd>
        <td>3td>
        <td>9000 ريالtd>
        <td>2025-05-01td>
      tr>
      <tr>
        <td>002td>
        <td>ليلىtd>
        <td>هاتف ذكيtd>
        <td>5td>
        <td>6000 ريالtd>
        <td>2025-05-03td>
      tr>
      <tr>
        <td>003td>
        <td>ساميtd>
        <td>طابعةtd>
        <td>2td>
        <td>2400 ريالtd>
        <td>2025-05-04td>
      tr>
    tbody>
    <tfoot>
      <tr>
        <td colspan="3">الإجماليtd>
        <td>10td>
        <td>17400 ريالtd>
        <td>td>
      tr>
    tfoot>
  table>
body>
html>

    جدول يوضح أهم عناصر بناء الجداول في HTML

    العنصر الوصف الاستخدام

    عنصر الجدول الأساسي يحدد بداية ونهاية الجدول

    صف داخل الجدول يحتوي على خلايا البيانات أو العناوين

    		خلية بيانات تحتوي على محتوى الجدول

    		خلية عنوان تمثل رؤوس الأعمدة أو الصفوف

    رأس الجدول يحتوي على صفوف العناوين

    جسم الجدول يحتوي على صفوف البيانات

    تذييل الجدول يحتوي على صفوف التلخيص أو الإجماليات

    عنوان الجدول وصف مختصر للجدول يُعرض فوق الجدول

    الخلاصة

    تمثل الجداول في HTML أداة قوية لتنظيم البيانات وعرضها بشكل منسق وواضح في صفحات الويب. تعتمد فعالية الجداول على فهم العناصر الأساسية المستخدمة في بنائها مثل

    ,

    ,

    , و

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

    المراجع

    1. MDN Web Docs – HTML tables

    2. W3Schools – HTML Table Tutorial

    اخر تحديث 16/05/2025
    20 تمت قراءة 4 دقيقة