HTML for Kids · درس

الجداول: تنظيم البيانات

تعلّم كيفية إنشاء جداول لعرض المعلومات

الجداول: تنظيم البيانات درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.

الجداول: تنظيم البيانات

مرحبًا بكم في الدرس التالي! سنتعلّم اليوم كيفية إنشاء الجداول في HTML. تُعدّ الجداول رائعة لتنظيم المعلومات في صفوف وأعمدة.

ما الجداول؟

الجداول طريقة لعرض المعلومات بتنسيق منظم. ويتكوّن كل جدول من صفوف وأعمدة.

إليكم شكل الجدول:

Name      Age      City


Alice     12       New York


Bob       15       London

لننشئ هذا الجدول باستخدام HTML!

إنشاء جدول بسيط

تُنشأ الجداول في HTML باستخدام الوسم <table>. وتُنشأ الصفوف باستخدام الوسم <tr>، بينما تُنشأ الخلايا باستخدام الوسم <td>.

مثال:

<table>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

إضافة رأس للجدول

يمكنكم إضافة رؤوس إلى الجدول باستخدام الوسم <th>. تجعل الرؤوس الجدول أكثر وضوحًا.

مثال:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

إضافة إطار إلى الجدول

لا تحتوي الجداول افتراضيًا على إطارات. ويمكنكم إضافة إطار باستخدام السمة border أو باستخدام CSS.

مثال:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

دمج الأعمدة والصفوف

قد تحتاجون أحيانًا إلى جعل خلية تمتد عبر عدة أعمدة أو صفوف. استخدموا السمة colspan أو rowspan لتحقيق ذلك.

مثال:

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

تنسيق الجدول

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

مثال:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: lightgray;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

جرّبوا بأنفسكم

لننشئ جدولًا يعرض قائمة بأفلامكم المفضلة. إليكم مثالًا:

<!DOCTYPE html>
<html>
  <head>
    <title>My Favorite Movies</title>
  </head>
  <body>
    <h1>My Favorite Movies</h1>
    <table border="1">
      <tr>
        <th>Movie</th>
        <th>Year</th>
        <th>Genre</th>
      </tr>
      <tr>
        <td>Inception</td>
        <td>2010</td>
        <td>Science Fiction</td>
      </tr>
      <tr>
        <td>The Lion King</td>
        <td>1994</td>
        <td>Animation</td>
      </tr>
    </table>
  </body>
</html>

أحسنتم!

تهانينا! لقد تعلّمتم كيفية إنشاء الجداول وإضافة الرؤوس وحتى تنسيقها. تُعدّ الجداول طريقة ممتازة لتنظيم البيانات وعرضها. في الدرس التالي، سنتعلّم عن النماذج لجمع إدخالات المستخدمين. استعدوا لجعل صفحاتكم تفاعلية!

الأسئلة الشائعة

هل درس «الجداول: تنظيم البيانات» مجاني؟

نعم — نص درس «الجداول: تنظيم البيانات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.

ماذا ستتعلم في «الجداول: تنظيم البيانات»؟

تعلّم كيفية إنشاء جداول لعرض المعلومات تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟

لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «الجداول: تنظيم البيانات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟

نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML for Kids