AA

1. ‫الجداول‬
‫على‬ ‫قادرا‬ ‫ستكون‬ ‫الوحدة‬ ‫هذه‬ ‫دراسة‬ ‫من‬ ‫االنتهاء‬ ‫عند‬
:
•
‫أوسمة‬ ‫باستخدام‬ ‫جدول‬ ‫بناء‬
‫الـ‬
HTML
.
•
‫صحيح‬ ‫بشكل‬ ‫الجدول‬ ‫خصائص‬ ‫استخدام‬
.
•
‫الجدول‬ ‫في‬ ‫الخاليا‬ ‫دمج‬
.
•
‫الصفحة‬ ‫في‬ ‫المحتوى‬ ‫لتوزيع‬ ‫الجدول‬ ‫استخدام‬
.

2. ‫ـ‬‫ل‬‫ا‬‫صفحات‬‫في‬‫الجداول‬‫اهمية‬
HTML

‫ال‬‫وهذه‬ ،‫خاليا‬‫تسمى‬‫تقاطع‬ ‫نقاط‬‫تشكل‬‫سية‬‫ا‬‫ر‬‫عمدة‬‫ا‬‫مع‬‫فقية‬‫ا‬‫صفوف‬‫عن‬‫عبارة‬‫والجداول‬
‫ن‬‫ا‬ ‫يمكن‬‫خاليا‬
‫خرى‬‫ا‬‫جداول‬‫حتى‬‫و‬‫ا‬‫ر‬‫صو‬‫و‬‫ا‬‫نصية‬ ‫بيانات‬‫على‬‫تحتوي‬
.

‫عمدة‬‫وا‬‫صفوف‬‫شكل‬‫على‬ ‫البيانات‬‫لعرض‬‫الجداول‬‫تستخدم‬
.
‫كذلك‬‫وتستخدم‬
‫في‬‫للتحكم‬
‫العام‬‫التخطيط‬
‫الويب‬‫لصفحة‬
‫العناصر‬‫بعض‬‫ر‬‫ظهو‬ ‫ماكن‬‫ا‬‫في‬ ‫والتحكم‬،
–
‫ر‬‫والصو‬‫النصوص‬‫مثل‬
–
‫ال‬‫داخل‬
‫صفحة‬
.

3. ‫الجداول‬‫نشاء‬‫ا‬

‫البداية‬‫وسم‬‫استخدام‬‫يتم‬
<table>
‫النهاية‬‫سم‬‫و‬‫و‬‫الجدول‬‫بداية‬‫لتحديد‬
</table>
‫الجدول‬‫لنهاية‬
.

‫التالي‬‫النحو‬‫على‬‫والخاليا‬‫الصفوف‬ ‫تضاف‬‫الوسمين‬‫هذين‬‫وبين‬
:
◦
‫الوسم‬
<tr>
‫صف‬‫النشاء‬‫يستخدم‬
.
‫الجدول‬‫صفوف‬ ‫عدد‬‫حسب‬‫اره‬‫ر‬‫تك‬‫ويتم‬
.
◦
‫الوسم‬
<td>
‫الصف‬‫داخل‬‫خلية‬‫النشاء‬‫يستخدم‬
.
‫الصف‬‫في‬‫الخاليا‬ ‫عدد‬‫حسب‬‫اره‬‫ر‬‫تك‬‫ويتم‬
.

‫الجدول‬‫محتويات‬
(
،‫ر‬‫صو‬،‫نص‬
...
‫الخ‬
)
‫الخلية‬‫وسمي‬‫بين‬ ‫اال‬‫تب‬‫تك‬‫ال‬
<td>‫المحتوى‬‫تب‬‫يك‬‫<هنا‬/td>

4. ‫جدول‬‫على‬‫مثال‬
<table border=“1”>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

5. ‫الجدول‬‫وسمة‬‫ا‬‫خصائص‬

‫التالي‬ ‫النحو‬‫على‬‫لها‬ ‫خصائص‬‫ضافة‬‫با‬‫الجدول‬‫وسمة‬‫ا‬ ‫تنسيق‬‫يمكن‬
:
.1
‫الوسم‬ ‫خصائص‬
<table>
◦
‫مثال‬
:
<table border=“1” cellspacing=“2” cellpadding=“2” align=“center” width=“200” height=“200”>
◦
border=“1”
‫الجدول‬ ‫حدود‬‫ظهار‬‫ل‬
◦
cellspacing=“2”
‫الخاليا‬‫بين‬ ‫الفاصلة‬ ‫المسافة‬ ‫لتحديد‬
◦
cellpadding=“2”
‫خلية‬‫كل‬ ‫في‬‫الداخلي‬‫الهامش‬ ‫لتحديد‬
◦
align=“center”
‫الصفحة‬‫في‬‫الجدول‬‫لمحاذاة‬
◦
width=“200”
‫العرض‬‫لتحديد‬
◦
height=“200”
‫تفاع‬‫ر‬‫ال‬‫لتحديد‬

6. ‫الجدول‬‫وسمة‬‫ا‬‫خصائص‬
.1
‫الوسم‬ ‫خصائص‬
<tr>
◦
align=“center”
‫فقية‬‫ا‬‫محاذاة‬
◦
valign=“top”
‫عمودية‬‫محاذاة‬
◦
height=“300”
‫تفاع‬‫ر‬‫ال‬‫لتحديد‬
.2
‫الوسم‬ ‫خصائص‬
<td>
◦
align=“top”
‫فقية‬‫ا‬‫محاذاة‬
◦
valign=“top”
‫عمودية‬‫محاذاة‬
◦
colspan=“2”
‫العدد‬ ‫حسب‬ ‫فقيا‬‫ا‬‫الخاليا‬‫لدمج‬
.
◦
rowspan=“2”
‫العدد‬‫حسب‬‫عموديا‬‫الخاليا‬‫لدمج‬
.
◦
width=“200”
‫العرض‬‫لتحديد‬
◦
height=“300”
‫تفاع‬‫ر‬‫ال‬‫لتحديد‬
.