SHABAB EL TECNOLOGYA
مرحبا بك أيها الزائرالرجاء الانضممام لأسرة شباب التكنولوجيا

SHABAB EL TECNOLOGYA

 
الرئيسيةالبوابة 2اليوميةمكتبة الصورس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول


               اســرة المنتدى ترحب بــ 
SHOSHO MESH MESH
           
          اســـرة شباب التكنولوجيا تهنئ شعب مصر بتنحى الرئيس " محمد حسنى مبارك "                                                 

  لقد تم انشاء قسم اعلانات فى المنتدى لوضع بنرات الاعلانات فى المنتدى سارع بتقديم طلب اعلانك الان

شاطر | 
 

 الدرس السابع الجداول (1)

اذهب الى الأسفل 
كاتب الموضوعرسالة
Mosh Ramy
مشرف تكنولوجى
مشرف تكنولوجى
avatar

عدد المساهمات : 67
تاريخ التسجيل : 25/05/2010
العمر : 24

مُساهمةموضوع: الدرس السابع الجداول (1)   السبت سبتمبر 11, 2010 5:48 pm


<blockquote>
أهلاً وسهلاً بك إلى الدرس السابع من دروسHTML.هذا الدرس سيكون الأول من درسين حول الجداول. وقد فضلت تجزئتها إلى قسمين وذلك لأهمية هذا الموضوع وتعدد خصائص الجداول واحتمالات استخدامها في صفحات الويب.
تعد الجداول من أقوى الأدوات التي تتضمنها لغةHTMLوأكاد أجزم بأنه لا يوجد موقع في الإنترنت إلا ويستخدمها بصورة أو بأخرى. والحقيقة أن وضع الجداول في صفحات الويب لا يقتصر على تلك القوائم من البيانات التي نحتاج لترتيبها في صفوف وأعمدة، بل يتعدى ذلك إلى استخدامها في تصميم الصفحات نفسها وتنظيمها، والتحكم بمظهرها بصورة قوية وفعالة لا يمكن أداؤها مهما استخدمنا من وسوم خاصة بتنسيق الصفحات.
إن التعامل مع الجداول وإدراجها في صفحات الويب سهل جداً مثله مثل أي أداة من أدوات HTMLلكنه قد يبدو لك مربكاً بعض الشيء وخاصة في البداية، وذلك لتعدد الخصائص التي تستعمل معها وتعدد الأوجه التي نستطيع التصرف بها. لكن لا تقلق فكل شيء يبدو صعباً في بدايته ولكن سرعان ما يصبح سهلاً.

هل أنت مستعد؟ إذن هيّا بنا…

بداية، إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول
<TABLE>...<‎/TABLE> وسوم تعريف الجدول
<TR>...<‎/TR>
Table Row وسوم تعريف الصف في الجدول
<TD> Cell Data <‎/TD>
Table Data وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية
والآن لنتكلم بصورة أكثر دقة وتفصيلاً:

هذه هي الوسوم التي نبدأ بها لإدراج جدول مكون من خلية واحدة أو من مليون خلية… الأمر سيان<TABLE> ... <‎/TABLE>
والآن بعد إدراج هذين الوسمين، هناك سؤالين ينبغي الإجابة عليهما. الأول: كم عدد الصفوف التي نريدها في الجدول؟ ثلاثة، أربعة، مائة؟ لا بأس، قم بإضافة الوسوم <TR> ... <‎/TR>
بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلاثة.
<TABLE><blockquote>
<TR>
<‎/TR>

<TR>
<‎/TR>

<TR>
<‎/TR>

</blockquote>
<‎/TABLE>

والسؤال الثاني هو، كم عدد الخلايا (أو الأعمدة) التي نريدها في كل صف؟
وهنا نضيف الوسوم <TD> ... <‎/TD>
بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين الوسوم <TR> ... <‎/TR>طالما أن الخلايا هي جزء من الصفوف. وهنا سأفترض أننا نريد خليتين في كل صف، وبذلك يجب تكرار كتابتها مرتين لكل صف.
وأذكرك أن النص الذي نريد إدراجه في الخلية يكتب ضمن هذين الوسمين.
<TABLE><blockquote>
<TR>
<blockquote>
<TD> Data <‎/TD>
<TD> Data <‎/TD>
</blockquote>
<‎/TR>

<TR>
<blockquote>
<TD> Data <‎/TD>
<TD> Data <‎/TD>
</blockquote>
<‎/TR>

<TR>
<blockquote>
<TD> Data <‎/TD>
<TD> Data <‎/TD>
</blockquote>
<‎/TR>
</blockquote>
<‎/TABLE>

هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصلنا عليها.
Data Data
Data Data
Data Data
هناك شيء ما ينقص. بالطبع ... الحدود. انتظر قليلاً وستعرف الخاصية التي تقوم بإضافة الحدود للجدول وغيرها من الخصائص الأخرى. لأنني قبل أن أستمر أود أن ألفت نظرك لمسألة معينة في الجداول. وهي أن طريقة التعامل معها تتم على ثلاثة مستويات:


  • مستوى الجدول ككل

  • مستوى الصفوف ككل أو كل واحد على حده

  • مستوى الخلايا ككل أو كل واحدة على حده.

ولكل من هذه المستويات خصائصه التي ينفرد بها كما أن هناك خصائص مشتركة تستخدم مع كل الوسوم.
نبدأ بمناقشة الخصائص التي تستخدم مع الوسوم<TABLE> ... <‎/TABLE>وسأقوم أولاً بسردها لك، ومن ثم إدراج بعض الأمثلة التي توضحها.
BORDER
تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود
‎<TABLE BORDER="5">‎
‎<TABLE BORDER="0">‎
WIDTH
نستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك أسلوبين لتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورة مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح.(أي أن عرض الجدول سيختلف باختلاف عرض نافذة المتصفح).
‎<TABLE WIDTH="600">‎
‎<TABLE WIDTH="80%">‎
HEIGHT
لتحديد ارتفاع الجدول، ويكون تحديد هذا الإرتفاع من خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح
‎<TABLE HEIGHT="500">‎
‎<TABLE HEIGHT="100%">‎
CELLSPACING
لتحديد المسافة بين كل خلية من خلايا الجدول
‎<TABLE CELLSPACING="10">‎
CELLPADDING
لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول.
‎<TABLE CELLPADDING="10">‎
ALIGN
لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left
‎<TABLE ALIGN="Left">‎
‎<TABLE ALIGN="Right">‎
BGCOLOR
ويستخدم لتحديد لون الخلفية للجدول
‎<TABLE BGCOLOR="#00FFFF">‎


هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها على المثال الوارد في بداية هذا الدرس وسأكتفي بكتابة وسم البداية أما باقي الوسوم فهي نفسها:
‎<TABLE BORDER="5">‎
Data Data
Data Data
Data Data

‎<TABLE BORDER="5" CELLPADDING="5">‎
Data Data
Data Data
Data Data

‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10">‎
Data Data
Data Data
Data Data

‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00">‎
Data Data
Data Data
Data Data

‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00" HEIGHT="300">‎
Data Data
Data Data
Data Data

‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00"HEIGHT="300" WIDTH="75%">‎
Data Data
Data Data
Data Data


ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف<TR> ... <‎/TR>ولا بأس من تذكيرك أن عدد الصفوف في الجدول يتحدد بعدد هذه الوسوم. أما أهم الخصائص التي تضاف لهذا الوسم فهي:
ALIGN
لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف، والقيم المحتملة لها هيRight, Left, Centerوالقيمة الإفتراضية هيCenter
VALIGN
لتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إما للأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على التوالي هي:Top, Bottom, Middle, Baseline
BGCOLOR
لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم<TABLE>ويتم تطبيق اللون المحدد هنا.
ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص من خلال الأمثلة التالية:
‎<TABLE BORDER="5" HEIGHT="300">‎
‎<TR ALIGN="Left">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR ALIGN="Right">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR ALIGN="Center">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>
Data Data
Data Data
Data Data

‎<TABLE BORDER="5" HEIGHT="300">‎
‎<TR VALIGN="Top">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR VALIGN="Bottom">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR VALIGN="Baseline">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>
Data Data
Data Data
Data Data

‎<TABLE BORDER="5" HEIGHT="300" BGCOLOR="#FFFFFF">‎
‎<TR BGCOLOR="#808080">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#C0C0C0">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR>‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>
Data Data
Data Data
Data Data

‎<TABLE BORDER="0" HEIGHT="100%" WIDTH="100%">‎
‎<TR BGCOLOR="#808080">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#C0C0C0">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#FFFFFF">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>
</blockquote>
Data Data
Data Data
Data Data

<blockquote>
والآن ماذا بقي لدينا؟ بالطبع بقيت الوسوم الخاصة بالخلايا. وسوف أتابع الحديث عنها في الدرس القادم إن شاء الله.
</blockquote>
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
 
الدرس السابع الجداول (1)
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
SHABAB EL TECNOLOGYA :: الفئة الأولى :: منتدى البرمجة والتصميمات-
انتقل الى: