الجداول البسيطة

اعرض البيانات في صفوف وأعمدة بالوسوم table وtr وth وtd.

6 دقيقة · 3 أسئلة

جدول مواعيد، قائمة أسعار، ترتيب رياضي: بعض المعلومات تُقرأ طبيعيًّا في صفوف وأعمدة. وهذا ما وُجدت من أجله جداول HTML. تكفي ثلاثة وسوم للبدء: <table> يُحيط بالجدول كله، و<tr> (table row أي صف جدول) يُنشئ صفًّا، و<td> (table data أي بيانات جدول) يُنشئ خلية داخل صف.

<table>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>0.30 euros</td>
  </tr>
</table>

لإعطاء كل عمود عنوانًا، استبدل <td> بـ <th> (table header أي رأس جدول) في الصف الأول. يعرض المتصفح خلايا الرأس هذه بخط عريض ومتوسّطة، مما يميّزها عن البيانات.

<table>
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
</table>

يبني المتصفح الجدول صفًّا صفًّا: تحطّ الخلية الأولى من كل <tr> في العمود الأول، والخلية الثانية في العمود الثاني، وهكذا. وبشكل افتراضي، يُعرض الجدول من دون حدود مرئية: وهذا طبيعي - فالمظهر (الخطوط والألوان والتباعد) سيُعالَج لاحقًا باستخدام CSS.

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. أي وسم يُنشئ صف جدول؟
   • <td>
   • <tr>
   • <table>
   • <row>
2. ما الفرق بين <td> و<th>؟
   • <th> يُنشئ خلية رأس، و<td> خلية بيانات
   • <th> يُنشئ جدولًا كاملًا، و<td> صفًّا
   • لا فرق، فالاثنان قابلان للتبادل
3. لماذا ينبغي استخدام جدول HTML؟
   • لتخطيط الموقع بأكمله
   • لعرض البيانات في صفوف وأعمدة
   • لاستبدال القوائم ذات النقاط