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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<TABLE> </TABLE>

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

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

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

<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> <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 وتقوم بإضافة حدود للجدول وتحديد سمكها , حيث القيمة الإفتراضية لها هي صفر أي لا حدود ,,
وتكون بهذا الشكل ‎,

<TABLE BORDER="0">

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

<TABLE WIDTH="300">

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

<TABLE WIDTH="80%">

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

<TABLE HEIGHT="500">‎

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

<TABLE HEIGHT="100%">

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

<TABLE CELLSPACING="10">‎

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

<TABLE CELLPADDING="5">

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

<TABLE ALIGN="Left">‎

<TABLE ALIGN="Right">‎

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

<TABLE BGCOLOR="#0066cc">‎

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

<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> <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> <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> <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> <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> <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 وتستخدم لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف وتاخذ احدى القيم التالية ,,

<TR ALIGN="Left">‎

<TR ALIGN="Center">‎

<TR ALIGN="Right">‎

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

<TR VALIGN="Top">‎

<TR VALIGN="Bottom">‎

<TR VALIGN="Baseline">‎

<TR VALIGN="Middle">‎

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

<TR BGCOLOR="##0066cc">

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

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

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

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

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