HTML / الجداول
مفهوم الجدول
الجدول (Table) هو عنصر يستخدم في لغة HTML لعرض المعلومات بطريقة منظمة، مما يسهل على المستخدمين قراءة البيانات.
يُستخدم الجدول لعرض المعلومات في شكل أعمدة وأسطر، مما يسمح بتنسيق البيانات بشكل مرتب وسهل الفهم. في هذا الدرس، سنستعرض كيفية إنشاء جدول، وكيفية إضافة الأسطر والأعمدة وكيفية دمجها عند الحاجة.
إضافة جدول في الصفحة
لإضافة جدول إلى الصفحة، نستخدم مجموعة من الوسوم الخاصة التي تحدد هيكل الجدول، وهذه الوسوم هي:
-
<table></table>: هذا هو الوسم الأساسي الذي يُستخدم للإشارة إلى أن المحتوى الموجود بداخله هو جدول. -
<tr></tr>: يُستخدم لإضافة سطر جديد داخل الجدول. -
<th></th>: يُستخدم لإضافة خانة تمثل عنواناً في السطر، حيث يظهر النص داخلها بخط عريض وبالمركز. -
<td></td>: يُستخدم لإضافة خانة تحتوي على معلومات عادية، حيث يظهر النص داخلها بشكل تقليدي.
فيما يلي مثال يوضح كيفية إنشاء جدول يتكون من أربعة أسطر، حيث يحتوي كل سطر على ثلاث خانات:
<!DOCTYPE html> <html> <body> <table> <!-- هنا قمنا بتعريف السطر الأول في الجدول و بداخله وضعنا 3 خانات عبارة عن عناوين --> <tr> <th>ID</th> <th>Name</th> <th>Mark</th> </tr> <!-- هنا قمنا بتعريف السطر الثاني في الجدول و بداخله وضعنا 3 خانات عادية --> <tr> <td>1</td> <td>محمد على</td> <td>A</td> </tr> <!-- هنا قمنا بتعريف السطر الثالث في الجدول و بداخله وضعنا 3 خانات عادية --> <tr> <td>2</td> <td>محمود على</td> <td>A</td> </tr> <!-- هنا قمنا بتعريف السطر الرابع في الجدول و بداخله وضعنا 3 خانات عادية --> <tr> <td>3</td> <td>عبدالمنعم على</td> <td>C</td> </tr> <!-- هنا قمنا بتعريف السطر خمسه في الجدول و بداخله وضعنا 3 خانات عادية --> <tr> <td>4</td> <td>عبدالحميد على</td> <td>B</td> </tr> </table> </body> </html>
خصائص الجدول
هناك ثلاث خصائص أساسية يمكنك إضافتها لجعل الجدول يظهر بشكل أفضل وهي كالتالي:
- border: تُستخدم هذه الخاصية لإظهار حدود الجدول. الرقم الذي تعطيه يمثل سماكة الخطوط بين الأسطر والأعمدة.
- width: تُستخدم لتحديد عرض الجدول، مما يمنحك تحكمًا أكبر في كيفية ظهور الجدول على الصفحة.
- height: تُستخدم لتحديد ارتفاع الجدول، مما يتيح لك التحكم في المساحة التي يشغلها الجدول.
على الرغم من أن هذه الخصائص كانت شائعة الاستخدام في الإصدارات السابقة من HTML، فإن الإصدار الخامس يشجع على استخدام CSS لتنسيق الجداول. ولكن في هذا الدرس، سنركز على استخدام الخصائص الأساسية في HTML لزيادة وضوح الشرح.
المثال الاسم الأول
في المثال التالي، قمنا بإظهار خطوط الجدول بحجم 1 بيكسل:
<table border="1"> ... </table>
<!DOCTYPE html><html><body> <!-- هنا قمنا بإضافة خطوط للجدول حجمها 1 بيكسل --> <table border="1"> <tr> <th>ID</th> <th>Name</th> <th>Mark</th> </tr> <tr> <td>1</td> <td>محمد على</td> <td>A</td> </tr> <tr> <td>2</td> <td>محمود على</td> <td>A</td> </tr> <tr> <td>3</td> <td>عبدالمنعم على</td> <td>C</td> </tr> <tr> <td>4</td> <td>عبدالحميد على</td> <td>B</td> </tr> </table> </body> </html>
المثال الاسم الثاني
في المثال التالي، قمنا بتحديد عرض الجدول ليكون 100% وطوله 150 بيكسل:
<table border="1" width="100%" height="150"> ... </table>
<!DOCTYPE html> <html> <body> <!-- هنا قمنا بجعل عرض الجدول يساوي حجم الصفح نفسها لهذا وضعنا 100% و جعلنا طوله 150 بيكسل --> <table border="1" width="100%" height="150"> <tr> <th>ID</th> <th>Name</th> <th>Mark</th> </tr> <tr> <td>1</td> <td>محمد على</td> <td>A</td> </tr> <tr> <td>2</td> <td>محمود على</td> <td>A</td> </tr> <tr> <td>3</td> <td>عبدالمنعم على</td> <td>C</td> </tr> <tr> <td>4</td> <td>عبدالحميد على</td> <td>B</td> </tr> </table> </body> </html>
دمج خانات الجدول
إذا كنت ترغب في دمج خانات الجدول، فهناك خاصيتان يمكنك استخدامهما لتحقيق ذلك:
- colspan: تُستخدم لدمج الخانات الموجودة في نفس السطر، مما يسمح لك بتوحيد الخانات.
- rowspan: تُستخدم لدمج الخانات الموجودة على أكثر من سطر، مما يساعد في تنظيم البيانات بشكل أفضل.
يمكن استخدام الخاصيتين colspan و rowspan مع كل من
الوسم <th> و <td> فقط.
المثال فيها الحرف الأول
في المثال التالي، قمنا بدمج الخانة الأولى والثانية الموجودتين في السطر الأول:
<!DOCTYPE html> <html> <body> <table border="1" width="150" height="100"> <tr> <!-- سيتم عرضها على خانتين وراء بعض 'A' هنا قلنا أن الخانة التي يوجد فيها الحرف --> <td colspan="2">A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> <td>E</td> </tr> </table> </body> </html>
المثال فيها الحرف الثاني
في المثال التالي، قمنا بدمج الخانة الثانية في السطر الأول مع الخانة الثانية الموجودة تحتها في السطر الثاني:
<!DOCTYPE html><html><body><table border="1" width="150" height="100"><tr><!-- سيتم عرضها على خانتين تحت بعض 'B' هنا قلنا أن الخانة التي يوجد فيها الحرف --><td>A</td><td rowspan="2">B</td><td>C</td></tr><tr><td>D</td><td>E</td></tr></table></body></html></html>
المثال فيها الحرف الثالث
في المثال التالي، قمنا بدمج الخانة الثانية والثالثة في السطر الثاني مع الخانة الثانية والثالثة الموجودة تحتها في السطر الثالث:
<!DOCTYPE html><html><body><table border="1" width="150" height="100"><tr><td>A</td><td>B</td><td>C</td></tr><tr><!-- سيتم عرضها على خانتين في نفس السطر و خانتين تحتهما مباشرةً 'E' هنا قلنا أن الخانة التي يوجد فيها الحرف --><td>D</td><td colspan="2" rowspan="2">E</td></tr><tr><td>F</td></tr></table></body></html>
وضع عنوان خاص للجدول
إذا أردت وضع عنوان خاص للجدول، يمكنك كتابة العنوان بداخل الوسم
<caption></caption> مع الإشارة إلى أنه يجب وضع هذا
الوسم كأول وسم في الجدول.
في المثال التالي قمنا بوضع عنوان للجدول بواسطة الوسم
<caption>.
<!DOCTYPE html><html><body><table border="1" width="100%"><!-- هنا قمنا بإضافة عنوان للجدول --><caption>Final semester marks</caption><tr><th>ID</th><th>Name</th><th>Mark</th></tr><tr><td>1</td><td>محمد على</td><td>A</td></tr><tr><td>2</td><td>محمود على</td><td>A</td></tr><tr><td>3</td><td>عبدالمنعم على</td><td>C</td></tr><tr><td>4</td><td>عبدالحميد على</td><td>B</td></tr></table></body></html>