HTML Tables

-

في هذه المقالة بنتعرف على الجدوال في HTML، بنحكي عن الطرق المختلفة لتنفيذها، وبنفهم كمان لشو تستخدم من خلال الأمثلة.

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

تعريف الجداول في HTML:

 يتم تعريف جدول HTML باستخدام tag باسم "table". ويتم تعريف كل صف في الجدول باستخدام tag تسمى "tr". ويتم تعريف رأس الجدول table header باستخدام tag تسمى "th". وبشكل افتراضي، تكون عناوين الجدول غامقة وتتوسط. ويتم تعريف بيانات الجدول / الخلية cell باستخدام tag باسم "td".

مثال على الجدول 

الشكل التالي يمثل جدول 


نوع السيارة
الموديل
BMW
2022
Mercedes
2021
Honda
2022
ولفهم الجداول نوضح المثال السابق :
نوع السيارة والموديل عرفناهم بلون مخلف لانهم عبارة عن table header 
السطر التالي عبارة عن صف الي هو tr

BMW
2022
المحتوي التالي عبارة عن خلية الي هي td

BMW
الجدول السابق عبارة عن جدول مكون من 2 عمود و4 صف (يشمل ال header)، تمام هذا الكلام كيف بترجم داخل HTML 
حتي نعرف كيف طبق الكود التالي في صفحة HTML

<!DOCTYPE html>
<html>
<head>
    <title>My favicon Icon</title>
    <link rel="icon" type="image/x-icon" href="favicon.jpg">
    <style>
 
    </style>
</head>
<body>
    <table dir="rtl">
        <tr>
          <th>نوع السيارة</th>
          <th>الموديل</th>
        </tr>
        <tr>
          <td>BMW</td>
          <td>2022</td>
          
        </tr>
        <tr>
          <td>Mercedes</td>
          <td>2021</td>
        </tr>
        <tr>
            <td>Honda</td>
            <td>2022</td>
          </tr>
      </table>
</body>
</html>
شغل الصفحة وشوف النتيجة:

النتيجة جدول بالمحتويات السابقة. لكن اكيد بتلاحظ ان الشكل العام للجدول غير مرتب. وحتى نعدل الجدول اكيد نحتاج الى إضافة كود CSS مشان هيك عدل الكود السابق الى :

<!DOCTYPE html>
<html>
<head>
    <title>My favicon Icon</title>
    <link rel="icon" type="image/x-icon" href="favicon.jpg">
    <style>
 table, th, td {
  border:1px solid black;
}
th {
  background-color: gray;
}
    </style>
</head>
<body>
    <table dir="rtl">
        <tr>
          <th>نوع السيارة</th>
          <th>الموديل</th>
        </tr>
        <tr>
          <td>BMW</td>
          <td>2022</td>
        </tr>
        <tr>
          <td>Mercedes</td>
          <td>2021</td>
        </tr>
        <tr>
            <td>Honda</td>
            <td>2022</td>
          </tr>
      </table>
</body>
</html>
شوف النتيجة:
تمام هيك الوضع ممتاز. 

طيب نرجع للكود ونحاول نفهم شو عملنا.
الجدول يبدا ب <table> وينتهي ب </table> وبعد هيك عرفنا header
تعريف header table 
حتى نعرف الرأس header  للجدول نستخدم الكود: 
<tr>
   <th>نوع السيارة</th>
   <th>الموديل</th>   
</tr>
الرأس header عبارة عن سطر بأول الجدول يتكون من سطر ومجموعة من Cell. هنا تعريف cell بكون باستخدام <th>…</th>

تعريف السطر Row في الجدول 
طريقة الكتابة لازم يبدأ ب <tr> وينتهي ب </tr>:
<tr>
  <td>BMW</td>
  <td>2022</td>
</tr>
 السطر عبارة عن مجوعة من الخلايا وتحتوي على البيانات المطلوب عرضها وهو الأساس في كتابة الجداول

تعريف cell في الجدول 
طريقة الكتابة لازم يبدأ ب <td>  وينتهي ب </td>

ملاحظات: 
  • ممكن ان تحتوي cell على اكثر من Row واكثر من cell  نتعلم كيف في الدروس القادمة.
  • عدد Row وال Cell غير محدود يمكن كتابة العدد المناسب لاحتياج التطبيق. 
  • في header table التي تستخدم <th> الوضع الافتراضي لها نوع الخط غامق وفي وسط الcell يمكن تغييرها بنتعلم كيف في الدروس القادمة