html الجداول

html إنشاء الجدول

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

html تنظيم الجدول تصميم ديزاين كامل للموقع : التصحيح


الوسوم الأساسية لإنشاء الجدول

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

  • <table> : وسم الجدول
  • <tr> : وسم سطر الجدول
  • <td> : وسم خلية الجدول

وسم الجدول : <table>

نبدأ بالوسم الأول <table> و هو الوسم الشامل للجدول ، سيضم جميع الوسوم الأخرى . و لا يجب وضعه قطْعًا داخل وسم الفقرة .


<table>
    <!-- محتوى الجدول -->
</table>

هذا الوسم وحده غير كاف لصناعة جدول ، سنحتاج لوسوم أخرى لتعيين السطور و الخلايا . سنوظف لهذا وَسْميْ

  • tr : لتحديد عدد السطور
  • td: لتحديد عدد الخلايا

لندرس مثالا : سننشيء جدولا يتكون من ثلاث (3) سطور و تسعة (9) خلايا :
أبدأ أولا بتحديد السطور باستعمال الوسم tr

وسم سطر الجدول : <tr>

السطر 1
السطر 2
السطر 3
<table>
  <tr> </tr>  <!-- السطر 1-->
  <tr> </tr>  <!-- السطر 2 -->
  <tr> </tr>  <!-- السطر 3 -->
</table>

قمنا بإنشاء جدول يتكون من ثلاثة سطور ، سنقوم بتحديد عدد الخلايا التي سيضمها كل سطر باستعمال وسوم td

وسم خلية الجدول : td

بالنسبة للخلايا نستعمل وسوم td . و نضعها داخل وسوم السطر

الخلية 1الخلية 2الخلية 3
الخلية 4الخلية 5الخلية 6
الخلية 7الخلية 8الخلية 9

لدينا تسع خلايا . سنضع ثلاثا في كل سطر :


<table>
  <tr>  
    <td> </td>  <!-- الخلية 1 -->
    <td> </td>  <!-- الخلية 2 -->
    <td> </td>  <!-- الخلية 3 -->
  </tr>
  <tr>  
    <td> </td>  <!-- الخلية 4 -->
    <td> </td>  <!-- الخلية 5 -->
    <td> </td>  <!-- الخلية 6 -->
  </tr>
  <tr>  
    <td> </td>  <!-- الخلية 7 -->
    <td> </td>  <!-- الخلية 8 -->
    <td> </td>  <!-- الخلية 9 -->
  </tr>
</table>

بهذه الطريقة نكون قد أنتجنا جدولا . و لم يبقى لنا سوى ملإه بالبيانات ، و وضعها داخل الخلايا ، أي داخل وسوم td


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

ستحصلون على جدول شبيه بهذا :


الإسمالعمرالنقطة
محمد2570
عماد2290

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

<table border="1">
...
</table>

إصدار HTML5 لم يعد يأخذ بعين الإعتبار الصفات التالية :
  • border
  • cellpadding
  • cellspacing
  • align
  • valign
  • char
  • charoff

تجنّبوا إستعمال هذه الصفات ، لإضافة الأنماط إستعملوا بدل ذلك لغة CSS .

الطريقة الصحيحة لإضافة الأنماط هي عن طريق CSS :


td {
  border: 1px solid #333;
  padding: 5px;
}

سنحصل على جدول شبيه بهذا :


حتى لا تظهر كل خلية منفصلة عن الأخرى ، نقوم بلصقها مع بعضها باستعمال الخاصية border-collapse التي سنطبقها على إسم وسم table و تأخذ قيمتين :

  • collapse : لِلصق الخلايا ببعضها
  • separate : لفصل الخلايا (القيمة التلقائية)

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

بدأ جدولنا يتحسّن . و أترك لكم الخيار لتنميقه باستعمال ما يحلو لكم من خاصيات CSS .
هذا الجدول كاف و مطابق تماما لمعايير "W3C" . و لا أحد سيلومكم على الإكتفاء بهاته الوسوم . لكن لأغراض تنظيمية من جهة ، و تسهيل عملية قراءة الجدول من لدن محرّكات البحث من جهة أخرى "هذا سيمنحكم نقطة إضافية لتحسين ترتيب موقعكم". من المفيد لكم عدم التوقف هنا و قراءة الدرس الموالي