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

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



wwe24h
الدرس الثامن الجداول (2) 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/
مُساهمةموضوع: الدرس الثامن الجداول (2)
الدرس الثامن الجداول (2) Clock102011-06-04, 14:34
الريان سوفت :الدرس الثامن الجداول (2),الريان سوفت :الدرس الثامن الجداول (2),الريان سوفت :الدرس الثامن الجداول (2),الريان سوفت :الدرس الثامن الجداول (2),الريان سوفت :الدرس الثامن الجداول (2),الريان سوفت :الدرس الثامن الجداول (2),






الدرس الثامن
الجداول (2)



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

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



هل تذكر ما قلناه عن عدد الخلايا في الصف الواحد؟ إن عدد الخلايا المطلوب
يتحدد من خلال كتابة الوسوم <TD>
... <‎/TD>
مرات بنفس العدد المطلوب. ومن الممكن أن تحتوي الخلية على أي عنصر من عناصر
لغة

HTML
: نصوص، رسوم، قوائم، وصلات تشعبية، بل وحتى جداول. (نعم، تستطيع إدراج جدول
داخل جدول آخر)

لنسترجع معا المثال الذي قمنا بالتدرب عليه في الدرس السابق، فسوف نكمل هذا
الدرس معه. وهو جدول صغير مكون من ثلاثة صفوف وعمودين (أي خليتين في كل صف).
















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


<‎/TR>


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


<‎/TR>


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


<‎/TR>


<‎/TABLE>







أما الخصائص المستخدمة مع الخلايا، فهذا جدول بها:

































ALIGN


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


Left, Center, Right



VALIGN


تحدد المحاذاة العمودية للنص، وهو يأخذ القيم

Top, Middle, Bottom, Baseline



WIDTH


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



HEIGHT


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



BGCOLOR


تحدد لون خلفية الخلية



COLSPAN


يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها
أفقياً



‎		 COLSPAN="n">‎




حيث

n
هو عدد الخلايا التي سيتم دمجها



ROWSPAN


يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها
عمودياً (أي أسفلها).



‎		 ROWSPAN="n">‎




وبالطبع

n
هو عدد الخلايا التي سيتم دمجها










وقبل أن نستمر، يبدو لي أن هناك بعض الملاحظات المهمة التي ينبغي ذكرها:




  • كما
    تلاحظ هناك خصائص تتكرر مع جميع الوسوم. خذ مثلاً الخاصية
    BGCOLOR.
    كيف يتم التعامل معها إذا كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون
    المحدد مع وسم الخلية، فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف،
    فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول. وإذا لم يكن هذا محدداً
    بدوره يتم إعتماد لون خلفية الصفحة المحدد في الوسم <    BODY>.



  • الملاحظة الثانية تتعلق بالخصائص
    WIDTH,
    HEIGHT    .
    يختلف أسلوب التعامل مع هذه الخصائص من متصفح لآخر، بل وتختلف أيضاً طريقة
    تفسير القيم المحددة معها وخصوصاً فيما يتعلق بالنسب المئوية. (راجع
    الموضوع:

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

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



BORDER="5">












Data <‎/TD>


<‎/TR>


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


<‎/TR>


Data <‎/TD>


<‎/TR>


<‎/TABLE>



لأن هذا ما ستحصل عليه:















Data


Data

Data


Data











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

بدمج
الخلايا معاً وذلك باستخدام الخصائص

COLSPAN, ROWSPAN.








إذن لنقم بإعادة كتابة شيفرة الجدول مع استخدام هذه الخصائص:



‎ BORDER="5">‎











COLSPAN="2"> Data <‎/TD>


<‎/TR>


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


<‎/TR>

COLSPAN="2"> Data <‎/TD>


<‎/TR>


<‎/TABLE>














Data


Data

Data


Data










لاحظ أن العدد 2 هو عدد الخلايا التي قمنا بدمجها. ولاحظ أيضاً انني لم أقم
بإعادة وسوم الخلايا المحذوفة لأننا أصلاً لا نحتاج لها بعد أن قمنا بالدمج.


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



مثال آخر: لنقم بدمج الخلايا الموجودة في العمود الأول



‎ BORDER="5">‎











ROWSPAN="3"> Data <‎/TD>
 Data <‎/TD>


<‎/TR>


Data <‎/TD>


<‎/TR>


Data <‎/TD>


<‎/TR>


<‎/TABLE>



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














Data

Data


Data


Data















هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم <TH>
... <‎/TH>
وهي اختصار

Table Header
أي ترويسة الجدول.
والفرق الوحيد بينها وبين <TD>
... <‎/TD>
هو أن النص الذي تحتويه يظهر بخط أسود عريض ومحاذاته في منتصف الخلية بصورة
إفتراضية. (ليس بالشيء المهم، كما أعتقد)، خاصة وأن الخصائص المستخدمة معها
هي نفس خصائص <TD>
وبنفس التفاصيل التي ذكرت.







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



‎ BORDER="5">‎









Table Caption <‎/CAPTION>




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


<‎/TR>


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


<‎/TR>


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


<‎/TR>


<‎/TABLE>



















Table
Caption


Data

Data


Data

Data


Data

Data















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



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

Deputy Director General

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

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

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


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

الدرس الثامن الجداول (2)

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

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

-
» الدرس السابع الجداول (1)
» الدرس الثالث الخطوط
»  الدرس الرابع الفقرات والقوائم
» الدرس الخامس الصور والرسومات
» الدرس السادس الوصلات التشعبية
صفحة 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.::
 جميع الحقوق محفوظه لمنتديات الريان سوفت التكنولوجيه التطويريه © ::.
 إبراء ذمة إدارة الشبكه ، امام الله وامام جميع الزوار والاعضاء، على مايحصل من تعارف بين الاعضاء او زوار على مايخالف ديننا الحنيف، والله ولي التوفيق
ون ويب للتطويراولاد دراجايجي فايفراس الوادي نتاعلن هنااعلن هنااعلن هنااعلن هنا