أساسيات الجداول في لغة HTML

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

ما هو مفهوم الجداول في لغة html؟

الجدول ( Table ) هو عبارة عن مجموعة منظمة من البيانات تتكون من صفوف وأعمدة ( بيانات جدولية ). يسمح لك الجدول بالبحث بسرعة وسهولة عن القيم التي تشير إلى نوع من الاتصال بين أنواع مختلفة من البيانات ، على سبيل المثال شخص وعمره ، أو يوم من أيام الأسبوع ، أو جدول زمني لحمام سباحة محلي.

في هذا الدرس ستتعلم كيف تنشئ جدول html, و كيف تضيف فيه صفوف, و كيف تضيف فيه أعمدة و كيف تدمج الأعمدة او الأسطر مع بعضها.

ملاحظة : انا لا ادعي الملكية الفكرية لهذا المقال وإنما قمت بترجمته من مصادر انجليزية

كيف يعمل الجدول؟

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

متى يجب ألا تستخدم جداول HTML؟

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

باختصار ، يعد استخدام الجداول للتخطيط بدلاً من تقنيات تخطيط CSS فكرة سيئة. الأسباب الرئيسية هي كما يلي:

تعمل جداول التخطيط على تقليل إمكانية الوصول للمستخدمين ضعاف البصر : برامج قراءة الشاشة ، التي يستخدمها المكفوفون ، تفسر العلامات الموجودة في صفحة HTML وتقرأ المحتويات على المستخدم. نظرًا لأن الجداول ليست الأداة المناسبة للتخطيط ، والعلامات أكثر تعقيدًا من تقنيات تخطيط CSS ، فإن إخراج برامج قراءة الشاشة سيكون مربكًا لمستخدميهم.
تنتج الجداول حساء العلامات : كما ذكرنا أعلاه ، تتضمن تخطيطات الجدول عمومًا هياكل علامات أكثر تعقيدًا من تقنيات التخطيط المناسبة. يمكن أن يؤدي هذا إلى صعوبة كتابة التعليمات البرمجية وصيانتها وتصحيحها.
لا تستجيب الجداول تلقائيًا : عندما تستخدم حاويات تخطيط مناسبة (مثل <header>، <section>، <article>، أو <div>) ، يتم تعيين عرضها الافتراضي على 100٪ من عنصرها الأصلي. من ناحية أخرى ، يتم تحديد حجم الجداول وفقًا لمحتواها افتراضيًا ، لذلك يلزم اتخاذ تدابير إضافية للحصول على تصميم تخطيط الجدول للعمل بشكل فعال عبر مجموعة متنوعة من الأجهزة.

كيفية إنشاء جداول في لغة HTML ؟

لإنشاء جدول في الصفحة نستخدم الوسوم التالية لبنائه بالشكل الذي نريده:

<table> </table> هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل جدول.
<section> </section> تستخدمه لإضافة عنوان للجدول من اجل اظهاره فوق الجدول للدلالة على محتوى الجدول.
<tr> </tr> تستخدمه لإضافة صف في الجدول حيث انه لا يمكن اضافة اي عمود طالما انه لا يوجد صف.
<th> </th> تستخدمه لإضافة خانة في السطر تمثل عنوان, أي النص الذي تضعه فيها يظهر بخط عريض و في المنتصف.
<td> </td> تستخدمه لإضافة خانة في السطر تمثل معلومة عادية, أي النص الذي تضعه فيها يظهر كنصر عادي.

ملاحظة

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

بالتأكيد CSS توفر لك إمكانيات هائلة لتصميم الجدول و لكن بما أننا ندرس و نركز على ما توفره لنا لغة HTML فقط, سنتطرق للخصائص التي توفرها لنا هي فقط.

في HTML ، يتم إنشاء الجدول سطراً بسطر. في كل سطر <tr> تتم الإشارة إلى محتويات الخلايا المختلفة <td> بشكل تخطيطي .

