الموضوع: دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (وسوم الجداول) م#9

وسوم الجداول Tables Tags
<table> <tr> <th> <td>

إن الوسم الرئيسي لإنشاء جدول هو <table> ثم يتفرع منه عدة وسوم أخرى وهي:
<tr>
وهو اختصار لكلمة Table Rows وتعني صفوف الجدول ، فكل جدول يتكون من صفوف وكل صف يحتوي على عدة خلايا تحتوي كل خلية (Cell) على بيانات (Data) والتي قد تكون نصوص أو صور أو روابط وما شابه .
<td>
وهو اختصار لكلمة Table Data وتعني بيانات الجدول التي تكون موجودة داخل كل خلية من خلايا الجدول .
<th>
وهو اختصار لكلمة Table Headings وتعني رؤوس الجدول وهي العناوين الرئيسية للجدول والتي تكون بالصف الأول العلوي عادة ، وعادة تأخذ شكلا مميزا للخط فيكون الخط ثقيلا (Bold) ويكون اتجاهه بوسط الخلية (Center) .

تطبيق عملي لجدول مكون من 3 صفوف كل صف يحتوي على 3 خلايا بيانات والصف العلوي الأول به عنوان الجدول :

كود:

<table>
   <tr>
      <th>First Heading</th>
      <th>Second Heading</th>
      <th>Third Heading</th>
   </tr>
   <tr>
      <td>Second row, First data cell</td>
      <td>Second row, Second data cell</td>
      <td>Second row, Third data cell</td>
   </tr>
   <tr>
      <td>Third row, First data cell</td>
      <td>Third row, First data cell</td>
      <td>Third row, Third data cell</td>
   </tr>
</table>

النتيجة:



نلاحظ في الصورة السابقة أن الجدول يظهر بدون أي حدود تُظهر وتوضح أنه جدول وبالتالي اختلطت الخلايا والتصقت النصوص ببعضها ، ولذلك لابد من وجود سمة (Attribute) هامة جدا بجوار الوسم الرئيسي <table> وهي border لإعطاء الجدول حدود خارجية حول كل خلية توضح ما بداخلها وتفصله عن باقي الخلايا ، وسنعطي هذه السمة قيمة (Value) واحد بكسل (Pixel) مما يعني أن الإطار أو الحد الخارجي للجدول سيكون حجمه واحد بكسل ، كما سوف نضيف سمة (Attribute) أخرى وهي width وذلك لتحديد العرض الإجمالي للجدول حتى يتم تحجيمه ولا يأخذ عرض الصفحة بالكامل وسنعطيها القيمة 400 بكسل :
تطبيق عملي على إضافة هاتين السمتين:

كود:

<table border="1px" width="400px">
   <tr>
      <th>First Heading</th>
      <th>Second Heading</th>
      <th>Third Heading</th>
   </tr>
   <tr>
      <td>Second row, First data cell</td>
      <td>Second row, Second data cell</td>
      <td>Second row, Third data cell</td>
   </tr>
   <tr>
      <td>Third row, First data cell</td>
      <td>Third row, First data cell</td>
      <td>Third row, Third data cell</td>
   </tr>
</table>

النتيجة:



يلاحظ أن الوضع الافتراضي للجدول هو الوضع الأفقي (Horizontal) مما يعني أن صف عنوان الجدول يكون بالأعلى وباقي الخلايا تكون بأسفله ، لكن ماذا لو أحببنا تغيير الوضع وجعلناه وضعا رأسيا (Vertical) بحيث يتحول صف عنوان الجدول إلى عمود على اليسار وباقي الصفوف تتحول إلى أعمدة على يمينه كما في الصورة التالية ؟



الحل سهل جدا ، كل ما سنفعله هو جعل كل صف <tr> يحتوي على خلية لعنوان الجدول <th> وخليتان للبيانات <td> ، دقق جيدًا في المثال التالي :

كود:

<table border="1px" width="400px">
   <tr>
      <th>First Heading</th>
      <td>Second Column, First data cell</th>
      <td>Third Column, First data cell</th>
   </tr>
   <tr>
      <th>Second Heading</td>
      <td>Second Column, Second data cell</td>
      <td>Third Column, Second data cell</td>
   </tr>
   <tr>
      <th>Third Heading</td>
      <td>Second Column, Third data cell</td>
      <td>Third Column, Third data cell</td>
   </tr>
</table>

أخيرًا ، ماذا لو أردنا إنشاء جدول مكون من صفين وثلاثة أعمدة مثلا أو العكس ثلاثة صفوف وعمودين على عكس الطريقة المعتادة التي يكون فيها عدد الأعمدة مساوٍ لعدد الصفوف ؟
هنا لابد لنا من استخدام سمة (Attribute) تختلف حسب عدد الأعمدة أو الصفوف الأكثر التي نريدها ، فإذا كنا نريد جدول مكون من صفين وثلاثة أعمدة ؛ فهذا يعني أنه كان هناك جدول مكون من صفين وعمودين ولكننا سوف نقسم أحد خلايا هذين الصفين إلى عمودين بدلا من أن كانوا عمودا واحدا ، وبالتالي فسوف نحتاج إلى سمة colspan وسوف نقوم بإعطائها قيمة 2 إذا كنا نرغب في عمودين أو 3 في حالة رغبتنا في 3 أعمدة وهكذا .
مثال :

كود:

<table border="1px" width="400px">
   <tr>
      <td>First Row, First Column</td>
      <td colspan="2">First Row, Second Column</td>
   </tr>
   <tr>
      <td>Second Row, First Column</td>
      <td>Second Row, Second Column</td>
      <td>Second Row, Third Column</td>
   </tr>
</table>

النتيجة:



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

كود:

<table border="1px" width="400px">
   <tr>
      <td>First Row, First Column</td>
      <td>First Row, Second Column</td>
   </tr>
   <tr>
      <td rowspan="2">Second Row, First Column</td>
      <td>Second Row, Second Column</td>
   </tr>
   <tr>
      <td>Third Row, Second Column</td>
   </tr>
</table>

النتيجة:



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

الدرس السابق
http://www.nilemotors.net/Nile/417740-html-8-a.html