LEARN HTML - تعلم لغة أتش تي أم أل خطوة بخطوة - تعليم وشرح ودروس حول لغة أتش تي أم أل من البداية حتي الأحتراف - الدرس الثامن

تعلم html خطوة بخطوة rushdy.net

الدرس الثامن - الجداول 002

الأساسيات - الألوان - الخطوط - الفقرات والقوائم - الصور والرسومات - اللينكات - الجداول1 - الجداول2 - الإطارات1 - الإطارات2 - الإطارات3 - الإطارات4 - تاجات متنوعة - الخرائط الصورية - النماذج1 - النماذج2 - التاجات الخاصة - الويب واللغة العربية - الميتا تاج - المراجع

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

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

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

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

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

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

VALIGN
تحدد المحاذاة العمودية للنص، وهو يأخذ القيم Top, Middle, Bottom, Baseline

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

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

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

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

‎<TD COLSPAN="n">‎

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

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

‎<TD ROWSPAN="n">‎

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

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

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

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

<TABLE BORDER="5">

<TR>

<TD> Data <‎/TD>

<‎/TR>

<TR>

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

<‎/TR>

<TR>

<TD> Data <‎/TD>

<‎/TR>

<‎/TABLE>

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

Data

Data Data

Data

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

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

‎<TABLE BORDER="5">‎

<TR>

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

<‎/TR>

<TR>

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

<‎/TR>

<TR>

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

<‎/TR>

<‎/TABLE>

Data

Data Data

Data

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

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

‎<TABLE BORDER="5">‎

<TR>

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

<‎/TR>

<TR>

<TD> Data <‎/TD>

<‎/TR>

<TR>

<TD> Data <‎/TD>

<‎/TR>

<‎/TABLE>

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

Data Data

Data

Data

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

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

‎<TABLE BORDER="5">‎
<CAPTION> Table Caption <‎/CAPTION>

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

Table Caption

Data Data

Data Data

Data Data

Tweet

أخي الكريم أرجوك لا تتردد في التواصل معي إذا كان هناك أي أسئلة
سواء عن طريق البريد الإلكتروني
mohamed@rushdy.net

أو بزيارة صفحتي علي الفيس بوك .. ولا تنساني من الليك
rushdy.net on facebook

الأساسيات - الألوان - الخطوط - الفقرات والقوائم - الصور والرسومات - اللينكات - الجداول1 - الجداول2 - الإطارات1 - الإطارات2 - الإطارات3 - الإطارات4 - تاجات متنوعة - الخرائط الصورية - النماذج1 - النماذج2 - التاجات الخاصة - الويب واللغة العربية - الميتا تاج - المراجع

Content on this page requires a newer version of Adobe Flash Player.

Content on this page requires a newer version of Adobe Flash Player.

Content on this page requires a newer version of Adobe Flash Player.

Content on this page requires a newer version of Adobe Flash Player.