أحدث المواضيع

تابعني على يوتيوب

إجمالي مرات مشاهدة الصفحة

خبراتي فى لغات البرمجه

85% HTML
90% CSS
85% Web-Design

الخميس، 12 مايو 2016

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

 بسم الله الرحمن الرحيم
تعلمنا في الدرس السابق الأساسيات في بناء الجداول بلغة html لكن يوجد بعض الأضافات في بناء الجداول سنتعرف على بعضها في هذا الدرس
الجدول يمكن تقسيمه إلى ثالث اجزاء وهم الجزء العلوي (thead) و الصفوف التي تقع في المنتصف او ما تسمى جسم الجدول (tbody) و اخر شيء الجزء السفلي (tfoot)
هذه التقسيمات تفيدنا عند تنسيق شكل الجدول عن طريق لغة css وهذه اللغة ان شاء الله سأضع دروس لها على هذا الموقع بعد الأنتهاء من دروس html 
بداية نتعرف اين سنضع thead 
نضعه على شكل وسمين وسم بداية و وسم نهاية على شكل التالي 
<thead></thead>
لكن كيف نضعه في الجدول , نضعه بأن يكون الصف الأول من الجدول داخل هذين الوسمين على الشكل التالي 
                                        

ويمكن تنسيق هذا الصف بلغة css عن طريق كتابة اكواد css ونضع التوجيه لهذا ال الصف على الشكل التالي 
<style type="text/css">
thead td{background:#ccc; }
</style>
فتكون النتيجة على الشكل التالي
مع العلم انا قد وضعت حدود لجدول هذا و ضبطت عرضه
و أكواد ال css ال style وضعتها في الجزء head من الصفحة 
الأكواد التي استعملتها في بناء هذا الجدول هي 
نأتي الآن إلى جسم الجدول وهي الصفوف التي تقع ما بين أول صف و أخر صف 
والوسوم الذي نحتاجه هو 
<tbody></tbody>
نضع ما بين هذين الوسمين الصفوف المختارة من الجدول والتي تكون ما بين الصف الأول و الأخير مثل الشكل التالي 
ويمكن تنسيق هذه الصفوف مثل هذا الشكل 
<style type="text/css">
tbody td{background:#e0e0e0}

</style>
لتكون النتيجة على الشكل التالي 
ويمكنك دمج المثال السابق مع هذا المثال ليكون الشكل على التالي 
الأكواد التي أستعملتها ليصبح الشكل كالصورة السابقة

الآن نصل إلى آخر جزأ وهو الجزء السفلي من الجدول والتي وسومه هي 
<tfoot></tfoot>
نضع ما بين الوسمين السابقين آخر صف من الجدول و يمكنك تنسيقه بلغة css كما نسقنا جسم الجدول و رأس الجدول 
مثلاً لقد اعددت جدول مؤلف من أجزائه كلها و الأكواد هي 
ليصبح الجدول على الشكل التالي
و بهذا نكون قد انتهينا من درس اليوم و إلى اللقاء في الجزء القادم من تعلم الجداول في لغة html 
السلام عليكم و رحمة الله و بركاته

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

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





ليست هناك تعليقات:

إرسال تعليق

Translate

للمتابعة على مواقع التواصل الاجتماعي

تطبيق راسلني

جميع الحقوق محفوظة © أسامة الموسى