جداول في HTML: دليل لإنشاء وتنسيق الجداول في HTML

يعد الجدول مكونًا أساسيًا في HTML لعرض البيانات بتنسيق منظم مع صفوف وأعمدة. في HTML ، يتم إنشاء الجداول باستخدام علامات <table> و <tr> و <td>.

تمثل العلامة <table> حاوية الجدول الرئيسية ، والتي تحتوي على جميع الصفوف والأعمدة. يتم تحديد الصفوف باستخدام علامة <tr>(صف الجدول) ، بينما يتم تحديد الخلايا داخل الصفوف باستخدام علامة <td>(بيانات الجدول). بالإضافة إلى ذلك ، يمكنك استخدام علامة <th>(رأس الجدول) لتحديد خلايا الرأس للجدول.

يمكنك استخدام سمات مثل colspan و rowspan لدمج الخلايا في الجدول أو امتداد الخلايا عبر صفوف وأعمدة متعددة. علاوة على ذلك ، يمكنك تطبيق خصائص CSS لتخصيص مظهر الجدول وتخطيطه.

الجدول( <table>)

- <table> يستخدم العنصر لإنشاء جدول بتنسيق HTML.

- توضع البيانات في صفوف( <tr>) وأعمدة( <td> أو <th>).

- يتم وضع كل خلية بيانات داخل <td>(خلية بيانات) أو <th>(خلية رأس).

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

رأس العمود( <th>)

- <th> يتم استخدام العنصر لإنشاء رؤوس أعمدة في جدول.

- توضع عادةً في الصف الأول من الجدول.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>  

صفوف البيانات( <tr>):

- <tr> يستخدم العنصر لإنشاء صفوف البيانات في جدول.

- يتم وضع خلايا البيانات( <td>) أو خلايا الرأس() داخل هذه العناصر. <th> <tr>

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

العمود الممتد( colspan)

تُستخدم السمة colspan لتحديد عدد الأعمدة التي ستمتدها خلية بيانات أو خلية رأس في الجدول.

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>  

امتداد الصف( rowspan)

تُستخدم السمة rowspan لتحديد عدد الصفوف التي ستمتدها خلية بيانات أو خلية رأس في الجدول.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>  

دمج الخلايا( colspan و rowspan)

يمكنك الجمع بين كل من colspan السمات rowspan والسمات لدمج الخلايا في جدول.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>  

border ملكية

- border تحدد الخاصية سمك حد الجدول.

- قيمة border عدد صحيح غير سالب.

<table border="1">  
<!-- Table rows and columns -->  
</table>  

cellpadding ملكية

- ، cellpadding تحدد الخاصية المسافة بين محتوى الخلية وحدود الخلية في الجدول.

- قيمة cellpadding عدد صحيح غير سالب

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>  

cellspacing ملكية

- cellspacing تحدد الخاصية التباعد بين الخلايا في الجدول.

- قيمة cellspacing عدد صحيح غير سالب.

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>  

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