رويـــــال فـــريـــنـــدس :: ––––•(-• اكواد html•-)•––––

الدرس العاشر: الجداول

2 مشترك

كاتب الموضوع

رسالة

AbU ALi ElA$Sa$Y
AbU Ali ElAsSaSy SiTe EmPeRoR

النادى المفضل :

الجنسيه :

مزاجك ايه :

هوايتى :

المهنة :

الجنس :

عدد المساهمات : 3295

نقاط العضو : 47581

شعبية العضو : 1740

الموقع : عايش فى منتدى العساسيه

العمر : 31

تاريخ التسجيل : 22/05/2009

اوسمتى :

اوسمتى 2 :

اوسمتى 3 :

دعائى يارب تقبله :

بطاقة الشخصية
شات المنتدى:

hi every body

و تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً.

موضوع: الدرس العاشر: الجداول الدرس العاشر: الجداول I_icon_minitime

11th يونيو 2010, 00:15

الدرس العاشر: الجداول

الجداول تستخدم لعرض بيانات مجدولة مثل المعلومات التي تعرض بشكل منطقي من خلال أعمدة وصفوف.

هل هي صعبة؟

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

مثال 1:

خلية 1	خلية 2
خلية 3	خلية 4

سيظهر بهذا الشكل في متصفحك

خلية 1	خلية 2
خلية 3	خلية 4

ما الفرق بين

؟

كما ترى في المثال أعلاه، هذا هو أكثر أمثلة HTML تعقيداً قمنا بعرضه في هذا الدرس حتى الآن، لنقم بتفكيك المثال وشرح كل وسم:

هناك ثلاث عناصر تستخدم لإنشاء أي جدول:

وسم البداية ووسم الإغلاق
يبدأ من بينهما الجدول وينتهي، منطقي.

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

هذا ما يحدث في المثال الأول، الجدول يبدأ بوسم ، يتبعه وسم الذي يدل على بداية صف جديد، وهناك خليتان في هذا السطر: و، ثم نغلق الصف بوسم الإغلاق ونبدأ آخر الذي يحوي أيضاً خليتين، ثم نغلق الجدول

خلية 1

خلية 2

.

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

خلية 1	خلية 2
خلية 3	خلية 4

خلية 1و خلية 2 تشكلان صفاً، خلية 1 وخلية 3 تشكلان عموداً

في المثال أعلاه الحدول يحوي صفين وعمودين، ويمكن للجدول أن يحوي عدداً لا نهائياً من الصفوف والأعمدة.

مثال 2:

خلية 1	خلية 2	خلية 3	خلية 4
خلية 5	خلية 6	خلية 7	خلية 8
خلية 9	خلية 10	خلية 11	خلية 12

سيظهر بهذا الشكل في متصفحك

خلية 1	خلية 2	خلية 3	خلية 4
خلية 5	خلية 6	خلية 7	خلية 8
خلية 9	خلية 10	خلية 11	خلية 12

هل هناك أية خصائص للجداول؟

بالطبع هناك خصائص للجداول، هناك مثلاً خاصية الإطار التي تستخدم لتحديد سمك الإطار حول الجدول:

مثال 3:

خلية 1	خلية 2
خلية 3	خلية 4

سيظهر بهذا الشكل في متصفحك

خلية 1	خلية 2
خلية 3	خلية 4

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

مثال 4:

هذا المثال سيعرض في المتصفح جدولاً بعرض 30% من مقياس الشاشة، جرب ذلك بنفسك.

المزيد من الخصائص

هناك خصائص كثيرة للجداول، هذان اثنان منها:

align: يحدد المحاذاة لمحتويات الجدول، أو الصف أو في الخلية، فمثلاً يمكن محاذاة النص إلى اليمين أو اليسار أو في المنتصف.
يحدد المحاذاة الرأسية لمحتويات الخلية، فيمكن محاذاة النص في الأعلى أو الأسفل أو المنتصف.

مثال 5:

ماذا يمكن أن أضع في الجداول؟

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

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