دورة html الدرس 6 : الجداول ( الجزء الأول )

السلام عليكم ورحمة الله وبركاته
إن كيفية التعامل مع الجداول من أهم الأمور التي يجب فهمها تماماً في دورتنا HTML ( صراحةً هي دورة xhtml وهذا لصالحكم )
حيث لا تخلو صفحة انترنت في المواقع من الجداول و هي البنية الأساسية لتقسم الصفحة و إعطاء
منظر الصفحة و شكلها و سنقسم درس الجداول إلى درسين حتى لا نكثر على اخواننا المتابعين

بدايةً الوسوم tags الأساسية في التعامل مع الجداول هي ثلاثة :
table الجدول
tr الصف
td العمود
هذه هي الثلاثة الأساسية ويوجد غيرها سنذكره لاحقاً , كما يوجد خصائص لهذه الوسوم من أجل تحكم أكثر في الجدول
على كل حال سنبدأ بجدول بسيط :
يتم افتتاح الجدول و إنهاؤه بالوسم table
حيث يكون كالتالي :

كود HTML:

<table> 
هنا توضع الصفوف و الأعمدة
</table>

وبين هاتين الوسمتين توضع وسمات الصفوف و الأعمدة
حيث يعرف الصف بالوسم التالي

كود HTML:

<tr>
هنا تعرف الأعمدة
</tr>

ومن المهم جداً الانتباه إلى أن الأعمدة تعرف ضمن الصفوف دوماً
حيث تعرف الأعمدة بالوسم td

الآن سنقوم بإنشاء الجدول التالي:


الكود سيكون كما يلي

كود HTML:

القرآن الكريم
<table >

<tr>
<td>اسم السورة</td>
<td>رقم السورة</td>
</tr>

<tr>
<td>البقرة</td>
<td>1</td>
</tr>

<tr>
<td>آل عمران</td>
<td>2</td>
</tr>

</table>

(ربما لن تظهر حدود الجدول في صفحة الأكواد بشكل استثنائي )
لاحظ كيف بدأنا الجدول ثم وضعنا صف ووضعنا بداخله الأعمدة
ثم كررنا وضع صف ثاني ووضعنا بداخله الأعمدة
ملاحظة : 
لا يحوز أن يتغير عدد الأعمدة بين صف و آخر

مثال ثاني :

كود HTML:

<table border="1px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>

النتيجة ستكون كالتالي:

أحياناً يكون الصف الأول ( الذي يحتوي الأرقام من 1 إلى 4 في المثال السابق )
إحياناً تحوي خلاياه على عناوين لما تحته و ربما نرغب بتمييزها عن باقي الخلايا
ولهذا هناك طرق كثيرة ( أغلبها يعتمد على css سندرسه لاحقاً )
مثلاً يمكن جعله بلون غامق ولذلك نستعمل th بدلاً من td
انظر المثال التالي:

كود HTML:

<table border="1px">
<tr>
<th>الاسم</th>
<th>الدرجة</th>
</tr>
<tr>
<td>محمد</td>
<td>6</td>
</tr>
<tr>
<td>أحمد</td>
<td>8</td>
</tr>
</table>

النتيجة ستكون كالتالي :



لاحظ أن كلمتي الدرجة و الاسم بخط غامق لأننا وضعنا th بدلاً من td عندهما
مثــــــــــال آخر :

كود HTML:

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

نتيجة التنفيذ:

نأتي إلى خصائص الجدول:
استخدمت في الأعلى احدى الخصائص دون ذكرها
وهي الخاصة border
إنها تستعمل للتحكم بحدود الجدول حيث القيمة صفر 0 لإخفاء الحدود
و القيمة 1 لإظهار الحدود كما في الأمثلة السابقة
تكتب كما يلي :

كود HTML:

<table border="15px">

لاحظ أنها خاصية تابعة للوسم table لذلك تكتب داخله
وإليكم صور توضح الفرق عند تكبير الرقم المعبر عن الحدود

القـــــــــــــيمة 0 :

القـــــــــــــيمة 1 :

القـــــــــــــيمة 3 :

القـــــــــــــيمة 15 :

ملاحظة :
بالنسبة للخلايا الفارغة في الجدول يمكن كتابتها كما يلي :

كود HTML:

<td></td>

أو كما يلي :

كود HTML:

<td/>

............... يتبع في الدرس القادم
من يحب أن يجرب شيئاً ما ويضع الكود فهذا من دواعي سروري