تعد الجداول من أقوى الأدوات التي تتضمنها لغة HTML وتستخدم في تصميم الصفحات نفسها وتنظيمها والتحكم بمظهرها بصورة قوية وفعالة.
إن التعامل مع الجداول وإدراجها في صفحات الويب سهل جداً مثله مثل أي أداة من أدوات HTML وذلك لتعدد الخصائص التي تستعمل معها وتعدد الأوجه التي نستطيع التصرف بها.
الأوسمة الخاصة بالجداول:
هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول.
مثال: قم بإضافة جدول مكون من ثلاث صفوف وعمودين.
طريقة التعامل مع الجداول:
إن طريقة التعامل مع الجداول تتم على ثلاث مستويات هي:
مستوى الجدول ككل.
مستوى الصفوف ككل أو كل واحدة على حده.
مستوى الخلايا ككل أو كل واحدة على حده.
ملاحظات:
· من الممكن أن تحتوي خلايا الجدول على أي عنصر من عناصر لغة HTML: نصوص، رسوم، قوائم، وصلات تشعبية، جداول.
· هناك بعض الخصائص التي تتكرر مع جميع الوسوم. خذ مثلاً الخاصية BGCOLOR والسؤال هنا هو كيف يتم التعامل مع هذه الخاصية إذا ما كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخلية، فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف، فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول.
· يختلف أسلوب التعامل مع كل من خاصية WIDTH,HEIGHT من متصفح لآخر، وأفضل طريقة للتعامل مع هذه الخصائص هي بتحديد العرض والارتفاع للجدول ككل من خلال وسم الجدول . ثم استخدام هذه الخصائص في وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده في الصف الأول، والارتفاع المطلوب لكل صف في الجدول.
· هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم
إن التعامل مع الجداول وإدراجها في صفحات الويب سهل جداً مثله مثل أي أداة من أدوات HTML وذلك لتعدد الخصائص التي تستعمل معها وتعدد الأوجه التي نستطيع التصرف بها.
الأوسمة الخاصة بالجداول:
هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول.
هذه هي الوسوم التي نبدأ بها لإدراج جدول مكون من خلية واحدة أو مليون خلية الأمر سيان، ثم نقوم بإضافة وسم الصف بنفس الصفوف التي نريدها،ثم نضيف وسم الخلايا بنفس عدد الخلايا المطلوب.
مثال: قم بإضافة جدول مكون من ثلاث صفوف وعمودين.
الحل: لكي نكون الجدول نقوم بإدراج وسم الجدول ثم نضيف وسم الصف
طريقة التعامل مع الجداول:
إن طريقة التعامل مع الجداول تتم على ثلاث مستويات هي:
مستوى الجدول ككل.
مستوى الصفوف ككل أو كل واحدة على حده.
مستوى الخلايا ككل أو كل واحدة على حده.
ملاحظات:
· من الممكن أن تحتوي خلايا الجدول على أي عنصر من عناصر لغة HTML: نصوص، رسوم، قوائم، وصلات تشعبية، جداول.
· هناك بعض الخصائص التي تتكرر مع جميع الوسوم. خذ مثلاً الخاصية BGCOLOR والسؤال هنا هو كيف يتم التعامل مع هذه الخاصية إذا ما كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخلية، فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف، فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول.
· يختلف أسلوب التعامل مع كل من خاصية WIDTH,HEIGHT من متصفح لآخر، وأفضل طريقة للتعامل مع هذه الخصائص هي بتحديد العرض والارتفاع للجدول ككل من خلال وسم الجدول . ثم استخدام هذه الخصائص في وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده في الصف الأول، والارتفاع المطلوب لكل صف في الجدول.
· هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم
دمج الخلايا:
إذا أردنا أن تحتوي بعض الصفوف في الجدول على عدد من الخلايا أقل من باقي الصفوف، فلا يكفي أن نقوم بحذف وسوم الخلايا منها بل يجب أن نقوم بدمج الخلايا معاً وذلك باستخدام الخصائص ROWSPAN,COLSPAN.
كقاعدة أساسية كل خلية يتم دمجها يجب بالمقابل حذف وسوم التعريف الخاصة بها ما عدا تعريف الخلية الأساسية بالطبع.
مثال: قم بتكوين الجدول التالي:
إذا أردنا أن تحتوي بعض الصفوف في الجدول على عدد من الخلايا أقل من باقي الصفوف، فلا يكفي أن نقوم بحذف وسوم الخلايا منها بل يجب أن نقوم بدمج الخلايا معاً وذلك باستخدام الخصائص ROWSPAN,COLSPAN.
كقاعدة أساسية كل خلية يتم دمجها يجب بالمقابل حذف وسوم التعريف الخاصة بها ما عدا تعريف الخلية الأساسية بالطبع.
مثال: قم بتكوين الجدول التالي:
الحل: نقوم بإدراج جدول مكون من ثلاث صفوف
· في الصف الأول نقوم بوضع خلية واحدة ( الخلية المرقمة برقم 1 )ومعها الخاصية " Colspan="2 وقمنا بوضع رقم 2 لأنه عدد الخلايا المدمجة معاً.
· في الصف الثاني نقوم بوضع خليتين، نضيف الخاصية "Rowspan="2 في الخلية الأولى (الخلية رقم 2)وذلك لدمج الخلية الحالية مع الخلية التي أسفلها عمودياً، أما الخلية الثانية(الخلية رقم 3) فنضعها كما هي.
· في الصف الثالث نقوم بوضع خلية واحدة فقط (الخلية رقم 4).
· في الصف الأول نقوم بوضع خلية واحدة ( الخلية المرقمة برقم 1 )ومعها الخاصية " Colspan="2 وقمنا بوضع رقم 2 لأنه عدد الخلايا المدمجة معاً.
· في الصف الثاني نقوم بوضع خليتين، نضيف الخاصية "Rowspan="2 في الخلية الأولى (الخلية رقم 2)وذلك لدمج الخلية الحالية مع الخلية التي أسفلها عمودياً، أما الخلية الثانية(الخلية رقم 3) فنضعها كما هي.
· في الصف الثالث نقوم بوضع خلية واحدة فقط (الخلية رقم 4).
الأوسمة الخاصة بعنوان الجدول:
لوسم المزدوج
ليست هناك تعليقات:
إرسال تعليق