أساسيات بناء الجداول في 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 دورًا مهمًا في تحسين مظهر الجداول وجعلها أكثر جاذبية وسهولة في القراءة، خاصة مع التحديات التي تفرضها الشاشات والأجهزة المختلفة. إتقان بناء الجداول وتنسيقها يعد مهارة أساسية لأي مطور ويب يسعى لتقديم محتوى غني ومنظم واحترافي.

المراجع


MDN Web Docs – HTML tables


W3Schools – HTML Table Tutorial





            
                        معلومة تحتاج إلى تصحيح؟ حدّد الجملة وأرسل بلاغًا واضحًا.⚑ أبلغ عن هذا المحتوى                    
        دليلك في مواضيعمساحة لكلّ اهتمام.
انتقل إلى مجال جديد، أو أكمل القراءة في موضوع تحبّه.
اكتشف المجالات 
في هذه الصفحة
تعريف الجدول في HTMLالعناصر الأساسية لبناء الجدولكيفية إنشاء جدول بسيط في HTMLالتحكم في مظهر الجدول باستخدام CSSخصائص متقدمة للجداول في HTMLأفضل الممارسات لبناء الجداول في HTMLاستخدام العنصرجداول متجاوبة (Responsive Tables)مثال كامل متقدم على جدول منسقجدول يوضح أهم عناصر بناء الجداول في HTMLالخلاصةالمراجع
روابط مفيدة
من نحنتواصل معناالأسئلة الشائعةدليل الموقع والسياسات
    
    أكمل الاستكشافقد تحب أن تقرأ أيضًا
    
                                    
            البرمجة            إنشاء مدونة باستخدام Node.js
            إنشاء مدوّنة باستخدام Node.js وExpress (الجزء الأول) في عصر التطور التكنولوجي المتسارع، أصبحت منصات التدوين ال…
            11 يونيو 2025
        
    
        
                                    
            البرمجة            تحويل HTML إلى قالب ووردبريس
            مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس يشكل ووردبريس أحد أكثر أنظمة إدارة المحتوى ا…
            11 يونيو 2025
        
    
        
                                    
            البرمجة            تنظيم الشيفرة في JavaScript
            تصميم النّصوص البرمجيّة: تنظيم JavaScript يُعدُّ تنظيم النصوص البرمجية في JavaScript من الركائز الأساسية التي…
            11 يونيو 2025
        
    
        
    
        
            مواضيع.كل قراءة، فكرة جديدةمعرفة وأدوات تساعدك في يومك.
اقرأ، جرّب، ورتّب ما يهمك.
            استكشف
أدوات مواضيعمسارات الاستكشافمكتبتيالرئيسيةالمجالات والتصنيفاتآخر المواضيعالأسئلة الشائعة
            عن مواضيع
الطقسالتاريخ والمناسباتمن نحنمبادئ النشرتواصل معناالإبلاغ عن محتوى
            السياسات والحقوق
سياسة الخصوصيةملفات تعريف الارتباطشروط الاستخدامجميع السياسات والمعلومات
        
        © 2026 مواضيع. جميع الحقوق محفوظة.تواصل معنا من الموقع إلى أعلى الصفحة ↑