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

**3ashek El7ozn** · 01-11-2014, 07:37 AM

الجزء الثانى من الدرس السابع فى لغة الـ HTML ...

أهلا وسهلا بكم اعضاء و زوار منتدى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] ,,
سوف نستكمل حديثنا اليوم عن الجداول .. لتعدد وكثرة خصائص الجداول واحتمالات استخدامها في صفحات الويب .

حيث اننا قد علمنا بـ ان الجداول تعد من أهم الأدوات فى لغة الـ HTML علما بأنه لا يوجد موقع في الإنترنت إلا ويستخدم الجداول بصورة أو بأخرى , كما سبق ذكره فى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
كما اننا قد تحدثنا عن عدد الخلايا في الصف الواحد .. وعن الوسم المستخدم لها ,,

المشاركة الأصلية كتبت بواسطة 3ashek El7ozn عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]

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

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

ومن الممكن أن تحتوي الخلية على أي عنصر من عناصر لغة الـ HTML مثل ( نصوص , رسوم , قوائم , وصلات تشعبية , جدول ) .
سينظر احدكم الى كلمة جدول ويبدا عقله بالتفكير !!
لا تتعجب ,, بالطبع يمكنك إدارج جدول بداخل جدول آخر ..

مبدئيا دعونا نستعيد المثال الذى تعلمنا من خلاله كيفية انشاء جدول داخل صقحة الـ HTML الخاصة بنا .

المشاركة الأصلية كتبت بواسطة 3ashek El7ozn عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]

 
<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>

النتيجة,,

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

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

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

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

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

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

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

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

وقد قمنا بتوضيح الفرق بين القيم المباشرة ( القيم المطلقة ) و النسبية فى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] .

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

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

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

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

 
<TD COLSPAN="x"

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

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

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

 
<TD ROWSPAN="x"

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

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

 
<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 وستظهر بهذا الشكل ,,

 
<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 هكذا ,,

 
<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> هكذا ,,

 
<TABLE BORDER="5">
<CAPTION>HTML</CAPTION>

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

 
<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>

النتيجة ,,

والى هنا اكون قد انتهيت من الجداول ,,

وفى النهاية
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمني ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وعند النقل يرجى ذكر المصدر
دمتم بود
*-.-**-.-**-.-**-.-**-.-**-.-**-.-*

**Mr.Android** · 13-11-2014, 02:07 PM

مجهود رائـع جدا

**3ashek El7ozn** · 18-01-2015, 05:58 AM

المشاركة الأصلية كتبت بواسطة Mr-Android عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]

مجهود رائـع جدا

حبيبى ^_^

يتصفح الموضوع حالياً : 1 (0 عضو و 1 زائر)