هل هي صعبة؟

الكود:

   <table>
     <tr>
      <td>خلية 1</td>
      <td>خلية 2</td>
     </tr>
     <tr>
      <td>خلية 3</td>
      <td>خلية 4</td>
     </tr>
   </table>
   

ما الفرق بين

الكود:

<tr>

و

الكود:

<td>

؟

• وسم البداية
  

  الكود:

  <table>

  ووسم الإغلاق
  

  الكود:

  </table>

  يبدأ من بينهما الجدول وينتهي، منطقي.
  

• الكود:

  <tr>

  تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً.
  

• الكود:

  <td>

  هي اختصار "table data". هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول، كل هذا بسيط ومنطقي.
  

الكود:

<table>

الكود:

<tr>

الكود:

<td>

الكود:

</td>

الكود:

<td>

الكود:

</td>

الكود:

</tr>

الكود:

<tr>

الكود:

</table>

الكود:

   <table>
     <tr>
      <td>خلية 1</td>
      <td>خلية 2</td>
      <td>خلية 3</td>
      <td>خلية 4</td>
     </tr>
     <tr>
      <td>خلية 5</td>
      <td>خلية 6</td>
      <td>خلية 7</td>
      <td>خلية 8</td>
     </tr>
     <tr>
      <td>خلية 9</td>
      <td>خلية 10</td>
      <td>خلية 11</td>
      <td>خلية 12</td>
     </tr>
   </table>
   

هل هناك أية خصائص للجداول؟

الكود:

   <table border="1">
     <tr>
      <td>خلية 1</td>
      <td>خلية 2</td>
     </tr>
     <tr>
      <td>خلية 3</td>
      <td>خلية 4</td>
     </tr>
   </table>
   

الكود:

   <table border="1" width="30%">
   

المزيد من الخصائص

• align: يحدد المحاذاة لمحتويات الجدول، أو الصف أو في الخلية، فمثلاً يمكن محاذاة النص إلى اليمين أو اليسار أو في المنتصف.
  
• يحدد المحاذاة الرأسية لمحتويات الخلية، فيمكن محاذاة النص في الأعلى أو الأسفل أو المنتصف.
  

الكود:

   <td align="right" valign="top">Cell 1</td>
   

ماذا يمكن أن أضع في الجداول؟