إنشاء جدول في HTML

نشرت من قبل jabism في

إنشاء جدول بلغة HTML من الصفر إلى الإثقان

    هل حَضَـرَتْكَ فكرة إنشاء جدول على أحد صفحات موقعك بلغة HTML؟

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

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

مقالتي هاته لن تتناول إنشاء الجدول فقط، ولكن كل ما يحتاجه ليبدو في شكل مقبول ويؤدي الغاية منه. 

عـلى بركــة الله

1. إنشاء جدول HTML بسيط

في البداية ، سنتعلم العلامات الأساسية المستخدمة في HTML لإنشاء جدول، وككل علامات أو سمات HTML تكون دائماً محاطة بهذين الرمزين: “<” و “>”.

أول العلامات التي يجب معرفتها لإنشاء جدول هي:


  <table> - <table/> وهي تمثل بداية الجدول ونهايته.

<tr> - <tr/>: يشير إلى بداية ونهاية صف الجدول.

<td>-<td/>: يشير إلى بداية ونهاية محتويات الخلية.


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

جدول يحتوي على 4 سطور و 12 خانة


  • نبدأ بالشــرح:

نقول السطـر <tr> هو ما نراه في المثال مرسوم بشكل أفقي ◻️ والذي يضم ثلاث خانات .

والخلايا هو كل خانة داخل السطـر  ◻️ والمشار إليها ب <td>  

إذن لدينا علامة سطر <tr> تتضمن مجموعة من الخلايا <td> على سبيل المثال ، إذا كنت أرغب في إنشاء جدول من 4 سطور ، وكل سطر يحتوي على ثلاث خلايا أو أعمدة ، سأضطر إلى كتابة هذه الشفيرة لتتضح لنا سلطة الوسوم التي ذكرناها فوق :

هذه هي النتيجة:

 

رشيد عليه عبلة
كمال سميرة عابد
غانم ميلود رقية
حميدو علال شهرزاد

لاحظوا أن هذا الجدول بدون حدود 


 أيــايــاي !! 🏃‍♂️ 🗣 كل هذا التعب، 🛠 وفي الأخير جدول بلا حدود؟! لا بد من حـل!  

لا تقلق فأنت في قسم HTML ، أنت فقط تنشئ هيكل الجدول ! أما تحسين الجدول فهو من اختصاص CSS ، هل نسيتَ ذلك؟

وإن كنت في شك، فإن إضافة الحدود بسيطة جداً ، فلا شك أنك مازلت تذكر  كود CSS المخصص لذلك!

لا تنسـى زيارة درس إنشاء الحدود في CSS ففيه ما يـ…. ( لابأس إكتشفه بنسفك واتركنا مع الجداول ).

الطريقة هنا سهلة، فقط أضف هذه الشفيرة إلى ملف CSS أو إلى  style في ملف HTML:

 

هذه هي النتيجة:

 

رشيد علية عبلة
كمال كريم عابد
غانم جمال رقية
حميدو خديجة شهرزاد

جدول بالجدود


🔶 سـطــر الرأس

الآن بعد أن أصبح لدينا جدولاً بحدوده ، سنضيف له سطر العنوان. في المثال السابق كانت عدة أسماء ولم نبين صفاتها، لكن بإضافة سطر العنوان سنعرف لماذا وضعنا حميدو في العمود الأول ولم نضعه في العمود الثالث. سنعرف ذلك الآن، وسنكتب في العناوين  “الناجحون” و “المستدركون” و “الراسبون”.
يتم إنشاء سطر العنوان بعلامة <tr> كما فعلنا في الجداول السابقة ، ولكن الخلايا التي يحتوي عليها  هذه المرة ، مؤطرة بعلامات <th> وليست <td>!

لنـــــرى:

 

هذه هي النتيجة:

الناجحون المستدركون الراسبون
رشيد علية عبلة
كمال كريم عابد
غانم جمال رقية
حميدو خديجة شهرزاد

جدول بسطر الرأس


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

🔶 عنـوان الجـدول

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

لحسن الحظ ، توجد علامة <caption>!
يتم وضع هذه العلامة في بداية الجدول ، قبل الرأس مباشرةً. ثم نكتب عنوان الجدول كما في الشكل التالي:

 

نتائج قسم ثانية باك علوم رياضية 5  ثانوية الياسمين

الناجحون المستدركون الراسبون
رشيد علية عبلة
كمال كريم عابد
غانم جمال رقية
حميدو خديجة شهرزاد

هذا جدول بالعنوان


الآن أصبح الجدول واضحاً أكثر عندما أضفنا له العنوان

يجب أن تعلم أنه يمكنك تغيير موضِع العنوان باستخدام خاصية CSS البديلة:  caption-side والتي يمكن أن تأخذ قيمتين:

top: سيتم وضع العنوان أعلى الجدول (افتراضي)

bottom: سيتم وضع العنوان أسفل الجدول.


2. إنشاء جدول منظم

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

هنا سنكتشف تقنيتين تخص الجداول الكبيرة :

بالنسبة للجداول الكبيرة ، يمكن تقسيمها إلى ثلاثة أجزاء:

  1. رأس الجدول
  2. جسم الجدول
  3. أسفل الجدول.

بالنسبة لبعض الجداول ، قد تحتاج إلى دمج بعض الخلايا مع بعض.

🔶 تقسيم الجداول الكبيرة

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

  • الرأس l’en-tête  (في الأعلى): يتم تعريفه بالعلامات <thead> </ thead>.
  • الجسم le corps (في الوسط): يتم تعريفه بعلامات <tbody> </ tbody> .
  • أسفل الجدول le pied du tableau (أسفل): يتم تعريفه بعلامات <tfoot> </ tfoot>.

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

وبشكل تخطيطي ، يتم تقطيع الجدول إلى ثلاثة أجزاء كما هو موضح في الشكل التالي:

 

جدول مقسم إلى ثلاثة أقسام

إنه أمر مربك بعض الشيء ولكن ينصح بكتابة العلامات بالترتيب التالي:

  1. <thead>
  2. <tbody>
  3. <tfoot>

إليك الرمز الذي يجب كتابته لإنشاء الجدول في ثلاثة أجزاء:

إعــلـم جـيِّـداً :
يجب أن تعلم أنه لا يلزمك استخدام هذه العلامات الثلاث (،،) في جميع الجداول. ستستخدمها فقط إذا كانت الجداول كبيرة  وتحتاج إلى تنظيمها بشكل أكثر وضوحاً. بالنسبة للجداول “الصغيرة” ، يمكنك بسهولة الإبقاء على الطريقة البسيطة التي اشتغلنا عليها  في البداية.

لا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء.

jabism

عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، خبرة مهمة في الفلاش والفوتوشوب ومشاكل الويندوز .

0 تعليق

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *