المشاركات

عرض الرسائل ذات التصنيف الجداول

الدرس الحادي عشر: المزيد حول الجداول

عنوان الدرس "المزيد حول الجداول" يبدو مملاً بعض الشيء، لكن أنظر للجانب الإيجابي، إذا تمكنت من إتقان إنشاء الجداول فلن يكون هناك أي شيء في HTML لن تستطيع معرفته واستخدامه. ماذا بقي إذاً؟ خاصيتان هما colspan و rowspan تستخدمان لإنشاء جداول رائعة ومتقنة. Colspan هي اختصار "column span"، Colspan تستخدم في الوسم <td> لتحدد عدد الأعمدة التي ستتمدد لها الخلية : مثال 1: <table border="1"> <tr> <td colspan="3">Cell 1</td> </tr> <tr> <td>خلية 2</td> <td>خلية 3</td> <td>خلية 4</td> </tr> </table> سيظهر بهذا الشكل في متصفحك خلية 1 خلية 2 خلية 3 خلية 4 بتحديد colspan بالقيمة "3" قامت الخلية في الصف الأول بالتمدد لثلاثة أعمدة، ولو قمنا بوضع "2" لقيمة colspan ستتمدد لعمودين اثنين، وسيتعين علينا إضافة خلية أخرى للصف الأول حتى تصبح الأعمدة متساوية مثال 2: <table border="1"> <tr...

الدرس العاشر: الجداول

الجداول تستخدم لعرض بيانات مجدولة مثل المعلومات التي تعرض بشكل منطقي من خلال أعمدة وصفوف. هل هي صعبة؟ إنشاء الجداول في HTML قد يكون في البداية معقداً، لكن إذا بقيت هادئاً وراقبت ما تقوم به جيداً سترى أن الجداول بسيطة ومنطقية، تماماً كما هو كل شيء في HTML. مثال 1: <table> <tr> <td>خلية 1</td> <td>خلية 2</td> </tr> <tr> <td>خلية 3</td> <td>خلية 4</td> </tr> </table> سيظهر بهذا الشكل في متصفحك خلية 1 خلية 2 خلية 3 خلية 4 ما الفرق بين <tr> و <td> ؟ كما ترى في المثال أعلاه، هذا هو أكثر أمثلة HTML تعقيداً قمنا بعرضه في هذا الدرس حتى الآن، لنقم بتفكيك المثال وشرح كل وسم: هناك ثلاث عناصر تستخدم لإنشاء أي جدول: وسم البداية <table> ووسم الإغلاق </table> يبدأ من بينهما الجدول وينتهي، منطقي. <tr> تعني " t able r ow" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً. <td> هي اختصار " t able d ata...