منطقة الأعضاء

منتديات الريان سوفت



wwe24h
الدرس السابع الجداول (1) Navbit10 منتديات الريان سوفت التكنولوجية التطويرية
|.|الرئيسيةالرئيسية  البوابةالبوابة  أحدث الصورأحدث الصور  إرفع صورك معناإرفع صورك معنا  التسجيلالتسجيل  دخولدخول  |.|
الملاحظات

اشترك في القائمة البريدية ليصلك جديدنا :   

أهلا وسهلا بك إلى منتديات الريان سوفت التكنولوجيه.
أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا.كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.
المواضيع الاخيرة
~:تخفيضات راس السنه من شركة دي سي اس مصر 2021
~:تخفيضات راس السنة للتشطيبات والديكورات 2021
~:تخفيضات راس السنه من شركة دي سي اس مصر 2021
~:تخفيضات راس السنة للتشطيبات والديكورات 2021
~:عروض راس السنه من شركة دي سي اس مصر 2021
~:عروض شركة تشطيبات وديكورات 2021
~:عروض راس السنه من شركة دي سي اس مصر 2020
~:أفضل شركة تشطيبات وديكورات في مصر
~:أسعار كاميرات مراقبة 2020
~:أقوي شركة للديكورات و التشطيبات 2020
~:أقوي شركة للديكورات و التشطيبات 2020
~:عروض راس السنه من شركة دي سي اس مصر 2020
~:شركة تشطيبات وديكورات 2020
~:عروض راس السنه من شركة دي سي اس مصر 2020
~:شركة دي سي اس مصر لكاميرات المراقبة 2020
~:أقوي شركة للديكورات و التشطيبات 2020
~:شركة دي سي اس مصر لكاميرات المراقبة 2020
~:أقوي شركة للديكورات و التشطيبات 2020
~:أفضل انواع كاميرات مراقبة 2020
~:أقوي شركة للديكورات و التشطيبات 2020
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:
من طرف:

منتديات الريان سوفت :: .:: الــتــكـنــولــوجــيــا::. :: الـتـكـنـولـوجـيـا الـعـامـهشاطر
المعلومات
الكاتب:
القيصر ابو ريان
اللقب:
المدير العام
الرتبه:
المدير العام
الصورة الرمزية

القيصر ابو ريان

البيانات
الجنس الجنس :
ذكر
الـمـشـاركـات الـمـشـاركـات :
7401
المكسب المكسب :
38188
العمر العمر :
31
الاعجاب الاعجاب :
94

الساعه بتوقيت الاردن

الإتصالات
الحالة:
وسائل الإتصال:
https://kahn.yoo7.com/
مُساهمةموضوع: الدرس السابع الجداول (1)
الدرس السابع الجداول (1) Clock102011-06-04, 14:33
الريان سوفت :الدرس السابع الجداول (1),الريان سوفت :الدرس السابع الجداول (1),الريان سوفت :الدرس السابع الجداول (1),الريان سوفت :الدرس السابع الجداول (1),الريان سوفت :الدرس السابع الجداول (1),الريان سوفت :الدرس السابع الجداول (1),




الدرس السابع


الجداول (1)



أهلاً وسهلاً بك إلى الدرس السابع من دروس

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



تعد الجداول من أقوى الأدوات التي تتضمنها لغة

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



إن التعامل مع الجداول وإدراجها في صفحات الويب سهل جداً مثله مثل
أي أداة من أدوات

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

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











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





...<‎/TABLE>...<‎/TR>



وسوم تعريف الجدول






Table Row
وسوم تعريف الصف في الجدول



Cell Data <‎/TD>


Table Data
وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية




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

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



<TABLE>
... <‎/TABLE>



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



<TR>
... <‎/TR>



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








<‎/TR>


<‎/TR>


<‎/TR>



<‎/TABLE>



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



<TD>
... <‎/TD>



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




















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



<‎/TR>

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



<‎/TR>

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



<‎/TR>



<‎/TABLE>



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





Data


Data



Data


Data



Data


Data




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




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


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


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




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







نبدأ بمناقشة الخصائص التي تستخدم مع الوسوم <TABLE>
... <‎/TABLE>
وسأقوم أولاً بسردها لك، ومن ثم إدراج بعض الأمثلة التي توضحها.









BORDER


تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها،
والقيمة الإفتراضية لها هي صفر أي لا حدود



‎ BORDER="5">‎
‎
‎



WIDTH


نستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك أسلوبين
لتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورة
مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب
عرض نافذة المتصفح. (أي أن عرض الجدول سيختلف باختلاف عرض
نافذة المتصفح).



‎ WIDTH="600">‎
‎
‎



HEIGHT


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



‎ HEIGHT="500">‎
‎
‎



CELLSPACING


لتحديد المسافة بين كل خلية من خلايا الجدول



‎ CELLSPACING="10">‎



CELLPADDING


لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية.
أو لنقل: تحديد حجم الهوامش لخلايا الجدول.



