الموقع العربي الاول للعبة Silkroad Online - [HTML/CSS] تعلم HTML دورة احتراف لغة الـ HTML من الالف الى الياء ( تابع للدرس السابع ) .

http://im61.gulfup.com/GBda5Q.png
الجزء الثانى من الدرس السابع فى لغة الـ HTML ...
http://im55.gulfup.com/QxQsXY.gif
أهلا وسهلا بكم اعضاء و زوار منتدى Silkroad4arab ,,
سوف نستكمل حديثنا اليوم عن الجداول .. لتعدد وكثرة خصائص الجداول واحتمالات استخدامها في صفحات الويب .
http://im55.gulfup.com/QxQsXY.gif
حيث اننا قد علمنا بـ ان الجداول تعد من أهم الأدوات فى لغة الـ HTML علما بأنه لا يوجد موقع في الإنترنت إلا ويستخدم الجداول بصورة أو بأخرى , كما سبق ذكره فى تعلم HTML دورة احتراف لغة الـ HTML من الالف الى الياء ( الدرس السابع ) . ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
كما اننا قد تحدثنا عن عدد الخلايا في الصف الواحد .. وعن الوسم المستخدم لها ,,

اقتباس:

المشاركة الأصلية كتبت بواسطة 3ashek El7ozn (المشاركة 5125803)

الوسم الثالث <TD>___<‎/TD> ويستخدم فى تعريف الخلايا داخل الجدول .

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

ومن الممكن أن تحتوي الخلية على أي عنصر من عناصر لغة الـ HTML مثل ( نصوص , رسوم , قوائم , وصلات تشعبية , جدول ) .
سينظر احدكم الى كلمة جدول ويبدا عقله بالتفكير !!
لا تتعجب ,, بالطبع يمكنك إدارج جدول بداخل جدول آخر ..
http://im55.gulfup.com/QxQsXY.gif
مبدئيا دعونا نستعيد المثال الذى تعلمنا من خلاله كيفية انشاء جدول داخل صقحة الـ HTML الخاصة بنا .

اقتباس:

المشاركة الأصلية كتبت بواسطة 3ashek El7ozn (المشاركة 5125803)

كود بلغة HTML:

<HTML>

<HEAD>

<TITLE>My First HTML Page</TITLE>

</HEAD>

<BODY>

<TABLE BORDER="5">

<TR>

<TD>HTML</TD>

<TD>Guide</TD>

</TR>

<TR>

<TD>By</TD>

<TD>3ashek El7ozn</TD>

</TR>

<TR>

<TD>&</TD>

<TD>Silkroad4arab</TD>

</TR>

</TABLE>

</BODY>

</HTML>

النتيجة,,
http://im56.gulfup.com/9GSVOv.png

http://im55.gulfup.com/QxQsXY.gif

اما الان فقد جاء الوقت لمعرفة الخصائص التى يمكن اضافتها للخلايا ..
تابع معى ,, :-)

الخاصية ALIGN وتقوم بتحديد محاذاة النص الموجود في الخلية أفقياً , يميناً , يساراً , فى المنتصف - وتاخد احدى القيم التالية ,,
Left , Right , Center .

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

الخاصية VALIGN وهى تستخدم فى تحديد المحاذاه العمودية للنص وتاخذ احد القيم التالية , Top , Middle , Bottom , Baseline .

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

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

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

الخاصية HEIGHT وتستخدم فى تحديد الإرتفاع المطلوب للخلية في الصف وذلك ايضا بكتابة القيمة المطلوبة بالطريقة المباشرة او النسبية .

وقد قمنا بتوضيح الفرق بين القيم المباشرة ( القيم المطلقة ) و النسبية فى تعلم HTML دورة احتراف لغة الـ HTML من الالف الى الياء ( الدرس السابع ) . .

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

الخاصية BGCOLOR وهى تقوم بتحديد لون الخلية .

الخاصية COLSPAx وتقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً .
حيث x هو هو عدد الخلايا التي سيتم دمجها ..