إنشاء جدولك الأول بلغة HTML:

لقد تحدثنا عن الجدوال بلغة html بما فيه الكفاية ، لذلك دعونا نتعمق في مثال عملي ونبني جدولًا بسيطًا.

يتم وضع محتوى كل جدول من هذه العلامات اثنين: <table></table>. أضفها داخل نص HTML الخاص بك.
أصغر حاوية داخل الجدول هي خلية جدول ، يتم إنشاؤها بواسطة الوسم <td> ("td" تعني "بيانات الجدول"). أضف الكود التالي داخل وسم الجدول:
```
<table> <td>Hi, I'm your first cell.</td> </table>
```
إذا أردنا صفًا من أربع خلايا ، فنحن بحاجة إلى نسخ هذه العلامات ثلاث مرات. قم بتحديث محتويات الجدول الخاص بك لتبدو كما يلي:
```
<td> first cell.</td>
<td> second cell.</td>
<td> third cell.</td><td> fourth cell.</td>
```

كما سترى ، لا يتم وضع الخلايا تحت بعضها البعض ، بل يتم محاذاتها تلقائيًا مع بعضها البعض في نفس الصف. <td>ينشئ كل عنصر خلية واحدة ويشكلون معًا الصف الأول. كل خلية نضيفها تجعل الصف ينمو لفترة أطول.

لمنع هذا الصف من النمو والبدء في وضع الخلايا اللاحقة في الصف الثاني ، نحتاج إلى استخدام <tr>العنصر (يرمز "tr" إلى "صف الجدول"). دعنا نتحرى هذا الآن.

ضع الخلايا الأربع التي أنشأتها بالفعل داخل <tr>العلامات ، مثل:

<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>

لقد قمت الآن بإنشاء صف واحد ، وقم بعمل واحد أو اثنين آخرين - كل صف يجب أن يتم لفه في وسم <tr>عنصر إضافي ، مع تضمين كل خلية في وسم <td>.

نتيجة

يجب أن ينتج عن ذلك جدول يشبه ما يلي:

ملاحظة : يمكنك أيضًا العثور على هذا على GitHub كـ simple-table.html ( شاهد النتيجة مباشرة أيضًا ).

هل يمكننا استخدام الوسم <td> بدون الوسم <tr> في جداول html ؟

ينشئ العنصر < td > خلية بيانات واحدة في <HTML <table. يجب أن تكون خلايا البيانات td تستخدم كعناصر الطفل أحد الوالدين < TR >، والمجموعة الناتجة من < TD > العناصر سوف يتم تقديم كصف جدول واحد في <table> وإذا لم لم نستخدم الوسم tr سوف تكون جميع الخلايا في صف واحد حتى اذا استخدمنا الوسم br

إضافة صف الرأس بستخدام عناصر <th>

الآن دعنا نوجه انتباهنا إلى رؤوس الجدول - الخلايا الخاصة التي تبدأ في بداية صف أو عمود وتحدد نوع البيانات التي يحتوي عليها هذا الصف أو العمود (على سبيل المثال ، راجع خليتي "الشخص" و "العمر" في الأول المثال الموضح في هذه المقالة). لتوضيح سبب فائدتها ، ألق نظرة على مثال الجدول التالي. أولاً الكود المصدري:

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

الآن الجدول الفعلي الذي تم عرضه :

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

رؤوس الجدول في لغة HTML

لنبدأ في تحسين هذا الجدول.

