الموقع العربي الاول للعبة 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 علما بأنه لا يوجد موقع في الإنترنت إلا ويستخدم الجداول بصورة أو بأخرى ..

وإليك مثال من داخل المنتدى ,,
*-.-**-.-**-.-**-.-*
http://im51.gulfup.com/r3VMXp.png

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

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

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

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

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

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

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

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

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

وكما تحدثنا فيما سبق عن الوسوم الخاصة بالجداول بان الوسم <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>

النتيجة ,,

http://im67.gulfup.com/UAXVJu.png

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

احدكم سينظر الى هذا المثال ويقول هل هذا جدول !
ساقول لك انتظر ولا تتعجل ,,
فهناك بعض الخصائص التى تستخدم مع الجداول وساقوم بسردها واحدة فالاخرى , عليك بالتركيز ..
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
الخاصية 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">‎

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

واليك امثلة على ذلك ,,
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>

النتيجة ,,
http://im56.gulfup.com/9GSVOv.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
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>

النتيجة ,,
http://im88.gulfup.com/trdAA7.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
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>

النتيجة ,,
http://im70.gulfup.com/soQp4J.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
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>

النتيجة ,,
http://im54.gulfup.com/J129t6.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
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>

النتيجة ,,
http://im70.gulfup.com/wt4SGx.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
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>

النتيجة ,,
http://im63.gulfup.com/T9V37p.png

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

لنذهب الان الى الجزء الاخر من درس اليوم الا وهو الخصائص المستخدمة مع وسم الصفوف <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">

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

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