9 : XHTML الجداول (الجزء الثاني)

الجداول (الجزء الثاني)

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

خلفية الجداول و الخانات (لون و صورة).
توفر لنا لغة ال XHTML خاصية تدعى ب bgcolor و هي تعمل مع جميع الوسوم التي تدخل في تكوين الجداول.
مثال، نريد أن نجعل من لون خلفية الجدول رمادية، كيف يمكننا ذلك؟.
كود:ْXHTML
<table border="1" bgcolor="#DDDDDD">
<tr>
<td>Palastine</td>
<td>Quds</td>
</tr>
<tr>
<td>Morocco</td>
<td>Rabat</td>
</tr>
</table>
شاهد المثال
ملاحظة : يكمن تغيير خلفية الخانات كل على حدا باستعمال الخاصية bgcolor في الوسم <td> أو الوسم <tr>..
و إذا أرضت وضع صورة في الخلفية كيف يمكنني ذلك؟
في هذه الحالة سنستعمل الخاصية background و هي تأخذ كقيمة رابط الصورة التي تريد أن تجعل منها خلفية.
مثال لذلك :
كود:XHTML

<table border="1" background="quds.jpg">
<tr>
<td>Palastine</td>
<td>Quds</td>
</tr>
<tr>
<td>Morocco</td>
<td>Rabat</td>
</tr>
</table>

شاهد المثال
ملاحظة : يمكن تغيير خلفية الخانات كل على حدا باستعمال الخاصية background في الوسم <td> أو الوسم <tr>.

ربط الخانات مع بعضها البعض.
يمكننا ربط الخانات مع بعضها البعض و ذلك من أجل إنشاء جداول أكثر تعقيدا مثل :



ربط الخانات أفقيا
نحتاج في هذا إلى الخاصية colspan التي تكتب في الوسم <td>.
نأخذ مثال الجدول التالي :
Palastine
Rabat Morocco
نريد أن ننشأ مثل هذا الجدول.
سنقوم أولا بإنشاء الجدول بشكل طبيعي، ثم سنقوم بعد ذلك بحذف ال <td> الثاني من السطر الأول في الجدول ثم نضيف الخاصية colspan إلى <td> الأول من السطر الأول في الجدول و نعطيه كقيمة 2 بحيث يدمج بين خانتين ليصبح الكود على الشكل التالي :
كود:XHTML

<table border="1">
<tr>
<td colspan="2">Palastine</td>
</tr>
<tr>
<td>Morocco</td>
<td>Rabat</td>
</tr>
</table>

شاهد المثال
ملاحظة : إذا أرت الربط بين ثلاث خانات أكتب 3 في الخاصية colspan و هكذا.
ربط الخانات عموديا.
سنستعمل هنا الخاصية rowspan و هي تعمل بنفس الشكل الذي تعمل به colspan.
نأخذ مثال الجدول التالي :

Quds Palastine
Aqsa
سنقوم أولا بإنشاء الجدول بشكل طبيعي، ثم سنقوم بعد ذلك بحذف ال <td> الأول من السطر الثاني في الجدول ثم نضيف الخاصية rowspan إلى <td> الأول من السطر الأول في الجدول و نعطيه كقيمة 2 بحيث يدمج بين خانتين ليصبح الكود على الشكل التالي :
كود:XHTML

<table border="1">
<tr>
<td rowspan="2">Palastine</td>
<td>Quds</td>
</tr>
<tr>
<td>Aqsa</td>
</tr>
</table>

شاهد المثال
ملاحظة : إذا أرت الربط بين ثلاث خانات أكتب 3 في الخاصية rowspan و هكذا.
أكثر تعقيدا
نريد أن ننشأ مثل هذا الجدول :
Quds Palastine
Qubat Essakhra Aqsa
نحتاج القليل من التركيز، اعتبروا هذا امتحانا.
تذكير : نقوم دائما بحذف الخانات التي نريد دمجها من الجدول. ثم نحدد عدد الخانات التي نريد دمجها في خانة واحدة.
انتهى الوقت، سأقوم بوضع التصحيح.
كود:XHTML

<table border="1">
<tr>
<td rowspan="2">Palastine</td>
<td colspan="2">Quds</td>
</tr>
<tr>
<td>Aqsa</td>
<td>Qubat Essakhra</td>
</tr>
</table>

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




جداول لتنظيم الموقع

ملاحظة : هناك أشكال أخرى لهيكلة المواقع.
و نأخذ مثال الجدول الموجود في الوسط.
أولا سنقوم بإنشاء الجدول :
كود:XHTML

<table>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>

[color=cyan]
ملاحظة : يجب إزالة الخاصية border لكي لا يظهر الإطار.
بعد ذلك نحدد أبعاد الجدول في :
عرض الجدول يساوي 900px و ارتفاعه يساوي 100% من الصفحة.
و خانة القائمة تساوي 180px (الخانة الموجودة في السطر الثاني يسارا).
ليصبح الكود على الشكل التالي :
كود:XHTML

<table width="900">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td width="180"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>

بعد ذلك نكتب في رأس الصفحة (أي في الخانة الموجودة في السطر الأول) WELCOME كعنوان للصفحة و نجعل خلفية الخانة بلون أزرق قاتم و الكتابة باللون الأبيض و بالخط verdana.
ثم نضع القائمة و أظن أنني شرحت لكم كيفية إنشاء قائمة. و كذلك نجعل الروابط بالون الأبيض و بالخط verdana، و خلفية الخانة بلون أزرق قاتم.
ثم نضيف معلومات في الأسفل مثل اسم صاحب الموقعzak .
بعد كل هذا التحضير يصبح الكود على الشكل التالي :
كود:XHTML

<table width="900" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#0A587E">
<h1 align="center">
<font face="verdana" color="#FFFFFF">
WELCOME
</font>
</h1>
</td>
</tr>
<tr align="center">
<td width="180" bgcolor="#0A587E">
<ul style="list-style:none">
<li>
<a href="index.html">
<font face="verdana" size="1" color="#FFFFFF">
<b>Home</b>
</font>
</a>
</li>
<li>
<a href="forum.html">
<font face="verdana" size="1" color="#FFFFFF">
<b>Forum</b>
</font>
</a>
</li>
<li>
<a href="support.html">
<font face="verdana" size="1" color="#FFFFFF">
<b>Support</b>
</font>
</a>
</li>
<li>
<a href="contact.html">
<font face="verdana" size="1" color="#FFFFFF">
<b>Contact</b>
</font>
</a>
</li>
<li>
<a href="about_us.html">
<font face="verdana" size="1" color="#FFFFFF">
<b>About us</b>
</font>
</a>
</li>
</ul>
</td>
<td width="720">
<p>
<font face="verdana" color="#0A587E">
This is your first page using table layout.
</font>
</p>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#0A587E">
<p align="center">
<font face="verdana" size="1" color="#FFFFFF">
<i>zak, copyrights 2009 ©.<i>
</font>
</p>
</td>
</tr>
</table>

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