الجداول في لغة html القسم الثاني الدرس |12| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الاثنين، 6 يناير 2020

الجداول في لغة html القسم الثاني الدرس |12|


الجداول <table> الوسم <tr>

اليوم سنتعرف على الوسم TR المستخدم مع الوسم Table ونتعرف ايضاً على الخصائص المستخدمة مع هذا الوسم.

الوسم <tr>

كما تعرفنا على ان وسم TR هو الوسم المستخدم في ادراج الصفوف داخل الجداول ويتم اضافة هذا الوسم بعدد الصفوف التي نريده داخل كل الجداول, سوف نتعرف على الخصائص المستخدمة مع ذلك الوسم بالإضافة الى بعض الأمثلة لتسهيل التعامل مع الصفوف داخل الجداول.

الخصائص المستخدمة مع الوسم <tr> 

يوجد عدة خصائص لهذا الوسم سوف نذكرها بالتفصيل مع امثلة توضح طريقة استخدامها داخل ملف العمل. 


1 - خاصية align

تستخدام لتحديد محاذاة النص افقياً داخل الخلايا التي يتكون منها الصف و القيم المستخدمة مع هذه هي (left, center, right).


2 - خاصية valign

تستخدم هذه لتحديد المحاذاة العمودية للنص داخل خلايا الصف, اما اعلى او اسفل او في المنتصف او على امتداد الخط الأساسي ويأخذ القيم (top, bottom, middle, baseline).

3 - خاصية bgcolor

تستخدم لتحديد لون الخلفية للخلايا التي يتكون منها الصف و هنا يتم تجاهل لون الخلفية المحدد للوسم TABLE ويتم تطبيق اللون المحدد.

بعد ان تعرفنا على الوسم TR و الخصائص المستخدمة معه, يجب الآن تطبيق بعض الأمثله للتوضيح اكثر في التعامل مع الوسم tr

مثال


شرح المثال السابق

قمنا بإنشاء جدول يتكون من ثلاث صفوف و اثنان من الخلايا داخل كل صف وكما قمنا بإضافة بعض الخصائص على الوسم الرئيسي المستخدم في استحضار الجداول table ,و قمنا بإضافة طول الجدول يساوي 50% وكما قمنا بإضافة عرض الجدول 50% وكما قمنا ايضاً بإضافة محاذاة حول الجدول بنسبة 5px.

و استخدمنا مع الوسم الخاص في استحضار الصفوف داخل الجداول وهو TR في الصف الأول وقمنا بإعطاء الخاصية ALIGN القيمة left لتكون الخلايا على يسار الصف, و في الصف الثاني قمنا بإعطاء خاصية ALIGN قيمة right لتكون الخلايا على يمين الصف.

وكما قمنا ايضاً بإضافة نفس الخاصية ALIGN للصف الثالث والقيمة center لتكون الخلايا في منتصف الصف وسيكون الناتج في المتصفح بذلك الشكل


في الدرس القادم إن شاء الله سنتعرف على الوسم TD و الخصائص المستخدمة معه.

https://t.me/Programmer_Tech

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

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام