الدرس السابع : التعامل مع الجداول tables

الجداول تستخدم لعرض بيانات مجدولة مثل المعلومات التي تعرض بشكل منطقي من خلال أعمدة وصفوف. تنسيق الجدول كالتالى:

<TABLE>
<TR> <TD> إدخال جدول </ TD> ... <TD> إدخال جدول </ TD>
</ TR>
...
<TR> <TD> إدخال جدول </ TD> ... <TD> إدخال جدول </ TD>
</ TR>
</ TABLE>

هناك ثلاث عناصر تستخدم لإنشاء أي جدول:

وسم البداية <table> ووسم الإغلاق </table> يبدأ من بينهما الجدول وينتهي، منطقي. <tr> تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً. <td> هي اختصار "table data". هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول.

هذا ما يحدث في المثال ، الجدول يبدأ بوسم <table>، يتبعه وسم <tr> الذي يدل على بداية صف جديد، وهناك خليتان في هذا السطر: <td> 1</td> و<td> 2</td>، ثم نغلق الصف بوسم الإغلاق </tr> ونبدأ آخر <tr> الذي يحوي أيضاً خليتين، ثم نغلق الجدول </table>.

خصائص الجداول.

هناك خصائص للجداول، مثلاً خاصية الإطار التي تستخدم لتحديد سمك الإطار حول الجدول:

 <table border="1">

 يمكنك أن نحدد عرض الجدول بالبكسل أو بالنسبة المؤية لمقياس الشاشة:

 <table border="1" width="30%">

Align: يحدد المحاذاة لمحتويات الجدول، أو الصف أو في الخلية، فمثلاً يمكن محاذاة النص إلى اليمين أو اليسار أو في المنتصف.

Vlign: يحدد المحاذاة الرأسية لمحتويات الخلية، فيمكن محاذاة النص في الأعلى أو الأسفل أو المنتصف.

 <td align="right" valign="top">Cell 1</td>

Colspan هي اختصار " "column span، Colspan تستخدم في الوسم <td> لتحدد عدد الأعمدة التي ستتمدد لها الخلية:

 <table border="1">
   <tr>
  <td colspan="3">Cell 1</td>
   </tr>
   <tr>
  <td>خلية 2</td>
  <td>خلية 3</td>
  <td>خلية 4</td>
   </tr>
 </table>

rowspan تحدد عدد الصفوف التي ستقوم الخلية بالتمدد فوقها:

 <table border="1">
   <tr>
  <td rowspan="3">خلية 1</td>
  <td>خلية 2</td>
   </tr>
   <tr>
  <td>خلية 3</td>
   </tr>
   <tr>
  <td>خلية 4</td>
   </tr>
 </table>