الرئيسية دورة تصميم المواقع html css تعلم لغة html: الجداول Tables

تعلم لغة html: الجداول Tables

تعلم لغة html: الجداول Tables

استعمال الجداول متعدد في الويب. وفي هذا الدرس سنرى طريقة انشاء الجداول وما يكونها من عناصر.


عمل جدول ب html


لانشاء جدول أول عنصر يتم وضعه هو <table>  ثم في النهاية  </table>.

  يبدأ السطر وينتهي <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>

النتيجة

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>


النتيجة

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>


النتيجة:

الإسم العائلي الإسم الشخصي
عربي زكاغ إبراهيم
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>

النتيجة

التاسعة العاشرة الحادية عشر الثانية عشر
الإثنين جغرافيا رياضيات معلوميات
الثلاثاء رياضة شعر


هنا قمنا بتمديد الخانات باستعمال 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>


نتيجة

التاريخ الدخل النفقات
1 فبراير 250 36
2 فبراير 285 48
31 فبراير 129 64
7824 1241




مواضيع مشابهة
On.

لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله