نبذة سريعة

في هذا الدرس سنتعرف على كيفية إنشاء الجداول بإستخدام HTML وما هي العناصر الاساسية المكونة للجداول .

تركيبة الجداول في HTML

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

العناصر الاساسية لإنشاء الجداول في HTML

يتكون الجدول في لغة HTML من عده عناصر أولها العنصر <table> وعنصر واحد أو أكثر من <th> , <tr> , <td> وتعتبر هذه العناصر الأساسية والإجبارية لإنشاء أي جدول

العنصر <table> في الـ HTML

وهو العنصر الأساسي لإنشاء أي جدول في الـ HTML وبداخله يحتوي على بقية العناصر التي يتكون منها الجدول وهي الاعمدة والصفوف

العنصر <tr> في الـ HTML

وهو إختصار لـ Table Row بمعنى الصف أو السطر الموجود داخل الجدول في الـ HTML ، أي انه هو المكون الأساسي للجدول ، ويحتوى بداخل هذا العنصر على عدد من الأعمدة .

العنصر <th> في الـ HTML

وهو إختصار لـ Table Header ويستخدم ليكون كعنوان للخلية في الجدول بالـ HTML

العنصر <td> في الـ HTML

وهو إختصار لـ Table Data ويعتبر اساسي داخل أي صف موجود في الجدول ويمكن أن يحتوى هذا العنصر على أي عنصر من عناصر الـ HTML ، ممكن أن يحتوى على صور أو نصوص او ممكن أن يحتوى على جداول أخرى

الخلاصة : الجدول في الـ HTML يعبر عنه بعنصر <table> ويجب كتابته كعنصر أساسي موجود بداخله باقي المكونات ، من ثم أقوم بإنشاء الصفوف الموجودة داخل الجدول من خلال عنصر <tr> ومن ثم داخل الصفوف يجب التعبير عن الأعمدة التي تريدها من خلال عنصر الـ <td>

مثال :

<table>
  <tr>
    <th>Name</th>
    <th> Age  </th>
    <th> Address </th>
    <th> Major  </th>
  </tr>
  <tr>
    <td> Mohmmed  </td>
    <td> 27 </td>
    <td> Palestine </td>
    <td> Web </td>
  </tr>
    <tr>
    <td> Haneen  </td>
    <td> 27 </td>
    <td> Palestine </td>
    <td> Design </td>
  </tr>
    <tr>
    <td> Ahmed  </td>
    <td> 30 </td>
    <td> Egypt </td>
    <td> Translation </td>
  </tr>
    <tr>
    <td> Reem  </td>
    <td> 25 </td>
    <td> Saudi Arabia </td>
    <td> Business Management </td>
  </tr>
</table>

ستكون النتيجة كالتالي :

نلاحظ من المثال السابق ، انه كان لدينا خمسة صفوف وتم كتابتها بواسطة العنصر <tr>

ونلاحظ أيضاََ أنه لدينا في داخل كل صف أربعة أعمدة وتم كتابة كل عمود بعنصر <td>

وأخيراََ نلاحظ من المثال أن الصف الأول المحتوى الموجود فيه جاء بخط غامق والسبب في ذلك هو عنصر الـ <th> وأصبح كان هذا الصف هو عبارة عن العنوان الخاص بتعريف كل عمود ماذا ستكون محتوياته .

الخصائص التي يمكن إستخدامها مع عناصر الجدول في HTML

تعملنا سابقاََ انه هناك بعض الخصائص الـ Attribute التي يمكن من خلالها إضافة خصائص للعنصر ، سنتعرف على الخصائص التي يمكن اضافتها للدول في الـ HTML  ويجب أن تعلم أن اغلب هذه الخصائص يمكن الاستغناء عنها واستعمال الت CSS بدلاََ منها ولكن سيتم ذكرها لتكون على علم بها.

خاصية الـ border في جداول الـ HTML

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

<table border="1">
  <tr>
    <th>Name</th>
    <th> Age  </th>
    <th> Address </th>
    <th> Major  </th>
  </tr>
  <tr>
    <td> Mohmmed  </td>
    <td> 27 </td>
    <td> Palestine </td>
    <td> Web </td>
  </tr>
  <tr>
    <td> Haneen  </td>
    <td> 27 </td>
    <td> Palestine </td>
    <td> Design </td>
  </tr>
  <tr>
    <td> Ahmed  </td>
    <td> 30 </td>
    <td> Egypt </td>
    <td> Translation </td>
  </tr>
</table>

ستكون النتيجة كالتالي:

وكما تلاحظ هذه الخاصية القيمة الخاصة بها تكون عبارة عن أرقام ز

خاصية الـ bgcolor في جداول الـ HTML

وتقوم هذه الخاصة بإعطاء لون  لخلفية الجدول في الـ HTML وتقبل هذه الخاصية قيمه الألوان إما بكتابة إسم اللون أو باستخدام نظام الست عشرية للألوان ، مثال :