واليك مثالا ,,

كود بلغة HTML:

<TD COLSPAN="x"

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

الخاصية ROWSPAx حيث تقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عمودياً .
حيث x هو عدد الخلايا التي سيتم دمجها ..

واليك مثالا ,,

كود بلغة HTML:

<TD ROWSPAN="x"

http://im55.gulfup.com/QxQsXY.gif

ماذا لو اردنا ازالة بعض الخلايا من الجدول مثل هذه الصورة ,,

http://im52.gulfup.com/6Rf3qi.png

فكل ما عليك هو حذف وسوم الخلايا المطلوب عدم اظهارها هكذا >>

كود بلغة HTML:

<HTML>

<HEAD>

<TITLE>My First HTML Page</TITLE>

</HEAD>

<BODY>

<TABLE BORDER="5">

<TR>

<TD>Guide</TD>

</TR>

<TR>

<TD>By</TD>

<TD>3ashek El7ozn</TD>

</TR>

<TR>

<TD>Silkroad4arab</TD>

</TR>

</TABLE>

</BODY>

</HTML>

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

ولكن ما زال مكان الخلية موجود !
وهنا ياتى دور الخاصية COLSPAN وستظهر بهذا الشكل ,,

http://im77.gulfup.com/OQk9SO.png

كود بلغة HTML:

<HTML>

<HEAD>

<TITLE>My First HTML Page</TITLE>

</HEAD>

<BODY>

<TABLE BORDER="5">

<TR>

<TD COLSPAN="2">Guide</TD>

</TR>

<TR>

<TD>By</TD>

<TD>3ashek El7ozn</TD>

</TR>

<TR>

<TD COLSPAN="2">Silkroad4arab</TD>

</TR>

</TABLE>

</BODY>

</HTML>

وكما لاحظت ان العدد 2 مع الخاصية COLSPAN هو عدد الخلايا التي قمنا بدمجها .

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

وهذا مثال آخر لدمج الخلايا عموديا بواسطة استخدام الخاصية ROWSPAN هكذا ,,

http://im43.gulfup.com/OzZfRe.png

كود بلغة HTML:

<HTML>

<HEAD>

<TITLE>My First HTML Page</TITLE>

</HEAD>

<BODY>

<TABLE BORDER="5">

<TR>

<TD ROWSPAN="3">By</TD>

<TD>3ashek El7ozn</TD>

</TR>

<TR>

<TD>Guide</TD>

</TR>

<TR>

<TD>Silkroad4arab</TD>

</TR>

</TABLE>

</BODY>

</HTML>

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

كما ان هناك وسم آخر يستخدم مع الجداول الا وهو الوسم <CAPTION>___</CAPTION> وهو يستخدم لاضافة عنوان رئيسى للجدول ويتم وضعه مباشرة بعد الوسم <TABLE> هكذا ,,

كود بلغة HTML:

<TABLE BORDER="5">

<CAPTION>HTML</CAPTION>

واليك مثالاً ,,

كود بلغة HTML:

<HTML>

<HEAD>

<TITLE>My First HTML Page</TITLE>

</HEAD>

<BODY>

<TABLE BORDER="5">

<CAPTION>HTML</CAPTION>

<TR>

<TD ROWSPAN="3">By</TD>

<TD>3ashek El7ozn</TD>

</TR>

<TR>

<TD>Guide</TD>

</TR>

<TR>

<TD>Silkroad4arab</TD>

</TR>

</TABLE>

</BODY>

</HTML>

النتيجة ,,

http://im81.gulfup.com/4RAW4r.png

http://im55.gulfup.com/QxQsXY.gif
والى هنا اكون قد انتهيت من الجداول ,,
http://im55.gulfup.com/QxQsXY.gif
وفى النهاية
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمني ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وعند النقل يرجى ذكر المصدر
دمتم بود
*-.-**-.-**-.-**-.-**-.-**-.-**-.-*
http://im54.gulfup.com/Zz30Un.png