أولاً ، قم بعمل نسخة محلية من ملفات dog-table.html و Min-table.css في دليل جديد على جهازك المحلي. يحتوي HTML على نفس مثال Dogs كما رأيته أعلاه.
للتعرف على رؤوس الجدول كرؤوس ، بصريًا ودلالة ، يمكنك استخدام <th>العنصر ( يشير الحرف "th" إلى "رأس الجدول"). يعمل هذا بالطريقة نفسها تمامًا مثل a <td>، باستثناء أنه يشير إلى رأس ، وليس خلية عادية. انتقل إلى HTML الخاص بك ، وقم بتغيير جميع <td>العناصر المحيطة برؤوس الجدول إلى <th>عناصر.
احفظ HTML الخاص بك وقم بتحميله في متصفح ، وسترى أن الرؤوس تبدو الآن مثل الرؤوس.

ملاحظة : يمكنك العثور على مثالنا النهائي على dog-table-fixed.html على GitHub ( شاهده على الهواء مباشرة أيضًا ).

لماذا الرؤوس مفيدة؟

لقد أجبنا بالفعل جزئيًا على هذا السؤال - من الأسهل العثور على البيانات التي تبحث عنها عندما تبرز الرؤوس بوضوح ، ويبدو التصميم أفضل بشكل عام.

ملاحظة : تأتي عناوين الجدول مع بعض التصميم الافتراضي - فهي جريئة ومتمركزة حتى إذا لم تقم بإضافة التصميم الخاص بك إلى الجدول ، لمساعدتها على التميز.

تحتوي رؤوس الجداول أيضًا على فائدة إضافية - جنبًا إلى جنب مع scopeالسمة (التي سنتعرف عليها في المقالة التالية) ، فهي تتيح لك إمكانية الوصول إلى الجداول بشكل أكبر عن طريق ربط كل رأس بجميع البيانات الموجودة في نفس الصف أو العمود. يمكن لقراء الشاشة قراءة صف كامل أو عمود من البيانات دفعة واحدة ، وهو أمر مفيد جدًا.

السماح للخلايا بتمديد صفوف وأعمدة متعددة

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

يبدو الترميز الأولي كما يلي:

<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

لكن الناتج لا يعطينا ما نريده تمامًا:

نحن بحاجة إلى طريقة لجعل "الحيوانات" و "Hippopotamus" و "Crocodile" تمتد عبر عمودين ، و "الحصان" و "الدجاج" لتمتد إلى أسفل على صفين. لحسن الحظ، ورؤوس الجدول والخلايا لديها colspanو rowspanالسمات، والتي تسمح لنا لفعل تلك الأشياء. كلاهما يقبل قيمة رقم بدون وحدة ، والتي تساوي عدد الصفوف أو الأعمدة التي تريد تمديدها. على سبيل المثال ، colspan="2"يجعل الخلية تمتد على عمودين.

دعونا استخدام ل colspanو rowspanلتحسين هذا الجدول.

أولاً ، قم بعمل نسخة محلية من ملفات Animals-table.html و min-table.css في دليل جديد على جهازك المحلي. يحتوي HTML على نفس مثال الحيوانات كما رأيته أعلاه.
بعد ذلك ، استخدم colspanلجعل "الحيوانات" و "فرس النهر" و "التمساح" تمتد عبر عمودين.
أخيرًا ، استخدم rowspanلجعل "الحصان" و "الدجاج" يمتدان عبر صفين.
احفظ وافتح التعليمات البرمجية الخاصة بك في المستعرض لترى التحسن.

ملاحظة : يمكنك العثور على المثال النهائي الخاص بنا على Animals-table-fixed.html على GitHub ( شاهده على الهواء مباشرة أيضًا ).

توفير تصميم مشترك للأعمدة في جداول HTML

تصفيف بدون <col>

هناك ميزة أخيرة سنخبرك عنها في هذه المقالة قبل أن ننتقل.

تحتوي لغة HTML على طريقة لتحديد معلومات التصميم لعمود كامل من البيانات في مكان واحد - العناصر <col>و <colgroup>. توجد هذه لأنه قد يكون أمرًا مزعجًا وغير فعال الحاجة إلى تحديد النمط على الأعمدة - عليك عمومًا تحديد معلومات التصميم الخاصة بك في كل عمود <td>أو <th>في عمود ، أو استخدام محدد معقد مثل :nth-child. باستخدام css

