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

Programmer Tech

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

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

الجمعة، 17 يناير 2020

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


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

في الدروس السابقة تحدثنا عن الجداول و الوسوم و الخصائص المتعلقة بها وحول الوسم الرئيسي لإدراج الجداول وهو table و الخصائص المتعلقة به.

الوسم <td>

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

الآن سنتحدث عن الخصائص الموجودة داخل الوسم td ثم من بعده نقوم بإنشاء بعض الأمثله لتفهموا الفكرة اكثر.

الخصائص الذي تستخدم مع الوسم <td> 

توجد خصائص عديدة يتم استخدامها مع الوسم td و هذه الخصائص تكون كالتالي

الخاصية align

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

الخاصية valign

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

الخاصية width

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

الخاصية height

تحدد الإرتفاع المطلوب و يتم ايضاً بكتابة القيمة المباشرة للإرتفاع المطلوب و تتحكم في الإرتفاع عن طريق البيكسل أو النسبة المئوية.

الخاصية bgcolor

تحدد لون خلفية الخلية و تحدثنا عن تلك الخاصية سابقاً في دروس سابقة.

الخاصية colspan

تقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أٌفقياً, ويكون شكلها كالتالي شريطتاً بمحل حرف "t" نحدد الخلاية الذي نريد دمجها.
<td colspan="t">

الخاصية rowspan

تقوم بدمج الخلية مع العدد المطلوب من الخلاية التي تليها عمودياً.

مثال 1
سنقوم بإنشاء جدول به ثلاث صفوف و داخل الجدول ثلاث خلاية بداخل كل صف


في المثال السابق قمنا بإنشاء جدول عن طريق الوسم المسؤول لإدراج الجداول وهو الوسم table, كما قمنا بإنشاء ثلاث صفوف داخل الجدول عن طريق الوسم المسؤول لإدراج الصفوف داخل الجدول وهو الوسم tr ويجب كتابة الوسم tr بعدد الصفوف الذي نريده, وكما قمنا بإنشاء ثلاث خلايا داخل كل صف عن طريق الوسم المسؤول لإدراج الخلايا داخل الصف وهو td ويجب تكرار كتابة الوسم td بعدد الخلايا الذي نريده, وسيكون الناتج في المتصفح بذلك الشكل


في المثال السابق لم نقم بإسناد اي خاصية للخلاية, سوف نأخذ مثال آخر يوضح الخصائص.

مثال 2


قمنا بإنشاء جدول عن طريق الوسم المسؤول لإدراج الجداول وهو الوسم table وحددنا له بعض الخصائص, الخاصية الأولى هي border وحددنا لها القيمة 5 أي يعني سيكون هناك border حول الجدول بمقدار 5 ثم قمنا بتحديد عرض الجدول عن طريق خاصية width و أخذ 300px وكما قمنا بتحديد طول الجدول عن طريق الخاصية height واخذ 100px.

الآن ننتقل على الوسم td ونتحدث عن الخصائص المستخدمة في المثال السابق, قمنا بإنشاء ثلاث صفوف عن الطريق الوسم المستخدم في ادراج الصفوف داخل الجدول وهو tr ثم قمنا بإنشاء ثلاث خلايا داخل كل صف عن طريق الوسم المستخدم في ادراج الخلايا وهو الوسم td في الصف الأول الموجود به ثلاث صفوف, وقمنا بإستخدام الخاصية align لتحديد مكان النص في الخليه, وقمنا في الثلاث خلايا بتحديد الخصائص, واستخدمنا جميع القيم وهي left , center ,right , اذاً مكان النص في الخلايا الأولى يظهر على يسار الخليه و الخليه الثانية قمنا بتحديد مكان النص في منتصف الخليه وقمنا في الخلايا الثلاثه من الصف الأول بتحديد مكان النص وسيكون على يمين الخليه.

اما في الصف الثاني الموجود به ايضاً ثلاث خلايا قمنا بتحديد خصائص على كل خليه, في الخليه الأولى قمنا بتحديد خاصية width التي تقوم بتحديد عرض الخليه وسيكون العرض بقدار 50px في الخليه, اما في الخليه الثانية في الصف الثاني قمنا بتحديد طول الخليه عن طريق الخاصية height وسيكون طول الخليه بمقدار 50px وفي الخلايا الثلاثه داخل الصف الثاني قمنا بتحديد اللون الرمادي عن طريق الخاصية bgcolor, و في الصف الثالث قمنا بإنشاء ثلاث خلايا لكن لم نقوم بإنشاء اي خصائص على اي خلية موجوده داخل الصف الثالث.

وسيكون الناتج في المتصفح بالشكل .


مثال 3


في المثال السابق قمنا بإنشاء جدول عن طريق الوسم المسؤول لإدراج الجداول وهو tabal وتم تحديد بعض الخصائص المذكورة في المثال, كما قمنا بإنشاء ثلاث صفوف داخل الجدول ويوجد داخل الصف الأول خلية واحدة لكنها تستخدم خاصية colspan ونحن نعرف أن تلك الخاصية تقوم بدمج الخلايا وفي المثال في الصف الأول قمنا بدمج مساحة الخليه لتكون ذو مساحة خليتين وتم تحديد 2 بعدد دمج الخلايا .

وفي الصف الثاني قمنا بإنشاء اربع خلايا داخل الصف لكن لم يتم تحديد أي خصائص, اما في الصف الثالث يوجد به خليه واحدة وتم اعطاء خاصية colspan3 وبذلك تم دمج ثلاث خلايا في خليه واحدة وستكون بالشكل في المتصفح 


مثال 4


في المثال السابق قمنا بإنشاء جدول يوجد به اربع صفوف, في الصف الأول يوجد اثنين من الخلايا, لكن تم تحديد خاصية rowspan على الخلية الأولى لتقوم بدمج اربع خلايا افقياً مع بعضهم وباقي الصفوف و الخلايا لم يتم تحديد اي خصائص عليها وسيكون الناتج في المتصفح بالشكل 


لمشاهدة الشرح في اليوتيوب من هنا

https://t.me/Programmer_Tech

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

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

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

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

الاسم

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

رسالة *

اقسام