الدرس 14 – الجداول HTML

الدرس 14 – الجداول HTML

الجداول

التفاح	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>16</td>
</tr>
<tr>
<td>محمد</td>
<td>33</td>
</tr>
</table>

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

الاسم	العمر
زكرياء	16
محمد	33

• غرد تغريدة
• شاركه
• شاركه
• شاركه
• شاركه