استعمال الجداول متعدد في الويب. وفي هذا الدرس سنرى طريقة انشاء الجداول وما يكونها من عناصر.
لانشاء جدول أول عنصر يتم وضعه هو <table> ثم في النهاية </table>.
يبدأ السطر وينتهي <tr> ب </tr>.
وداخله المربعات أو الخانات تبدأ ب <td> وتنتهي ب </td>.
النتيجة
النتيجة
بمساعدة css يمكن التحكم في الحدود والألوان وخيارات أخرى بالنسبة للجداول
يساعد في اظهار عنوان خاص بمربع أو سطر من الجدول:
تبدأ خانة العنوان ب <th> وتنتهي ب </th>.
ثم نضيف عنصرين:
scope="col" : عنوان الخانة
scope="row": عنوان السطر
كود
النتيجة:
لتمديد اي مربع أو مربع يكفي اضافة قاعدة أو خاصية Colspan
النتيجة
هنا قمنا بتمديد الخانات باستعمال Colspan ، لتمديد سطر يتم اضافة خاصية rowspan
Thead العناصر الفوقية
Tbody محتوى الجدول
Tfoot الجزء السفلي من الجدول
نتيجة
عمل جدول ب html
يبدأ السطر وينتهي <tr> ب </tr>.
وداخله المربعات أو الخانات تبدأ ب <td> وتنتهي ب </td>.
<table>
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr>
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr>
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>
النتيجة
| 15 | 15 | 30 |
| 45 | 60 | 45 |
| 60 | 90 | 90 |
الحد Border
يمكن اضافة الحد لعناصر الجدول باضافة خاصية Border<table border="1px">
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr>
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr>
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>
النتيجة
| 15 | 15 | 30 |
| 45 | 60 | 45 |
| 60 | 90 | 90 |
بمساعدة css يمكن التحكم في الحدود والألوان وخيارات أخرى بالنسبة للجداول
رأس سطر أو مربع th
يساعد في اظهار عنوان خاص بمربع أو سطر من الجدول:تبدأ خانة العنوان ب <th> وتنتهي ب </th>.
ثم نضيف عنصرين:
scope="col" : عنوان الخانة
scope="row": عنوان السطر
كود
<table>
<tr>
<th scope="col">الإسم العائلي</th>
<th scope="col">الإسم الشخصي</th>
</tr>
<tr>
<th scope="row">عربي</th>
<td>زكاغ</td>
<td>إبراهيم</td>
</tr>
<tr>
<th scope="row">English</th>
<td>Zouggagh</td>
<td>Brahim</td>
</tr>
</table>
<tr>
<th scope="col">الإسم العائلي</th>
<th scope="col">الإسم الشخصي</th>
</tr>
<tr>
<th scope="row">عربي</th>
<td>زكاغ</td>
<td>إبراهيم</td>
</tr>
<tr>
<th scope="row">English</th>
<td>Zouggagh</td>
<td>Brahim</td>
</tr>
</table>
النتيجة:
| الإسم العائلي | الإسم الشخصي | |
|---|---|---|
| عربي | زكاغ | إبراهيم |
| English | Zouggagh | Brahim |
التمديد Collapsing
لتمديد اي مربع أو مربع يكفي اضافة قاعدة أو خاصية Colspan<table border="1px">
<tr>
<th></th>
<th>التاسعة</th>
<th>العاشرة</th>
<th>الحادية عشر</th>
<th>الثانية عشر</th>
</tr>
<tr>
<th>الإثنين</th>
<td colspan="2">جغرافيا</td>
<td>رياضيات</td>
<td>معلوميات</td>
</tr>
<tr>
<th>الثلاثاء</th>
<td colspan="3">رياضة</td>
<td>شعر</td>
</tr>
</table>
<tr>
<th></th>
<th>التاسعة</th>
<th>العاشرة</th>
<th>الحادية عشر</th>
<th>الثانية عشر</th>
</tr>
<tr>
<th>الإثنين</th>
<td colspan="2">جغرافيا</td>
<td>رياضيات</td>
<td>معلوميات</td>
</tr>
<tr>
<th>الثلاثاء</th>
<td colspan="3">رياضة</td>
<td>شعر</td>
</tr>
</table>
النتيجة
| التاسعة | العاشرة | الحادية عشر | الثانية عشر | |
|---|---|---|---|---|
| الإثنين | جغرافيا | رياضيات | معلوميات | |
| الثلاثاء | رياضة | شعر | ||
هنا قمنا بتمديد الخانات باستعمال Colspan ، لتمديد سطر يتم اضافة خاصية rowspan
الجداول الطويلة Long Tables
يتم استعمال عناصر أخرى للتحكم في الجداول الطويلة وهي:Thead العناصر الفوقية
Tbody محتوى الجدول
Tfoot الجزء السفلي من الجدول
<table border="1px">
<thead>
<tr>
<th>التاريخ</th>
<th>الدخل</th>
<th>النفقات</th>
</tr>
</thead>
<tbody>
<tr>
<th>1 فبراير</th>
<td>250</td>
<td>36</td>
</tr>
<tr>
<th>2 فبراير</th>
<td>285</td>
<td>48</td>
</tr>
<tr>
<th>31 فبراير</th>
<td>129</td>
<td>64</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>7824</td>
<td>1241</td>
</tr>
</tfoot>
</table>
<thead>
<tr>
<th>التاريخ</th>
<th>الدخل</th>
<th>النفقات</th>
</tr>
</thead>
<tbody>
<tr>
<th>1 فبراير</th>
<td>250</td>
<td>36</td>
</tr>
<tr>
<th>2 فبراير</th>
<td>285</td>
<td>48</td>
</tr>
<tr>
<th>31 فبراير</th>
<td>129</td>
<td>64</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>7824</td>
<td>1241</td>
</tr>
</tfoot>
</table>
نتيجة
| التاريخ | الدخل | النفقات |
|---|---|---|
| 1 فبراير | 250 | 36 |
| 2 فبراير | 285 | 48 |
| 31 فبراير | 129 | 64 |
| 7824 | 1241 |