8 : XHTML الجداول (الجزء الأول)

zak السبت فبراير 25, 2012 2:57 am

الجداول (الجزء الأول)

بسم الله الرحمن الرحيم و الحمد لله و الصلاة و السلام على أشرف المرسلين محمد صلى الله عليه و سلم.
أما بعد
سنتعرف في هذا الجزء على الجداول، و لا أحتاج أن أقول لكم أنها ذات أهمية قصوى في ال XHTML (يبدو أنني أعدت قولها Rolling Eyes

).
لذا سأقوم بتقسيم درس الجداول إلى قسمين القسم الأول سنتعرف فيه على أساسيات إنشاء الجداول، و في الجزء الثاني سنرى فيه الجانب المتقدم من الجداول.
لذا أرجو من الجميع أن يولوا أهمية لهذا الجزء.
نبدأ بسم الله.

الجداول
تستخدم الجداول من أجل تمثيل البيانات أو تنظيم النصوص و الصور في صفحات الويب، و هي تتعداها إلى ما هو أبعد من ذلك فالجداول تلعب دور كبير في هيكلة المواقع، و سنرى ذلك في الجزء الثاني من درس الجداول.
الجدول اسم بسيط و يعبر عما يشكله. فهو ذلك الشكل المكون من عدة خانات و سطور.
لإنشاء جدول في ال XHTML تحتاج إلى معرفة أريعه وسوم وهي :
<table> و هو الذي يحتوي جميع عناصر الجدول.
<tr> و هو يمثل السطور التي يتكون منها الجدول.
<th> و هنا نضع عناوين خانات الجدول.
<td> و هو المسئول عن إنشاء الخانات في الجدول.
نلخص في خطاطة (لأني متأكد 100% أن أحدا لم يفهم confused

).

8 : XHTML الجداول (الجزء الأول) 89327907

خطاطة
و الآن سنقوم بإنشاء أول جدول في هذا الدرس.
أولا نضع الوسمين <table> و </table>.
كود:XHTML
<table>
</table>
ثم نضيف إليه أول سطر باستعمال الوسمين <tr> و </tr>.
كود:XHTML

ثم نضيف عناوين الخانات باستعمال الوسمين <th> و </th>.
كود:XHTML

<table>
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
</table>

و أخيرا سنضيف سطرين إلى الجدول باستعمال الوسمين <tr> و </tr> و خانتين في كل سطر باستعمال الوسمين <td> و </td>.
كود:XHTML

<table>
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>Palastine</td>
<td>Quds</td>
</tr>
<tr>
<td>Morocco</td>
<td>Rabat</td>
</tr>
</table>

شاهد المثال
و هكذا قمنا بإنشاء الجدول التالي :
Capital Country
Quds Palastine
Rabat Morocco
مهلا، أنا لا أرى أي شيء، اللهم محتوى الجدول، ألم تقل أننا أنشئنا جدول؟
بلى، ولكن إطار الجدول لا يظهر وهناك سبب لهذا، و هذا ما سنراه في الفقرة التالية في هذا الجزء.
تذكير : هذا الكود يجب أن يوضع بين الوسمين <body> و </body>.
تحديد حجم إطار الجدول، و المسافة بين الخانات، و المسافة بين محتوى الخانات.
تحديد حجم إطار الجدول.
أولا سنرى كيف يمكننا تغيير حجم إطار الجدول.
من أجل ذلك سنحتاج إلى الخاصية border و هي تضاف إلى الوسم <table> و هي تأخذ القيمة 0 تلقائيا و هذا هو سبب عدم ظهور الإطار في المثال السابق.
و إذا أردنا إظهار إطار الجدول نعطي الخاصية border القيمة 1.
كود:XHTML

<table border="1">
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>Palastine</td>
<td>Quds</td>
</tr>
<tr>
<td>Morocco</td>
<td>Rabat</td>
</tr>
</table>

