الدرس (17) تعلم html : الجداول ( الجزء الثالث )

بسم الله الرحمن الرحيم

درس اليوم إن شاء الله بيكون خاتمة لسلسلة دروس الجداول في لغة html و سيكون فيه عرض مفاهيم مهمة في
بناء الجداول

سنتعرف على أول مفهوم إلا وهو (colspan) , ما هو و ماذا يفيد ؟؟

يفيد هذا الشيء في تلخيص و منع من تكرار نفس العبارة لمقصد واحد , فمثلاً في هاتين الصورتين مقدمة لما سوف نشرحه

الفرق بين الاولى و الثانية في أن الأولى في الصف الأول كانت تحتوي على أربعة أعمدة و الصورة الثاني اصبحت في عامودين

فما قلنا منعنا من تكرار نفس العبارة ووضعنا نفس العبارة في عامدو واحد أو خلية واحدة لأن المعلومات تحت كلمة computer (1) المكررة هم لكلا العبارة المكررة او العمود المكرر فعملنا على الاختصار في العمودين إلى عامود واحد و فعلنا ذلك بإضافة كود

colspan="2"

إلى العامود الأول الصف الأول و قمنا بحذف العامود الثاني في الصف الاول ليصبح الجدول على هذا الشكل

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <tr> <td colspan="2">Computer (1)</td> <td colspan="2">Computer (2)</td> </tr> <tr> <td>ram 1GB</td> <td>cpu intel</td> <td>ram 2GB</td> <td>cpu amd</td> </tr> <tr> <td>rom 64GB</td> <td>OS (M)</td> <td>rom 128 GB</td> <td>OS (W)</td> </tr> </table> </body> </html>

فجدول كان على هذا الشكل

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <tr> <td>Computer (1)</td> <td>Computer (1)</td> <td>Computer (2)</td> <td>Computer (2)</td> </tr> <tr> <td>ram 1GB</td> <td>cpu intel</td> <td>ram 2GB</td> <td>cpu amd</td> </tr> <tr> <td>rom 64GB</td> <td>OS (M)</td> <td>rom 128 GB</td> <td>OS (W)</td> </tr> </table> </body> </html>

فالأختلاف الحاصل بين الجدولين السابقين بالتحديد ان قمنا بحذف المحدد باللون الاحمر في النص التالي المأخوذ من الجدول الثاني مع العلم اني حذفت العامود الرابع من الصف الأول ايضاً لنفس السبب الذي هو لإختصار التكرار من (computer (2

<td>Computer (1)</td>

<td>Computer (2)</td>

و قمنا بإضافة الكود الذي هو يأخذ عامودين من الصف الأول

<td colspan="2">Computer (1)</td>

<td colspan="2">Computer (2)</td>

في الذي سبق اخذنا عامودين لكل من

Computer (1)

Computer (2)

و الرقم الذي باللون الأزرق هو يعني بأن أخذنا عامودين وهو الرقم 2
................................................................................................
نأتي الآن إلى شيء مماثل للذي سبق لكن الإختلاف في اختصار صفين الذين يقعان في العامود الواحد , كيف ذلك ؟؟؟
أنظر إلى الصورتين التاليتين لتفهم الفرق

لتكن الاكواد المستعملة في الصور على الشكل التالي

الصورة الأولى أكوادها هن

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <tr> <td>Computer (1)</td> <td>ram 1GB</td> <td>cpu intel</td> </tr> <tr> <td>Computer (1)</td> <td>Crom 64GB</td> <td>OS (W)</td> </tr> <tr> <td>Computer (2)</td> <td>ram 2GB</td> <td>OS (M)</td> </tr> </table> </body> </html>

الصورة الثانية أكوادها هن

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <tr> <td rowspan="2">Computer (1)</td> <td>ram 1GB</td> <td>cpu intel</td> </tr> <tr> <td>Crom 64GB</td> <td>OS (W)</td> </tr> <tr> <td>Computer (2)</td> <td>ram 2GB</td> <td>OS (M)</td> </tr> </table> </body> </html>

كما سبق فقد حذفت العامود الأول في الصف الثاني , وفي الصورة الأولى كانت اكواد الصف الثاني على الشكل التالي

<td>Computer (2)</td>

<td>ram 2GB</td>

<td>OS (M)</td>

فحذفت العبارة الملونة باللون الأحمر ليصبح في الصورة الثانية على الشكل التالي
<td>Crom 64GB</td>

<td>OS (W)</td>
ومن ثم نضيف في الصف الأول العامود الأول عبارة

rowspan="2"

لتتغير وسوم الصف الأول العامود الأول من

<td>Computer (1)</td>

إلى

<td rowspan="2">Computer (1)</td>

وكلما نزيد من الرقم 2 كلما حجزنا اكثر من الصفوف في نفس العامود

نأتي في آخر جزء من درسنا هو ان ننسق الجدول نستعمل في هذا الشيء عدة وسوم , الوسم الأب فيه هو

<colgroup></colgroup>

نضع هذين الوسمين اسفل الوسم <table> مباشرةً

ويكون داخل هذين الوسمين الجزء المسؤول أو وسوم تنسيق الجدول

فمثلاً نريد تغيير لون أعمدة معينة على كل الصفوف

انظر على الشكل التالي

هذا هوا الجدول

وهذه هي الأعمدة

في الصورة السابقة استعملنا لتلوين الأعمدة بهذا الشكل هذه الوسوم

<col span="2" style="background:#E5E5F1;">

<col span="1" style="background:#C0C0EA;">

في السطر الأول الذي فيه رقم 2 باللون الأحمر كنا نعني من الرقم 2 ان أول عامودين اعطي خلفيتهم لون معين ف style تعني الشكل و

background

تعني خلفية اي خلفية العامود

#E5E5F1

تعني كود اللون الذي استخدمته في تلوين أول عامودين

في السطر الثاني الذي فيه الرقم 1 الملون باللون الأحمر

كنت اعني من الرقم 1 أن أول عامود بعد العامودين في السطر الأول لونهم بلون معين

انظر ما بعد style هذا ينتمي للغة css و لكن المطلوب منك معرفة شكل الوسم ككل

السطرين السابقين

<col span="2" style="background:#E5E5F1;">

<col span="1" style="background:#C0C0EA;">

يضعان كما قلنا بين الوسمين

<colgroup></colgroup>
ملحوظة : ترتيب التلوين في الاعمدة يمكنك تعديله فيمكنك القول ان أول عامود يلون بلون و بعدها ثاني عامودين يلونون بلون معين تختاره

ففي النهاية أعرض لكم الوسوم التي استخدمناها قبل قليل لتنسيق الجدول مع وسوم الجدول

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <colgroup> <col span="2" style="background:#E5E5F1;"> <col span="1" style="background:#C0C0EA;"> </colgroup> <tr> <td rowspan="2">Computer (1)</td> <td>ram 1GB</td> <td>cpu intel</td> </tr> <tr> <td>Crom 64GB</td> <td>OS (W)</td> </tr> <tr> <td>Computer (2)</td> <td>ram 2GB</td> <td>OS (M)</td> </tr> </table> </body> </html>

وبهذا نكون قد انتهينا من سلسلة تعلم كيفية انشاء الجداول في لغة html

السلام عليكم و رحمة الله و بركاته