<table border="1" bgcolor="yellow">
  <tr>
    <th>Name</th>
    <th> Age  </th>
    <th> Address </th>
    <th> Major  </th>
  </tr>
  <tr>
    <td> Mohmmed  </td>
    <td> 27 </td>
    <td> Palestine </td>
    <td> Web </td>
  </tr>
  <tr>
    <td> Haneen  </td>
    <td> 27 </td>
    <td> Palestine </td>
    <td> Design </td>
  </tr>
  <tr>
    <td> Ahmed  </td>
    <td> 30 </td>
    <td> Egypt </td>
    <td> Translation </td>
  </tr>
</table>

وستكون النتيجة كالتالي:

خاصية الـ align في جداول الـ HTML

وتستخدم هذه الخاصة لتحديد مكان وقوع الجدول ، الجدول ككل ، والقيم الخاصة بهذه الخاصية هي :

• right : وتعمل على عرض الجدول في الطرف الأيمن من الصفحة .
• left : وتعمل على عرض الجدول في الطرف الأيسر من الصفحة .
• center :  وتعمل على عرض الجدول في منتصف الصفحة .

مثال:

<table border="1" bgcolor="yellow" align='center'>
  <tr>
    <th>Name</th>
    <th> Age  </th>
    <th> Address </th>
    <th> Major  </th>
  </tr>
  <tr>
    <td> Mohmmed  </td>
    <td> 27 </td>
    <td> Palestine </td>
    <td> Web </td>
  </tr>
  <tr>
    <td> Haneen  </td>
    <td> 27 </td>
    <td> Palestine </td>
    <td> Design </td>
  </tr>
  <tr>
    <td> Ahmed  </td>
    <td> 30 </td>
    <td> Egypt </td>
    <td> Translation </td>
  </tr>
</table>

وستكون النتيجة :

خاصية الـ cellpadding في جداول الـ HTML

وتعمل هذه الخاصية على اضافة مساحة أو فراغ ما بين المحتوى الموجود داخل الصف وما بين الإطار الخاص بها

مثال:

<table border="1" bgcolor="yellow" align='center' cellpadding="20">
  <tr>
    <th>Name</th>
    <th> Age  </th>
    <th> Address </th>
    <th> Major  </th>
  </tr>
  <tr>
    <td> Mohmmed  </td>
    <td> 27 </td>
    <td> Palestine </td>
    <td> Web </td>
  </tr>
  <tr>
    <td> Haneen  </td>
    <td> 27 </td>
    <td> Palestine </td>
    <td> Design </td>
  </tr>
  <tr>
    <td> Ahmed  </td>
    <td> 30 </td>
    <td> Egypt </td>
    <td> Translation </td>
  </tr>
</table>

النتيجة:

أعتقد أن الفرق واضح جداََ ما بين هذه النتيجة والتي قبلها فهناك زيادة في الفراغ ما بين كل خليه والمحتوى التي بداخلها .

خاصية الـ cellspacing في جداول الـ HTML

وتعمل هذه الخاصية على اضافة مساحة أو فراغ ما بين كل خليه وخليه أخرى بجانبها ، مثال:

<table border="1" bgcolor="yellow" align='center' cellpadding="20" cellspacing="10">
  <tr>
    <th>Name</th>
    <th> Age  </th>
    <th> Address </th>
    <th> Major  </th>
  </tr>
  <tr>
    <td> Mohmmed  </td>
    <td> 27 </td>
    <td> Palestine </td>
    <td> Web </td>
  </tr>
  <tr>
    <td> Haneen  </td>
    <td> 27 </td>
    <td> Palestine </td>
    <td> Design </td>
  </tr>
  <tr>
    <td> Ahmed  </td>
    <td> 30 </td>
    <td> Egypt </td>
    <td> Translation </td>
  </tr>
</table>

النتيجة:

أرجو ان تفرق ما بين الـ cellpadding والـ cellspacing

خاصية الـ frame في جداول الـ HTML

هذه الخاصية تعمل على عرض حدود أي جانب من جوانب الخاصة بالجدول في الـ HTML ، جانب العلوي ، السفلي أو الجانب الأيمن أو اليسر أو الاثنين معاََ ، وهذه الخاصية لها العديد من القيم ، وهي :

• above : وهنا تعني أن يتم عرض الحدود للجانب العلوي فقط .
• below : وهي تعني أن يتم عرض الحدود للجانب السفلي فقط .
• hsides : وهي إختصار لـ Horizontal Sides أي عرض الحدود للجانبين الأفقي فقط .
• vsides : وهي إختصار لـ Vertical Sides أي عرض الحدود للجانبين العمودية فقط .
• lhs : وهي إختصار لـ Left Hand Side أي عرض الحدود للجانب الأيسر فقط .
• rhs : وهي إختصار لـ Right and Side أي عرض الحدود للجانب الأيمن فقط .
• box : وتعني إظهار جميع الحدود الخاصة بالجدول .
• border : هي بضبط نفس القيمة box .
• void : وتعني قم بإظهار الجدول بدون أي حدود ، أي تجنب استخدام الحدود .