‎ CELLPADDING="10">‎



ALIGN


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

right,


left




‎ ALIGN="Left">‎
‎
‎



BGCOLOR


ويستخدم لتحديد لون الخلفية للجدول



‎ BGCOLOR="#00FFFF">‎








هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها على
المثال الوارد في بداية هذا الدرس وسأكتفي بكتابة وسم البداية أما
باقي الوسوم فهي نفسها:



‎ BORDER="5">‎




Data


Data



Data


Data



Data


Data














‎ BORDER="5" CELLPADDING="5">‎





Data


Data



Data


Data



Data


Data














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





Data


Data



Data


Data



Data


Data














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




Data


Data



Data


Data



Data


Data














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





Data


Data



Data


Data



Data


Data














‎ 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>
ويتم تطبيق اللون المحدد هنا.




ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص من خلال
الأمثلة التالية:



‎ BORDER="5" HEIGHT="300">‎


‎ ALIGN="Left">‎




‎


‎



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


<‎/TR>

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


<‎/TR>

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


<‎/TR>


<‎/TABLE>




Data


Data



Data


Data



Data


Data














‎ BORDER="5" HEIGHT="300">‎


‎ VALIGN="Top">‎




‎


‎



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


<‎/TR>

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


<‎/TR>

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


<‎/TR>


<‎/TABLE>




Data


Data



Data


Data



Data


Data














‎ BORDER="5" HEIGHT="300" BGCOLOR="#FFFFFF">‎


‎ BGCOLOR="#808080">‎




‎


‎


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


<‎/TR>

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


<‎/TR>

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


<‎/TR>


<‎/TABLE>




Data


Data



Data


Data



Data


Data














‎ BORDER="0" HEIGHT="100%" WIDTH="100%">‎


‎ BGCOLOR="#808080">‎




‎


‎



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


<‎/TR>

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


<‎/TR>

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


<‎/TR>


<‎/TABLE>




Data


Data



Data


Data



Data


Data


















والآن ماذا بقي لدينا؟ بالطبع بقيت الوسوم الخاصة بالخلايا. وسوف
أتابع الحديث عنها في الدرس القادم إن شاء الله. أراك في


الدرس التالي
لنتابع الحديث عن موضوع الجداول.
توقيع العضو
خيارات المشاركه
الرجوع الى أعلى الصفحة اذهب الى الأسفل
المعلومات
الكاتب:
Deputy Director General
اللقب:
عـــضــــو مـــوقـــوف
الرتبه:
عـــضــــو مـــوقـــوف
الصورة الرمزية

Deputy Director General

البيانات
الجنس الجنس :
ذكر
الـمـشـاركـات الـمـشـاركـات :
829
المكسب المكسب :
4103
العمر العمر :
30
الاعجاب الاعجاب :
54

الساعه بتوقيت الاردن

الإتصالات
الحالة:
وسائل الإتصال:
https://kahn.yoo7.com/profile?mode=editprofile
مُساهمةموضوع: رد: الدرس السابع الجداول (1)
الدرس السابع الجداول (1) Clock102011-06-10, 03:05
الريان سوفت :رد: الدرس السابع الجداول (1),الريان سوفت :رد: الدرس السابع الجداول (1),الريان سوفت :رد: الدرس السابع الجداول (1),الريان سوفت :رد: الدرس السابع الجداول (1),الريان سوفت :رد: الدرس السابع الجداول (1),الريان سوفت :رد: الدرس السابع الجداول (1),


مشكووور
توقيع العضو
خيارات المشاركه
الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة 

مواضيع مماثلة

-
» الدرس الثامن الجداول (2)
» الدرس الثالث الخطوط
»  الدرس الرابع الفقرات والقوائم
» الدرس الخامس الصور والرسومات
» الدرس السادس الوصلات التشعبية
صفحة 1 من اصل 1
لا تجعل الله اهون الناظرين اليك
تذكر قوله تعالى 
((مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ ))
الردود السريعه:
صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى

ككل هناك 52 أشخاص حالياً في هذا الموضوع :: 2 أعضاء, 3 عُضو مُختفي و 47 زائر
منتديات الريان سوفت :: .:: الــتــكـنــولــوجــيــا::. :: الـتـكـنـولـوجـيـا الـعـامـه-

xml atom feed Rss 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 192 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 257 258 259 260
الاتصال بنا -اخبار التقنيه -الأرشيف -الأعلى

1Powered by Al Ryan Soft ® Version 2
Copyright © 2013.::
 جميع الحقوق محفوظه لمنتديات الريان سوفت التكنولوجيه التطويريه © ::.
 إبراء ذمة إدارة الشبكه ، امام الله وامام جميع الزوار والاعضاء، على مايحصل من تعارف بين الاعضاء او زوار على مايخالف ديننا الحنيف، والله ولي التوفيق
ون ويب للتطويراولاد دراجايجي فايفراس الوادي نتاعلن هنااعلن هنااعلن هنااعلن هنا