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

**3ashek El7ozn** · 20-10-2014, 07:14 AM

الدرس السابع فى لغة الـ HTML ...

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

تعد الجداول من أهم الأدوات فى لغة الـ HTML علما بأنه لا يوجد موقع في الإنترنت إلا ويستخدم الجداول بصورة أو بأخرى ..

وإليك مثال من داخل المنتدى ,,
*-.-**-.-**-.-**-.-*

فمعلومات العضو تعتبر جدول ,,
*-.-**-.-**-.-**-.-*

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

إذن فـ هيا بنا لنذهب سويا لنتعرف على ما هى الوسوم التى تستخدم فى الجداول ,,
*-.-**-.-**-.-**-.-*

بسم الله الرحمن الرحيم ..

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

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

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

وكما تحدثنا فيما سبق عن الوسوم الخاصة بالجداول بان الوسم <TABLE>___<‎/TABLE> هو الوسم المستخدم فى تعريف الجدول .

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
ويكون بهذه الطريقة ,,

كود بلغة HTML:

<TABLE> </TABLE>

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
ولكن هذا وحده لا يكفى اعزائى المتابعين للدرس ,,
فعليك بتحديد عدد الصفوف التى تريدها اي كان , 3 & 4 & 50 & 100 !! فلا يهم العدد .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
ولنفترض باننا سوف نستخدم فى شرحنا هذا 3 صفوف ,, ويتم اضافة الصفوف بهذا الشكل ,,

كود بلغة HTML:

<TABLE> <TR> </TR> <TR> </TR> <TR> </TR> </TABLE>

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
اهل هذا يعنى جدول !!
بالطبع لا فينقصه الخلايا التى توجد بداخله والتى نستخدم معها الوسم <TD>___<‎/TD> كما سبق التنويه عنه ..
حيث سيصبح الشكل النهائى للجدول هكذا ,,

كود بلغة HTML:

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

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
والصورة النهائية لصفحتنا بعد اضافة الجدول ستكون هكذا ,,

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> <TABLE> <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>

النتيجة ,,

احدكم سينظر الى هذا المثال ويقول هل هذا جدول !
ساقول لك انتظر ولا تتعجل ,,
فهناك بعض الخصائص التى تستخدم مع الجداول وساقوم بسردها واحدة فالاخرى , عليك بالتركيز ..
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
الخاصية BORDER وتقوم بإضافة حدود للجدول وتحديد سمكها , حيث القيمة الإفتراضية لها هي صفر أي لا حدود ,,
وتكون بهذا الشكل ‎,

كود بلغة HTML:

<TABLE BORDER="0">

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

كود بلغة HTML:

<TABLE WIDTH="300">

النسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح ,

كود بلغة HTML:

<TABLE WIDTH="80%">

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
الخاصية HEIGHT وتستخدم لتحديد ارتفاع الجدول , و يتحدد هذا الإرتفاع من خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل هكذا ,

كود بلغة HTML:

<TABLE HEIGHT="500">‎

أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح ,

كود بلغة HTML:

<TABLE HEIGHT="100%">

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
الخاصية CELLSPACING وتستخدم لتحديد المسافة بين كل خلية من خلايا الجدول ,

كود بلغة HTML:

<TABLE CELLSPACING="10">‎

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
الخاصية CELLPADDING وتستخدم لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية ,

كود بلغة HTML:

<TABLE CELLPADDING="5">

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

كود بلغة HTML:

<TABLE ALIGN="Left">‎

كود بلغة HTML:

<TABLE ALIGN="Right">‎

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
الخاصية BGCOLOR وتستخدم لتحديد لون الخلفية للجدول ,

كود بلغة HTML:

<TABLE BGCOLOR="#0066cc">‎

واليك امثلة على ذلك ,,
BORDER

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

النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
BORDER & CELLPADDING

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> <TABLE BORDER="5" CELLPADDING="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>

النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
BORDER & CELLPADDING & CELLSPACING

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> <TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10">‎ <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>

النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
BORDER & CELLPADDING & CELLSPACING & BGCOLOR

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> ‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10" ‎ BGCOLOR="#0066cc">‎ <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>

النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
BORDER & CELLPADDING & CELLSPACING & BGCOLOR & HEIGHT

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> <TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎ BGCOLOR="#0066cc" HEIGHT="300">‎ <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>

النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
BORDER & CELLPADDING & CELLSPACING & BGCOLOR & HEIGHT & WIDTH

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> <TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎ BGCOLOR="#0066cc" HEIGHT="300" WIDTH="75%">‎ <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>

النتيجة ,,

لنذهب الان الى الجزء الاخر من درس اليوم الا وهو الخصائص المستخدمة مع وسم الصفوف <TR>___<‎/TR> .

الخاصية ALIGN وتستخدم لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف وتاخذ احدى القيم التالية ,,

كود بلغة HTML:

<TR ALIGN="Left">‎

كود بلغة HTML:

<TR ALIGN="Center">‎

كود بلغة HTML:

<TR ALIGN="Right">‎

*-.-**-.-**-.-**-.-**-.-**-.-**-.-*
الخاصية VALIGN وتستخدم لتحديد المحاذاة العمودية للنص داخل خلايا الصف , وتاخذ احدى القيم التالية ,,

كود بلغة HTML:

<TR VALIGN="Top">‎

كود بلغة HTML:

<TR VALIGN="Bottom">‎

كود بلغة HTML:

<TR VALIGN="Baseline">‎

كود بلغة HTML:

<TR VALIGN="Middle">‎

*-.-**-.-**-.-**-.-**-.-**-.-**-.-*
الخاصية BGCOLOR وتستخدم لتحديد لون الخلفية للخلايا التي يتكون منها الصف علما بانه عند استخدام تلك الخاصية يتم تلقائيا تجاهل اللون المحدد مع الوسم <TABLE> ,

كود بلغة HTML:

<TR BGCOLOR="##0066cc">

*-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وساترك لكم حرية التجربة ومن ثم توافونى بالنتائج لمعالجة اخطائكم ,,

والى هنا اكون قد انتهيت من درس اليوم الا وهو الجزء الاول من الجداول ,,

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

**_Joo** · 30-10-2014, 09:43 AM

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

	حفظ بياناتي ؟

شـريـط الاهـداءات