random
أخبار ساخنة

الجداول Table - تعلم Html

Samouel Ghaly
الصفحة الرئيسية

الجداول Table - تعلم Html

شرح إنشاء جدول (Table) في HTML - درس عملي خطوة بخطوة

في الدرس ده هنتعلم إزاي نعمل جدول باستخدام لغة HTML، وهنتعرف على الوسوم الأساسية لإنشاء الجدول، زي <table>، <tr>، <td>، و<th>، وكمان هنتعلم نستخدم الوسوم الاختيارية زي <thead>، <tbody>، و<tfoot>، وهنشوف إزاي نتحكم في دمج الأعمدة والصفوف باستخدام colspan وrowspan. كل ده مع تطبيق عملي من داخل محرر الأكواد والمتصفح علشان تبقى شايف النتيجة بعينك.

📌 أول حاجة: إيه هو الجدول وليه بنستخدمه؟

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

الهيكل الأساسي لأي جدول في HTML:

أي جدول بيتكون من 3 عناصر رئيسية:

  1. <table>: وده الوسم الأساسي اللي بيحتوي على كل محتويات الجدول.

  2. <tr>: اختصار لـ Table Row، وده بيمثل الصف.

  3. <td>: اختصار لـ Table Data، وده بيمثل الخلية أو العمود اللي جوا الصف.

كمان عندنا <th>، وده بنستخدمه بدل <td> لو الخلية عبارة عن عنوان (Header) للعمود.

نبدأ نكتب الكود:

في محرر الأكواد، هنبدأ نكتب البنية دي: 

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>جدول HTML</title>
</head>
<body>
  <table border="1">
    <tr>
      <th>الاسم</th>
      <th>السن</th>
      <th>الوظيفة</th>
    </tr>
    <tr>
      <td>محمد</td>
      <td>30</td>
      <td>مهندس</td>
    </tr>
    <tr>
      <td>سارة</td>
      <td>28</td>
      <td>محاسبة</td>
    </tr>
  </table>
</body>
</html>

لما نشغل الكود في المتصفح هنشوف جدول فيه 3 أعمدة وعنوان لكل عمود، وصفين فيه بيانات محمد وسارة.

شرح كل وسم في الكود:

  • <table border="1">: ده بداية الجدول، وborder="1" معناها إننا نضيف حدود للجدول علشان تبقى الخلايا واضحة.

  • <tr>: كل واحدة من دول بتمثل صف في الجدول.

  • <th>: خلايا العنوان اللي في أول صف (اللي بيكون فيها أسماء الأعمدة).

  • <td>: خلايا البيانات اللي في الصفوف التانية.

تحسين شكل الجدول وتنظيمه باستخدام <thead>, <tbody>, <tfoot>

دلوقتي هنعيد كتابة الجدول بحيث يكون منظم أكتر، وده بيساعدنا لو بنستخدم CSS أو JavaScript بعدين: 

<table border="1">
  <thead>
    <tr>
      <th>الاسم</th>
      <th>السن</th>
      <th>الوظيفة</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>محمد</td>
      <td>30</td>
      <td>مهندس</td>
    </tr>
    <tr>
      <td>سارة</td>
      <td>28</td>
      <td>محاسبة</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">بيانات موظفين الشركة</td>
    </tr>
  </tfoot>
</table>

شرح الجديد:

  • <thead>: جزء الهيدر بتاع الجدول.

  • <tbody>: الجزء اللي فيه البيانات الرئيسية.

  • <tfoot>: ممكن نكتب فيه ملخص أو ملاحظات تحت الجدول.

  • colspan="3": معناه إن الخلية دي تاخد 3 أعمدة مرة واحدة، يعني تندمج مع الأعمدة اللي جنبها.

كمان معلومة مهمة: إزاي ندمج الصفوف باستخدام rowspan

لو حبيت تدمج خلية بحيث تمتد على أكتر من صف، بنستخدم rowspan. مثال: 

<table border="1">
  <tr>
    <th>الاسم</th>
    <th colspan="2">تفاصيل</th>
  </tr>
  <tr>
    <td rowspan="2">أحمد</td>
    <td>25</td>
    <td>مبرمج</td>
  </tr>
  <tr>
    <td>26</td>
    <td>مصمم</td>
  </tr>
</table>

هنا الخلية بتاعة "أحمد" بتاخد صفين، باستخدام rowspan="2".

ملحوظات هامة:

  • دايمًا تأكد إن كل <tr> جواه نفس عدد الأعمدة، أو استخدم colspan وrowspan بحذر.

  • الجدول بيتعامل على إنه عنصر block، يعني بياخد مساحة كاملة، لكن ممكن نتحكم في شكله وتنسيقه بـ CSS.

  • ممكن كمان نستخدم style أو نربط CSS خارجي لتحسين التصميم.

خلاصة الدرس:

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

لو لسه فيه حاجة مش واضحة أو محتاج شرح لحاجة تانية في HTML، ابعتلي وهنكمل سوا.

شاهد الفيديو


google-playkhamsatmostaqltradent