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

اعرض البيانات في صفوف وأعمدة بالوسوم 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. أعد ترتيب هذه الأسطر للحصول على جدول صحيح من صف واحد وخلية واحدة.

   <table>
   <tr>
   <td>1</td>
   </tr>
   </table>

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