Header Ads

الجداول



التفاح44%
الموز38%
البرتقال13%




الجداول


يتم تعريف الجداول من خلال الوسم <table>

يقسم الجدول الى صفوف أفقية (باستخدام الوسم <tr>) وكل صف يحتوي على خلايا تحتوي بيانات (باستخدام الوسم <td>) . ترمز td الى table data أي بيانات الجدول التي تحمل محتوى البيانات في الخلية . يمكن أن تحتوي الخلية <td> على نصوص , روابط , صور , قوائم , نماذج وجداول أخرى .

مثال عن جدول

<table dir="rtl" border="1">
<tr>
<td>الصف 1 , الخلية 1</td>
<td> الصف 1 , الخلية 2</td>
</tr>
<tr>
<td> الصف 2 , الخلية 1</td>
<td> الصف 2 , الخلية 2</td>
</tr>
</table>

سيظهر الجدول في المتصفح كالتالي

الصف 1 , الخلية 1الصف 1 , الخلية 2
الصف 2 , الخلية 1الصف 2 , الخلية 2


ملاحظة : طالما نستخدم اللغة العربية فيمكن دائماً استخدام اللاحقة الاتجاه من اليمين لليسار dir="rtl" بلغة HTML أو من خلال الخاصية الاتجاه direction: rtl; بلغة CSS



الجدول واللاحقة الحدود


ان لم تحدد اللاحقة الحدود border سيظهر الجدول بدون حدود , في بعض الأحيان عدم التحديد يكون مفيد ولكن كن حذراً بأننا في أغلب الأحيان نريد أن نظهر حدود الجدول .
لعرض حدود الجدول فقط ضع اللاحقة border مع القيمة التي تريد بها سماكة الحدود

<table border="1">
<tr>
<td>الصف 1 , الخلية 1</td>
<td> الصف 1 , الخلية 2</td>
</tr>
</table>




رأس الجدول


يتم تحديد رأس الجدول أي عناوين الأعمدة من خلال الوسم <th> وجميع المتصفحات تظهر النص الموجود داخل الوسم <th> على شكل نص غامق ومحاذاته في الوسط .

<table border="1">
<tr>
<th>الاسم</th>
<th>العمر</th>
</tr>
<tr>
<td>محمد</td>
<td>13</td>
</tr>
<tr>
<td>سامر</td>
<td>33</td>
</tr>
</table>

سيظهر الكود السابق كالتالي :

الاسمالعمر
محمد13
سامر33


يتم التشغيل بواسطة Blogger.