إنشاء جدول بلغة HTML من الصفر إلى الإثقان
المقـدمـة: إنشاء جدول في HTML
هل حَضَـرَتْكَ فكرة إنشاء جدول على أحد صفحات موقعك بلغة HTML؟
سواء خَطرَت بِبالِكَ هذه الفكرة أو لم تخطر، فإنِّي أُذكِّرُكَ مرة أخرى أنَّ لغة HTML هي اللغة المستخدمة لإنشاء صفحات الويب ومحتواها. بل هي المُكون الأساسي لصفحات الويب . لذلك ، تعلم HTML فهي رغم أنها قاعدة أساسية لبرمجة المواقع الإلكترونية إلا أنها لغةٌ بسيطة و سهلة التعلم .
في مقالة هذا اليوم، سنتعلم معاً كيفية إنشاء جدول HTML خطوة بخطوة من الصفر إلى الإثقان. ولكن ما جدوى الجداول على صفحات الويب؟ مما لا شك فيه أن أصحاب المواقع يريدون في كثير من الأحيان نشر بعض البيانات والمعلومات التي لا يمكن إظهارها بشكل متسق إلا من خلال الجداول.
سأعمل جاهداً على تبسيط الدرس حتى يستوعبه المبتدئون . أما المحترفون فإنني أرفع لهم القبعة و أنتظر منهم النّصح و العون.
مقالتي هاته لن تتناول إنشاء الجدول فقط، ولكن كل ما يحتاجه ليبدو في شكل مقبول ويؤدي الغاية منه.
عـلى بركــة الله
1. إنشاء جدول HTML بسيط
في البداية ، سنتعلم العلامات الأساسية المستخدمة في HTML لإنشاء جدول، وككل علامات أو سمات HTML تكون دائماً محاطة بهذين الرمزين: “<” و “>”.
أول العلامات التي يجب معرفتها لإنشاء جدول هي:
<table> - <table/> وهي تمثل بداية الجدول ونهايته.
<tr> - <tr/>: يشير إلى بداية ونهاية صف الجدول. <td>-<td/>: يشير إلى بداية ونهاية محتويات الخلية.في HTML ، يتم إنشاء جدول سطراً بسطر. في كل سطر
<tr> تتم الإشارة إلى محتويات الخلايا المختلفة
<td>.
بشكل تخطيطي ، يتم إنشاء جدول كما في الشكل التالي:
جدول يحتوي على 4 سطور و 12 خانة
- نبدأ بالشــرح:
نقول السطـر <tr> هو ما نراه في المثال مرسوم بشكل أفقي ◻️ والذي يضم ثلاث خانات .
والخلايا هو كل خانة داخل السطـر ◻️ والمشار إليها ب <td>
إذن لدينا علامة سطر <tr> تتضمن مجموعة من الخلايا <td> على سبيل المثال ، إذا كنت أرغب في إنشاء جدول من 4 سطور ، وكل سطر يحتوي على ثلاث خلايا أو أعمدة ، سأضطر إلى كتابة هذه الشفيرة لتتضح لنا سلطة الوسوم التي ذكرناها فوق :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<table> <tr> <td>رشيد</td> <td>عليه</td> <td>عبلة</td> </tr> <tr> <td>كمال</td> <td>سميرة</td> <td>عابد</td> </tr> <tr> <td>غانم</td> <td>ميلود</td> <td>رقية</td> </tr> <tr> <td>حميدو</td> <td>علال</td> <td>شهرزاد</td> </tr> </table> |
هذه هي النتيجة:
| رشيد | عليه | عبلة |
| كمال | سميرة | عابد |
| غانم | ميلود | رقية |
| حميدو | علال | شهرزاد |
لاحظوا أن هذا الجدول بدون حدود
أيــايــاي !! 🏃♂️ 🗣 كل هذا التعب، 🛠 وفي الأخير جدول بلا حدود؟! لا بد من حـل!
لا تقلق فأنت في قسم HTML ، أنت فقط تنشئ هيكل الجدول ! أما تحسين الجدول فهو من اختصاص CSS ، هل نسيتَ ذلك؟
وإن كنت في شك، فإن إضافة الحدود بسيطة جداً ، فلا شك أنك مازلت تذكر كود CSS المخصص لذلك!
لا تنسـى زيارة درس إنشاء الحدود في CSS ففيه ما يـ…. ( لابأس إكتشفه بنسفك واتركنا مع الجداول ).
الطريقة هنا سهلة، فقط أضف هذه الشفيرة إلى ملف CSS أو إلى style في ملف HTML:
|
1 2 3 4 5 6 7 8 9 |
table /*إنشاء حدود للجدول { border-collapse: collapse; /* هاته الحدود ستجمع كل المحتوى ليبدو رائعاً */ } td /* إنشاء حدود لكل خلايا الجدول... */ { border: 1px solid #A8A8A8; /* أحب اللون الرمادي في الحدود */ } |
هذه هي النتيجة:
| رشيد | علية | عبلة |
| كمال | كريم | عابد |
| غانم | جمال | رقية |
| حميدو | خديجة | شهرزاد |
جدول بالجدود
🔶 سـطــر الرأس
الآن بعد أن أصبح لدينا جدولاً بحدوده ، سنضيف له سطر العنوان. في المثال السابق كانت عدة أسماء ولم نبين صفاتها، لكن بإضافة سطر العنوان سنعرف لماذا وضعنا حميدو في العمود الأول ولم نضعه في العمود الثالث. سنعرف ذلك الآن، وسنكتب في العناوين “الناجحون” و “المستدركون” و “الراسبون”.
يتم إنشاء سطر العنوان بعلامة
<tr> كما فعلنا في الجداول السابقة ، ولكن الخلايا التي يحتوي عليها هذه المرة ، مؤطرة بعلامات
<th> وليست
<td>!
لنـــــرى:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<table> <tr> <th>الناجحون</th> <th>المستدركون</th> <th>الراسبون</th> </tr> <tr> <td>رشيد</td> <td>عليه</td> <td>عبلة</td> </tr> <tr> <td>كمال</td> <td>سميرة</td> <td>عابد</td> </tr> <tr> <td>غانم</td> <td>ميلود</td> <td>رقية</td> </tr> <tr> <td>حميدو</td> <td>علال</td> <td>شهرزاد</td> </tr> </table> |
هذه هي النتيجة:
| الناجحون | المستدركون | الراسبون |
|---|---|---|
| رشيد | علية | عبلة |
| كمال | كريم | عابد |
| غانم | جمال | رقية |
| حميدو | خديجة | شهرزاد |
جدول بسطر الرأس
🔶 عنـوان الجـدول
في الحقيقة ينقصنا عنصر مهم في هذا الجدول، إنه العنوان. إن العنوان له أهمية بالنسبة للزائر، فهو يعلم بسرعة عن محتوى الجدول.
المثال الموجود بين أيدينا يمثل لائحة لنتائج تلاميذ أحد الأقسام داخل مدرسة. ولكن بالنسبة للزائر سيشرد فكره حين يرى الجدول، لن يستطيع تحديد موضوعه ، ولن يعرف عن من يتحدث. إذن ماذا ينقصنا؟ ينقصنا عنوان الجدول طبعاً.
لحسن الحظ ، توجد علامة <caption>!
يتم وضع هذه العلامة في بداية الجدول ، قبل الرأس مباشرةً. ثم نكتب عنوان الجدول كما في الشكل التالي:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<table> <caption>نتائج قسم ثانية باك علوم رياضية 5 ثانوية الياسمين</caption> <tr> <th>الناجحون</th> <th>المستدركون</th> <th>الراسبون</th> </tr> <tr> <td>رشيد</td> <td>علية</td> <td>عبلة</td> </tr> <tr> <td>كمال</td> <td>كريم</td> <td>عابد</td> </tr> <tr> <td>غانم</td> <td>جمال</td> <td>رقية</td> </tr> <tr> <td>حميدو</td> <td>خديجة</td> <td>شهرزاد</td> </tr> </table> |
| الناجحون | المستدركون | الراسبون |
|---|---|---|
| رشيد | علية | عبلة |
| كمال | كريم | عابد |
| غانم | جمال | رقية |
| حميدو | خديجة | شهرزاد |
هذا جدول بالعنوان
يجب أن تعلم أنه يمكنك تغيير موضِع العنوان باستخدام خاصية CSS البديلة: caption-side والتي يمكن أن تأخذ قيمتين:
top: سيتم وضع العنوان أعلى الجدول (افتراضي)
bottom: سيتم وضع العنوان أسفل الجدول.
2. إنشاء جدول منظم
لقد تعلمنا أن ننشئ جداول بسيطة. وهذه الجداول البسيطة، في الحقيقة كافية في معظم الحالات، لأنها فعلاً توفي بالغرض، لكن البعض سيحتاج إلى عمل جداول أكثر تعقيدًا في بعض الحالات.
هنا سنكتشف تقنيتين تخص الجداول الكبيرة :
بالنسبة للجداول الكبيرة ، يمكن تقسيمها إلى ثلاثة أجزاء:
- رأس الجدول
- جسم الجدول
- أسفل الجدول.
بالنسبة لبعض الجداول ، قد تحتاج إلى دمج بعض الخلايا مع بعض.
🔶 تقسيم الجداول الكبيرة
إذا كانت جداولك كبيرة بما يكفي ، فسيكون من مصلحتك تقطيعها إلى عدة أجزاء. لهذا، فإن HTML توجد عنده علامات تحدد “المناطق” الثلاثة للجدول:
- الرأس l’en-tête (في الأعلى): يتم تعريفه بالعلامات <thead> </ thead>.
- الجسم le corps (في الوسط): يتم تعريفه بعلامات <tbody> </ tbody> .
- أسفل الجدول le pied du tableau (أسفل): يتم تعريفه بعلامات <tfoot> </ tfoot>.
ماذا سنفعل في أسفل الجدول؟ بشكل عام ، إذا كان الجدول طويلًا ، فعلينا بنسخ خلايا الرأس ولصقها في أسفل الجدول . وهذا سيسمح لك برؤية ما يشير إليه كل عمود، حتى في أسفل الجدول حين تقوم بتمرير الصفحة من الأعلى إلى الأسفل.
وبشكل تخطيطي ، يتم تقطيع الجدول إلى ثلاثة أجزاء كما هو موضح في الشكل التالي:
جدول مقسم إلى ثلاثة أقسام
إنه أمر مربك بعض الشيء ولكن ينصح بكتابة العلامات بالترتيب التالي:
- <thead>
- <tbody>
- <tfoot>
إليك الرمز الذي يجب كتابته لإنشاء الجدول في ثلاثة أجزاء:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<table> <caption>نتائج قسم ثانية باك علوم رياضية 5 ثانوية الياسمين</caption> <thead> <!-- رأس الجدول --> <tr> <th>الناجحون</th> <th>المستدركون</th> <th>الراسبون</th> </tr> </thead> <tfoot> <!-- أسفل الجدول --> <tr> <th>الناجحون</th> <th>المستدركون</th> <th>الراسبون</th> </tr> </tfoot> <tbody> <!-- جسم الجدول --> <tr> <td>رشيد</td> <td>علية</td> <td>عبلة</td> </tr> <tr> <td>كمال</td> <td>كريم</td> <td>عابد</td> </tr> <tr> <td>غانم</td> <td>جمال</td> <td>رقية</td> </tr> <tr> <td>حميدو</td> <td>خديجة</td> <td>شهرزاد</td> </tr> </tbody> </table> |
إقرأ يضاً:
<
p style=”direction: ltr;”>