ملاحظة :تنسيق الاعمدة مثل هذه محدودة الخصائص مثل : border، background، width، و visibility. لتعيين الخصائص الأخرى ، سيتعين عليك إما تحديد النمط كل عمود <td>أو <th>في العمود ، أو استخدام محدد معقد مثل :nth-child. باستخدام css

خذ المثال البسيط التالي:

<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>

مما يعطينا النتيجة التالية:

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

التصميم باستخدام <col>

بدلاً من القيام بذلك ، يمكننا تحديد المعلومات مرة واحدة على <col>عنصر. <col>يتم تحديد العناصر داخل <colgroup>حاوية أسفل <table>علامة الفتح مباشرة. يمكننا إنشاء نفس التأثير كما نراه أعلاه من خلال تحديد جدولنا على النحو التالي:

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

بشكل فعال ، نحن نحدد "عمودين نمط" ، أحدهما يحدد معلومات التصميم لكل عمود. نحن لا نقوم بتصميم العمود الأول ، ولكن لا يزال يتعين علينا تضمين <col>عنصر فارغ - إذا لم نفعل ذلك ، فسيتم تطبيق التصميم على العمود الأول فقط.

إذا أردنا تطبيق معلومات التصميم على كلا العمودين ، فيمكننا فقط تضمين <col>عنصر واحد بخاصية الامتداد عليه ، مثل هذا:

<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>

تمامًا مثل colspanو rowspan، spanيأخذ قيمة رقم غير محددة تحدد عدد الأعمدة التي تريد أن يطبق النمط عليها.

colgroup و col

حان الوقت الآن للذهاب بنفسك.

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

School timetable

	Mon	Tues	Wed	Thurs	Fri	Sat	Sun
الفترة الاولى	English			German	Dutch
الفترة الثانية	English	English		German	Dutch
الفترة الثالثة		German		German	Dutch
الفترة الرابعة		English		English	Dutch

أعد إنشاء الجدول باتباع الخطوات أدناه.

أولاً ، قم بتنزيل ملف timetable.html في دليل جديد على جهازك المحلي. يحتوي HTML على نفس الجدول الذي رأيته أعلاه ، مطروحًا منه معلومات تصميم العمود.
أضف <colgroup>عنصرًا في أعلى الجدول ، أسفل <table>العلامة مباشرةً ، حيث يمكنك إضافة <col>عناصرك (انظر الخطوات المتبقية أدناه).
يجب ترك العمودين الأولين غير منظمين.
أضف لون الخلفية إلى العمود الثالث. قيمة styleالسمة الخاصة بك هيbackground-color:#97DB9A;
قم بتعيين عرض منفصل في العمود الرابع. قيمة styleالسمة الخاصة بك هيwidth: 42px;
أضف لون الخلفية إلى العمود الخامس. قيمة styleالسمة الخاصة بك هيbackground-color: #97DB9A;
أضف لون خلفية مختلفًا بالإضافة إلى حد إلى العمود السادس ، للإشارة إلى أن هذا يوم خاص وأنها تقوم بتدريس فصل جديد. قيم styleالسمة الخاصة بك هيbackground-color:#DCC48E; border:4px solid #C1437A;
اليومين الأخيرين هما أيام مجانية ، لذا ما عليك سوى تعيينها على عدم وجود لون للخلفية ولكن على عرض محدد ؛ قيمة styleالسمة هيwidth: 42px;

انظر كيف تحصل على المثال. إذا واجهتك مشكلة ، أو أردت التحقق من عملك ، فيمكنك العثور على نسختنا على GitHub كـ timetable-fixed.html ( شاهدها اونلاين أيضًا ).

ملخص

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

اليمن التقني

القائمة الرئيسية

الصفحات

أساسيات جدول HTML -اليمن التقني