الـجـروب الـرسـمـي لـلـمـنـتـدى Silkroad4arab Facebook | Official Group

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

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

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

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

اقتباس:

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

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

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

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

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

اقتباس:

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

كود بلغة 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>

النتيجة,,

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

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

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

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

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

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

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

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

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

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

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

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

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

كود بلغة HTML:

<TD COLSPAN="x"

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

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

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

كود بلغة HTML:

<TD ROWSPAN="x"

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

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

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

كود بلغة 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 هكذا ,,

كود بلغة 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>

النتيجة ,,

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

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

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

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

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

اقتباس:

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

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

حبيبى ^_^

	ط§ظ„ط¨ظ‚ط§ط، ظ…ط³ط¬ظ„ ط¯ط§ط¦ظ…ط¢

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