شاهد المثال
ملاحظة : إذا أردت أن يظهر الإطار بحجم أكبر يمكنك و ضع أي رقم من 1 إلى مالا نهاية من الأرقام (طبعا لن تحتاج إلى ذلك).
تحديد المسافة بين الخانات.
و من أجل ذلك نستعمل الخاصية cellspacing و هي تكتب في الوسم <table> و هي تأخذ قيم ما ببن 0 إلى مالا نهاية من الأرقام ، والمثال سيوضح ذلك.
كود:XHTML

<table border="1" cellspacing="10">
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>Palastine</td>
<td>Quds</td>
</tr>
<tr>
<td>Morocco</td>
<td>Rabat</td>
</tr>
</table>

شاهد المثال
إذا جربت المثال فلا تحتاج إلى أي شرح.
تحديد المسافة بين الخانة و محتواها.
و الخاصية التي تمكننا من ذلك هي cellpadding و هي تكتب في الوسم <table> و تأخذ القيم ما بين 0 إلى مالا نهاية. أظن أن مثال سيكون أفضل.
كود:XHTML

<table border="1" cellpadding="10">
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>Palastine</td>
<td>Quds</td>
</tr>
<tr>
<td>Morocco</td>
<td>Rabat</td>
</tr>
</table>

شاهد المثال
و كملخص لما رأيناه الآن إليكم خطاطة تبين ذلك.
8 : XHTML الجداول (الجزء الأول) 82791322

خطاطة.
تحديد أبعاد الجدول و السطور و الخانات.
هناك خاصيتان و هما width و height، رأيناهما سابقا و هذا سيسهل علينا الأمر، استعمالهما سهل فهما يوضعان في إي وسم سواء <table> أو <td> أو <th> باستثناء <tr>.
و ها هو مثال يوضح ذلك.
كود:XHTML

<table border="1" height="400">
<tr>
<th width="100">Country</th>
<th width="150">Capital</th>
</tr>
<tr>
<td>Palastine</td>
<td>Quds</td>
</tr>
<tr>
<td>Morocco</td>
<td>Rabat</td>
</tr>
</table>

شاهد المثال
في هذا المثال حددنا ارتفاع الجدول في 50px و عرض الخانة Country في 100px و الخانة Capital في 150px.
المثال واضح، و لكن أنصح الجميع بتجريب قيم أخرى في وسوم أخرى من الجدول لكي تتقنوا استعمالها.

توجيه النص داخل جدول.
كذلك سنستعمل هنا خاصية رأيناها من قبل و هي align، بالنسبة للجدول يمكننا وضعها في أي وسم فمثال إذا وضعناها في الوسم <table> ستؤثر على الجدول بشكل كامل، و إذا وضعناها في الوسم <tr> ستؤثر على السطر الذي وضعناها فيه. و هكذا.
الخاصية align تساعدنا على وضع النص في اليمين أو اليسار أو الوسط.
و لكن إذا أردت وضع الكتابة في الأعلى أو الأسفل أو المنتصف فما العمل؟.
في هذه الخالة سنستعمل الخاصية valign و كذلك هي تعمل مع أي وسم داخل الجدول. و هي تأخذ القيم التالية :
top تستعمل للكتابة في الأعلى.
bottom تستعمل للكتابة في الأسفل.
و الآن مع مثال يوضح العملية بشكل أفضل.
كود:XHTML

<table border="1">
<tr align="right" valign="top">
<td>Palastine</td>
<td>Quds</td>
</tr>
<tr valign="bottom">
<td align="right">Morocco</td>
<td align="center">Rabat</td>
</tr>
</table>

شاهد المثال
في هذا المثال وضعنا كل ما يوجد في السطر الأول (Palastine، Quds) في أعلى اليمين، و وضعنا كل ما في السطر الثاني (Morocco، Rabat) في الأسفل. ثم بعد ذلك وضعنا كلمة Morocco في اليمين و كلمة Rabat في الوسط.
ملاحظة : يمكن التخلي عن الوسم <th> في الجدول.
إلى هنا نقف و سنكمل في الجزء الثاني من درس الجداول إن شاء الله.
في الختام أستودعكم الله الذي لا تضيع ودائعه، و السلام عليكم و رحمة الله.