THE Professional
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا
ادارة منتدي THE Professional


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


 
  
 




   
       
       
   
   
       

       
   

       
       
   

       
 

         
       




     



  •    
       
        تذكرني؟   




       
 





                     

أقسام المساعدة
منتدى المحترف يدعم : 

قسم المساعدة

مع التحية -- الإدارة :
المواضيع الأكثر نشاطاً
بحث عن كيفية
كيفية تغيير لون الفيس بوك !!
أسئلة دينية مدهشة !! رائعة و أجوبتها
تحميل Camtasia Studio 8
كيف يمكنك انشاء موقع جديد احترافي !!
نكت جزائرية تاع ضحك
موقع جوجل لاختصار الروابط
تحميل لعبة GTA Vice City !!
الأخلاق في الاسلام
طريقة معرفة عمر حاسوبك
المواضيع الأخيرة
» الابداع العربي فخر المنتديات العربيه ( تصميمك مجانا )www.ibda3araby.com
السبت مارس 14 2015, 17:43 من طرف انا حر

» تقنية جديدة خاصة بالصور الشخصية
الأربعاء مارس 12 2014, 19:08 من طرف Admin

» خبر : مدونة المحترف للإعلاميــات
الإثنين فبراير 17 2014, 15:04 من طرف Admin

»  شعيب عليه السلام
الإثنين فبراير 17 2014, 14:56 من طرف Admin

» احاديث نبويــ شريفة ـــة
الإثنين فبراير 17 2014, 14:54 من طرف Admin

» قصة سيدنا لوط عليه السلام (فيديو)
الإثنين فبراير 17 2014, 14:54 من طرف Admin

» عصا سيدنا موسى (فيديو)
الإثنين فبراير 17 2014, 14:53 من طرف Admin

» كيف اقتبس مقطع من فيديو ؟؟؟؟؟؟
الإثنين فبراير 17 2014, 14:53 من طرف Admin

» موضوع هام
الإثنين فبراير 17 2014, 14:52 من طرف Admin

المواضيع الأكثر شعبية
أجمل صور البحار في العالم §!
صور بي ام دابليو روعة BMW M6
تحضير نص الكتاب الالكتروني
تحميل لعبة GTA Vice City !!
تحضير وحدة المخدرات للسنة الثانية متوسط
تحضير نص الأجهزة التعليمية
نكت جزائرية تاع ضحك
أسئلة دينية مدهشة !! رائعة و أجوبتها
شعيب عليه السلام
تحميل Camtasia Studio 8
أفضل 10 فاتحي مواضيع
Admin
 
Youssef Madrid
 
Karima
 
adda
 
سر الجزائر
 
Mohamed Ali
 
Amine Madridi
 
younes chetouane
 
dentistemen
 
hadile
 







شاطر | 
 

 الدرس السابع في HTML : الجداول (1)

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
Admin
avatar


عدد المساهمات : 189
نقاط التميز : 8085
السٌّمعَة : 3
تاريخ التسجيل : 11/01/2014
العمر : 26
الموقع : http://theprofessional.forumalgerie.net

مُساهمةموضوع: الدرس السابع في HTML : الجداول (1)   الجمعة يناير 24 2014, 14:00

اقتباس :
أهلاً وسهلاً بك إلى الدرس السابع من دروس HTML. هذا الدرس سيكون الأول من درسين حول الجداول. وقد فضلت تجزئتها إلى قسمين وذلك لأهمية هذا الموضوع وتعدد خصائص الجداول واحتمالات استخدامها في صفحات الويب.

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

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

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






بداية، إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول

<TABLE>...<‎/TABLE>وسوم تعريف الجدول
<TR>...<‎/TR>
Table Row وسوم تعريف الصف في الجدول
<TD> Cell Data <‎/TD>
Table Data وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية


والآن لنتكلم بصورة أكثر دقة وتفصيلاً:

هذه هي الوسوم التي نبدأ بها لإدراج جدول مكون من خلية واحدة أو من مليون خلية… الأمر سيان

<TABLE> ... <‎/TABLE>


والآن بعد إدراج هذين الوسمين، هناك سؤالين ينبغي الإجابة عليهما. الأول: كم عدد الصفوف التي نريدها في الجدول؟ ثلاثة، أربعة، مائة؟ لا بأس، قم بإضافة الوسوم

<TR> ... <‎/TR>


بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلاثة.


<TABLE>


اقتباس :

<TR> 
<‎/TR>

<TR> 
<‎/TR>

<TR> 
<‎/TR>


<‎/TABLE>


والسؤال الثاني هو، كم عدد الخلايا (أو الأعمدة) التي نريدها في كل صف؟
وهنا نضيف الوسوم

<TD> ... <‎/TD>


بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين الوسوم <TR> ... <‎/TR> طالما أن الخلايا هي جزء من الصفوف. وهنا سأفترض أننا نريد خليتين في كل صف، وبذلك يجب تكرار كتابتها مرتين لكل صف.
وأذكرك أن النص الذي نريد إدراجه في الخلية يكتب ضمن هذين الوسمين.


<TABLE>


اقتباس :

<TR>

اقتباس :

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

اقتباس :

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

اقتباس :

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>


<‎/TABLE>


هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصلنا عليها.

DataData
DataData
DataData

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



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

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

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




ولكل من هذه المستويات خصائصه التي ينفرد بها كما أن هناك خصائص مشتركة تستخدم مع كل الوسوم.





نبدأ بمناقشة الخصائص التي تستخدم مع الوسوم <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">‎
[color][font]
 
[/font][/color]
هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها على المثال الوارد في بداية هذا الدرس وسأكتفي بكتابة وسم البداية أما باقي الوسوم فهي نفسها:

‎<TABLE BORDER="5">‎

DataData
DataData
DataData






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

DataData
DataData
DataData






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

DataData
DataData
DataData






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

DataData
DataData
DataData






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

DataData
DataData
DataData






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

DataData
DataData
DataData





[color][font]
 
[/font][/color]
ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف <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>

DataData
DataData
DataData






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

DataData
DataData
DataData






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

DataData
DataData
DataData






‎<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>
DataData
DataData
DataData



 


الإدارة العامة 
المدير العام 









من هنا لمراسلة الإدارة لطلب كلمة سر جديدة
من هنا لـطلب أي مساعدة
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://theprofessional.forumalgerie.net
 
الدرس السابع في HTML : الجداول (1)
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» اليكم كود html لعمل غرفة شات
» حصريا اكبر موسوعة اكواد ورموز HTML خياليه تخص صفحات مجله بوابة ورئيسية منتداك
» كود وضع خلفية لصفحات Html
» الان للجميع كود وضع خلفية لصفحات هتمل html
» من شرحي الخاص ( الشامل في HTML ) في كتاب للتحميل - تعلم اللغة

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
THE Professional :: .•:*¨`*:•. ][ شروحـآت ][.•:*¨`*:•. :: لغات البرمجة HTML-
انتقل الى: