الصفحة الرئيسية
الصفحة الرئيسيه المرجع الكامل كتب وبرامج مجانية المنتدي  مواقع هامه

أساسيات الجداول

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

وسم الجدول

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

<TABLE BORDER="1">
<TR><TD>خليه 1</TD><TD>خليه 2</TD></TR>
<TR><TD>خليه 3</TD><TD>خليه 4</TD></TR>
</TABLE>

و هذا الوسم السابق ينشاء الجدول التالي

خليه 1 خليه 2
خليه 3 خليه 4

و الآن إسمح لي أن أوضحلك الوسم السابق

<TABLE>...<‎/TABLE> وسوم تعريف الجدول
<TR>...<‎/TR>

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

<TD> ....<‎/TD>

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

والآن لنتكلم بصورة أكثر دقة وتفصيلاً:
هذه هي الوسوم التي نبدأ بها لإدراج جدول مكون من خلية واحدة أو من مليون خلية… الأمر سيان

<TABLE> ... <‎/TABLE>

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

<TR> ... <‎/TR>

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

<TABLE>
<TR>
<‎/TR>

<TR>
<‎/TR>

<TR>
<‎/TR>

<‎/TABLE>

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

<TD> ... <‎/TD>

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

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

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

Data Data
Data Data
Data Data


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

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

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

ونبدأ الآن بمناقشة هذه الخصائص

خصائص الجدول

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

<TABLE BORDER="5">‎
‎<TABLE BORDER="0">‎

سمك حدود هذا الجدول هي 5

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

<TABLE WIDTH="600">‎
‎<TABLE WIDTH="80%">‎

وهذا الجدول ذو عرض 80 %

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

‎<TABLE HEIGHT="500">‎
‎<TABLE HEIGHT="100%">‎

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

‎<TABLE CELLSPACING="10">

تلاحظ بعد الكتابه
عن الحدود بمقدار 10

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

‎<TABLE CELLPADDING="10">‎

تلاحظ تباعد
الخلايا بمقدار 10

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

‎<TABLE ALIGN="Left">‎
‎<TABLE ALIGN="Right">‎

هذا لليسار

و هذا لليمين

BGCOLOR ويستخدم لتحديد لون الخلفية للجدول  و تستطيع أختيار اللون أما بالأسماء أو عن طريق الHEX كود

‎<TABLE BGCOLOR="#0099cc">‎

و هذا ذو خلفيه زرقاء

 

الدرس التالي»»»

< الصفحة الرئيسيه | المرجع الكامل | الجداول >

 

المصدر العربي التعليمي للـHTML

¤  المحتويات 

البدايه هنا
أبدأ هنا ·
دروس سريعة للمبتدئين ·

الدروس المتخصصه
النص ·
الصور ·
الجداول ·
الأطر ·
النماذج ·

 
فهرس الجداول  ¤

> الجداول المتقدمه

> الجداول المتداخله والمستديرة

 

¤  Html4Arab صندوق الأدوات 

> إبحث في الموقع  Search


Html4Arab بحث المصدر العربي التعليمي لل HTML يأتيكم من [Atomz.com] بحث متقدم


أشترك في القائمة البريدية
لتحصل علي آخر آخبار
الموقع و التحديثات

أشترك إلغاء الإشتراك

> أخبر صديقك عن الموقع

هل أعجبت بموقعنا


أذن أضفنا إلي المفضله <


مستخدمين ال Netscape أضغط CTRL+D

 
" إعلانات "


برعاية شبكة هايل

^ أعلي^ للإعلان بالموقع اربط بموقعنا أتصل بنا

© 2002 Ahmed Salah