كل ما تريد معرفة عن الجداول في الـ HTML

نبذة سريعة

في هذا الدرس سنتعرف على كيفية إنشاء الجداول بإستخدام 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 element html

 

مثال :

<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>

 

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

table html tag

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

table row html tag

 

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

table data html tag

 

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

Table Head HTML Tag

 

الخصائص التي يمكن إستخدامها مع عناصر الجدول في 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>

 

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

border attribute table html tag

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

 

خاصية الـ 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>

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

bgcolor attribute table html tag

خاصية الـ 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>

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

align attribute table html tag

 

خاصية الـ 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>

النتيجة:

vcellpadding attribute table html tag

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

 

خاصية الـ 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>

النتيجة:

cellspacing attribute table html tag

 

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

different between cellpadding cellspacing attribute table html tag

 

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

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

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