HTML

HTML – الجداول

أھلاً وسھلاً بك إلى الدرس السابع من تعلم HTML .

مرحبا عزيزي المتابع تعتبر الجداول من اهم الوصول الخاصه في هذه اللغه اذ انها تقوم بتقسيم المعطيات والمعلومات بطريقه انيقه في صفحتنا كما تعد من اقوى الادوات التي تتضمنها اللغه فكل موقع يستخدم الجداول بصفه او اخرى

يعتبر التعامل مع الجداول واستعمالها في صفحات الموقع سهل جدا هي اداه اخرى لكن ينبغي عليك فهم جميع صفاتها وخصائصها لنبدا الشرح في درسنا المتعلق بالجداولللقيام بادراج اول جدول كيف ما كان عدد خانته سواء ان يتكون من خانه واحده او من الف خانه فالامر سيانلادراج جدول ما نقوم بكتابه الوسم التالي ويعني هذا الوسم بدايه ونهايه الجدول :

 <TABLE> ... </TABLE>

والان بعدما ادرجنا هذين الوسمين ينبغي علينا معرفه عدد الصفوف وعدد الخانات التي نرغب بانشائهاثاني خطوه بعد انشاء الجدول هي البدايه بانشاء الصفوف سنقوم الان بانشاء اول صف في الجدول الخاص بنا وهو على الشكل التالي

 <TR> ... </TR>

بنفس عدد الصفوف التي تریدھا. ولنفترض ھنا أنھا ثلاثة.

<TABLE>
<TR></TR>
<TR></TR>
<TR></TR>
</TABLE> 

الان الخطو التاليه هي انشاء عدد الخلايا او الخانات التي نرغب بها

 <TD> ... </TD>

ومن البديه ان يكون انشاء عدد الخانات بداخل انشاء صفوفو سوف نحصل على النتيجه التاليه

<TR> </TR>
طالما أن الخلایا ھي جزء من الصفوف. وھنا سأفترض أننا نرید خلیتین في كل صف،
وبذلك یجب تكرار كتابتھا مرتین لكل صف.

وأذكرك أن النص الذي نرید إدراجھ في الخلیة یكتب ضمن ھذین الوسمین

<TABLE>
<TR>
<TD> Data </TD>
<TD> Data </TD>
 </TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE> 

الان بامكانك عزيزي المتابع تكوين صوره اجماليه على الجداول وطريقه عملها سوف نمر في الخطوات المقبله لما هو مهم

Data Data
Data Data
Data Data

بعد انشاءنا للجدول وملاحظه النتيجه يمكننا ملاحظه ان الجدول ينقصه شيء ما

انك عزيز المتابع قد علمت ما ينقصنا في الجدول, نعم عزيزي المتابع انه الاطار.

لكن عزيزي المتابع قبل تفعيل خاصيه الاطار ينبغي عليك معرفه ثلاث مستويات للاطار وهم :

مستوى الجدول ككل –

مستوى الصف او الصفوف –

مستوى الخلايا او الخانات –

ولكل مستوى من المستويات الثلاث خصائص ينفرد بها اوقد تجتمع المستويات الثلاث في خصائص واحده

لنقم عزيزي المتابع الان بادراج المثال التالي سنقوم بانشاء اطار لجدول بصفه عامه سيكون سمكه خمس وحدات

 <TABLE BORDER="5">
Data Data
Data Data
Data Data
<TABLE BORDER="5" CELLPADDING="5">
Data Data
Data Data
Data Data
<TABLE BORDER="5" CELLPADDING="5"
 CELLSPACING="10">
Data Data
Data Data
Data Data
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10" BGCOLOR="#FFFF00">
Data Data
Data Data
Data Data
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10" BGCOLOR="#FFFF00" HEIGHT="300" WIDTH="75%">
Data Data
Data Data
Data Data

لنتكلم الان عزيزي المتابع عن الخصائص ممكن استخدامها مع الصفوف في الجداول <TR> … </TR> وهي كالتالي :

<TABLE BORDER="5" HEIGHT="300">
<TR ALIGN="Left">
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR ALIGN="Right">
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR ALIGN="Center">
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE> 
Data Data
Data Data
Data Data