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