العناصر المتعلقة بالجداول

في هذه المقالة، نشرح العناصر المتعلقة بالجداول.۔

هذا يشرح كيفية وصف الجداول والعناوين التوضيحية للجداول في HTML مع أمثلة.۔

YouTube Video

العناصر المتعلقة بالجداول

علامة <table>

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• تُستخدم علامة <table> لإنشاء جدول ينظم ويعرض البيانات في صفوف وأعمدة.۔

  تقوم علامة <table> بتنظيم البيانات بصريًا وتتيح إنشاء جداول تحتوي على صفوف وأعمدة متعددة.۔ تُعرف الصفوف بعلامة <tr>، وخلايا الرأس بعلامة <th>، وخلايا البيانات بعلامة <td>.۔

• يمكنك تخصيص نمط وتصميم الجدول باستخدام CSS.۔

علامة <tr>

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• تُستخدم علامة <tr> لتحديد الصفوف في الجدول.۔

  تُستخدم علامة <tr> لإنشاء كل صف في الجدول، وتحتوي على خلايا (<td> أو <th>).۔

• يمكن أن يحتوي كل صف على خلايا متعددة، مما يشكل الهيكل العام للجدول.۔

علامات <th> و<td>

1<th>Header 1</th>
2<td>Data 1</td>

• تحدد علامة <th> خلية رأس الجدول.۔ تُستخدم عادة في صفوف الرأس، ويكون محتوى الخلايا غامقًا ومركزيًا.۔
• تحدد علامة <td> خلية بيانات قياسية في الجدول، والتي تعرض بيانات الجدول العادية.۔

سمات colspan وrowspan

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

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

• تسمح خاصية colspan للخلية بالامتداد عبر أعمدة متعددة.۔
• تسمح سمة rowspan للخلية بالامتداد عبر عدة صفوف.۔

علامات <thead>, <tbody>, <tfoot>

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• تُستخدم علامة <thead> لتحديد قسم رأس الجدول.۔ تحتوي عادةً على رؤوس الأعمدة.۔

  تكون علامة <thead> في الجزء العلوي من الجدول، وتحدد عناوين أو رؤوس الأعمدة.۔ هذا يساعد في تمييز أقسام البيانات بوضوح.۔

• تحدد علامة <tbody> قسم الجسم من الجدول.۔ تحتوي على صفوف البيانات.۔

  تحتوي علامة <tbody> على الجسم الرئيسي لبيانات الجدول.۔ تكون متموضعة بين الصفوف المحاطة بعلامتي <thead> و<tfoot>.۔

• تحدد علامة <tfoot> الجزء السفلي من الجدول، والذي يشمل الإجماليات أو الملاحظات.۔

  تكون علامة <tfoot> في نهاية الجدول وتستخدم لعرض الإجماليات أو الملاحظات الأخرى.۔ تكون مفيدة بشكل خاص عند تلخيص أو عرض الإجماليات لمجموعات البيانات الكبيرة.۔

علامات <caption> و <colgroup>

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• تضيف علامة <caption> عنوانًا (تسمية توضيحية) لجعل محتوى الجدول أكثر وضوحاً.۔ توضع عادة في الجزء العلوي من الجدول وتعمل على تلخيص المحتوى العام للجدول.۔

• تجمع علامة <colgroup> الأعمدة داخل الجدول وتُستخدم لتطبيق الأنماط أو التصميمات.۔ يمكنك تحديد ألوان خلفية أو عرض لأعمدة معينة بإضافة علامة <col>.۔

مثال على الجدول

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• تُستخدم العلامة <table> لإنشاء جدول يعرض البيانات في صفوف وأعمدة۔

• تُجمع العلامة <thead> صفوف الرأس في الجدول۔ تحتوي عادةً على علامات <th>، والتي تُستخدم كعناوين۔

• تُجمع العلامة <tbody> المحتوى الرئيسي للجدول۔ تحتوي عادةً على صفوف بيانات تتكون من علامات <td>۔

• تُجمع العلامة <tfoot> صفوف التذييل في الجدول۔ هي مناسبة لعرض الإجماليات أو الملاحظات۔

• تُجمع العلامة <colgroup> أعمدة الجدول وتُستخدم لتطبيق الأنماط عليها ككل۔

• تُضيف العلامة <caption> عنوانًا أو وصفًا للجدول، مما يسهل على المستخدمين فهم محتواه۔

• تسمح خاصية colspan للخلية بالامتداد عبر أعمدة متعددة.۔

• تسمح سمة rowspan للخلية بالامتداد عبر عدة صفوف.۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video