html الجداول

html تنظيم الجدول

آخر تحيين: 06-01-2015

html دمج خلايا الجدول html إنشاء الجدول


لتنظيم الجدول نستعمل الوسوم الآتية :

  • <th> .وسم خلية رأس الجدول
  • <caption> .وسم عنوان الجدول
  • <thead> . مجموعة خلايا رأس الجدول
  • <tfoot> . مجموعة خلايا قدم الجدول
  • <tbody> . مجموعة خلايا جسد الجدول

خلية رأس الجدول : th

لكي نُبرز خلايا رأس الجدول نستعمل وسم th بدل td . في مثالنا السابق ، سنغير خلايا td في السطر الأول الذي يضم : الإسم و العمر و النقطة ، مبدئيا تعتبر هذه الخلايا بمثابة عناوين أو مفاتيح للأعمدة و لهذا سنميّزها عن باقي خلايا الجدول .


<table>
  <tr>  
     <th> الإسم </th>
     <th> العمر </th>
     <th> النقطة </th>
  </tr>
  <tr>  
     <td> محمد </td>
     <td> 25 </td>
     <td> 70 </td>
  </tr>
  <tr>  
     <td> عماد </td>
     <td> 22 </td>
     <td> 90 </td>
  </tr>
</table>

مع القليل من الأنماط :

table
{
  border-collapse: collapse;
} 
td, th
{
  border: 1px solid #333;
  padding:10px;
} 
th{
  background: silver;
}
مشاهدة النتيجة

وسم عنوان الجدول : caption

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

<table>
  <caption> بيانات أعضاء لعبة المبارزة </caption>
  <tr>
    ...
  </tr>
  ...
</table>
مشاهدة النتيجة

أصبح جدولنا أكثر وضوحا . يمكنكم الآن استعمال براعتكم في لغة css لتنميقه على ذوقكم .
مسألة أخيرة تتعلق بالعنوان caption . ربما رغبتم أن تضعوه في مكان آخر ، تحت الجدول مثلا . يمكنكم ذلك باستعمال خاصية خاصة بهذا العنوان و هي : caption-side و تأخذ أربع قيم معروفة :

  • top : العنوان فوق الجدول
  • bottom : العنوان تحت الجدول
  • right : العنوان يمين الجدول
  • left : العنوان يسار الجدول
caption
{
  caption-side:bottom;
}

وسوم هيكلة الجداول

هذه الوسوم تقوم بتقسيم الجدول إلى : رأس الجدول ، قدم الجدول و جسد الجدول :

  • <thead> : مجموعة خلايا رأس الجدول
  • <tfoot> : مجموعة خلايا قدم الجدول
  • <tbody> : مجموعة خلايا جسد الجدول

ما يجب أن تتذكروه هو هذا الترتيب . نضع خلايا رأس الجدول <thead> أولا ثم تليها مباشرة خلايا قدم الصفحة <tfoot> و في الأسفل خلايا جسد الصفحة <tbody> .
في خلايا قدم الصفحة نضع غالبا نفس محتوى خلايا رأس الصفحة :

<table>
  <thead> <!-- مجموعة خلايا رأس الجدول -->
    <tr> ... </tr>
  </thead>
  
  <tfoot>  <!-- مجموعة خلايا قدم الجدول -->
    <tr> ... </tr>
  </tfoot>
     
  <tbody>   <!-- مجموعة خلايا جسد الجدول -->
   <tr> ... </tr>
   <tr> ... </tr>
   <tr> ... </tr>
 </tbody>
</table>

مثال :

<table>
  <caption> عنوان الجدول </caption>
  <thead> <!-- مجموعة خلايا رأس الجدول -->
    <tr>  
      <td> 1 </td>  
      <td> 2 </td>  
      <td> 3 </td>  
    </tr>
  </thead>
  
  <tfoot>  <!-- مجموعة خلايا قدم الجدول -->
    <tr>  
      <td> 1 </td>  
      <td> 2 </td>  
      <td> 3 </td>  
    </tr>
  </tfoot>
     
  <tbody>   <!-- مجموعة خلايا جسد الجدول -->
    <tr>  
      <td> 4 </td>  
      <td> 5 </td>  
      <td> 6 </td>  
    </tr>
    <tr>  
      <td> 7 </td>  
      <td> 8 </td>  
      <td> 9 </td>  
    </tr>
    <tr>  
      <td> 10 </td>  
      <td> 11 </td>  
     <td> 12 </td>  
   </tr>
   <tr>  
     <td> 13 </td>  
     <td> 14 </td>  
     <td> 15 </td>  
   </tr>
   <tr>  
     <td> 16 </td>  
     <td> 17 </td>  
     <td> 18 </td>  
   </tr>  
 </tbody>
</table>

بالنسبة للوسم tfoot . غالبا ما نستعمله إذا كان الجدول طويلا ، و إلا نكتفي فقط باستعمال thead و tbody .