[ الدرس الخآمس الجداول -الجزء الاول] ---- لغة html

..Ł7αŋ} · منذ /07-26-2010, 11:56 PM

السلام عليكم ورحمة الله وبركاته

وأهلا بكم في الدرس الخامس

وفيه نتعلم : الجداول (1)

ما أهمية الجدول في تصميم المواقع؟

في الحقيقة الجداول لها أهمية كبرى في تنظيم الموقع وتعد من أهم الأدوات التي تتضمنها لغة html ،كما أن استخدامها لا يقتصر
على قوائم اليبانات التي تحتاج لتنظيم في صفوف وأعمدة بل يتعدى ذلك إلى نتظيم الصفحات كلها
والتحكم بمظهرها وأداؤها،حاليا هناك طريقة أفضل للتحكم بالصفحات (scc) ولكن هذا لا يعنينا هنا.

نبدأ مع الوسوم الأساسية للجداول:

وسم تعريف الجداول:

كود بلغة HTML:

<TABLE>...< /TABLE>

وسم تعريف الصف في الجدول: (وتضاف بعدد الصفوف المراد وضعها في الجدول)

كود بلغة HTML:

<TR>...< /TR>

وسم تعريف بيانات الخلايا في كل صف:

كود بلغة HTML:

<TD> Data< /TD>

****

الآن مثلا أريد أن أطبق جدول مكون من 4 صفوف و2 عمود

كود بلغة HTML:

   <TABLE> 

   <TR>
<TD> الشوامخ </TD> 
<TD> الشوامخ </TD> 
</TR> 
<TR> 
<TD> الشوامخ </TD> 
<TD> الشوامخ </TD> 
</TR> 
<TR> 
<TD>الشوامخ </TD> 
<TD>الشوامخ </TD> 
</TR> 
<TR> 
<TD> الشوامخ </TD> 
<TD>الشوامخ </TD> 
</TR> 
</TABLE>

حيث ستظهر لنا بهذا التراص:

وكلمة "الشوامخ" هنا حيث سنضع الــ Data.

وقبل أن نتعلم وسوم الخصائص للجداول لابد أن نعرف أن عمل الجداول يتم عبر 3 مستويات:

1_مستوى الجدول ككل.
2_ مستوى الصفوف ككل أو كل واحد على حده.
3_مستوى الخلايا ككل أو كل واحدة على حده.
ولكل من هذه المستويات خصائص ينفرد بها ،كما أن لهم خصائص مشتركة تعمل مع كل الوسوم.

..Ł7αŋ} · منذ /07-26-2010, 11:56 PM

نبدأ على بركة الله بخصائص الوسوم:

(1) الوسم <TABLE> ... </TABLE> وخصائصه :

BORDER : تقوم هذه الخاصية بإضافة حدود الجدول وتحديد سمكها والقيمة الافتراضية لها هي 0 وتعنى "لاحدود".

مثال:

كود بلغة HTML:

 <TABLE BORDER"??">

ونضع مكان ؟؟ القيمة التي نرغب بها ..

----{

}----

WIDTH : وتقوم بتحديد العرض وهناك طريقتين لاستخدامها:

1 - العرض المطلق أي كتابة الرقم الذي يمثل عرض الصورة كاملة.

كود بلغة HTML:

<TABLE WIDTH="??">

2 - العرض النسبي أي كتابة رقم نسبي يحدد عرض الجدول حسب نافذة المتصفح:

ونضع مكان ؟؟ القيمة التي نرغب بها ..

كود بلغة HTML:

  <TABLE WIDTH="??%">

----{

}----

HEIGHT: لتحديد الارتفاع وله نفس طريقتي العرض" مطلق ونسبي":

العرض المطلق:

كود بلغة HTML:

<TABLE HEIGHT="??">

العرض النسبي:

كود بلغة HTML:

  <TABLE HEIGHT="??%">

----{

}----

CELLSPACING :لتحديد المسافة بين الخلايا.

كود بلغة HTML:

  <TABLE CELLSPACING="??">

----{

}----

CELLPADDING : لتحديد المسافة الفاصلة بين الحدود وبداية النص:

كود بلغة HTML:

  <TABLE CELLPADDING="??">

----{

}----

ALIGN : لتحديد محاذاة الجدول أفقيا للصفحة ويأخذ القيم left و right

كود بلغة HTML:

<TABLE ALIGN="Left">

كود بلغة HTML:

  <TABLE ALIGN="Right">

----{

}----

BGCOLOR : لتحديد لون الخلفية :

كود بلغة HTML:

  <TABLE BGCOLOR="???">

؟؟؟؟= اختاري لون مما تعلمناه

----{

}----

تطبيق الخصائص:

1_ لعمل جدول مكون من 4 صفوف و2 عمود، سُمكه (10) والمسافة بين خلاياه (10) وتكون المسافة الفاصلة بين الحدود وبداية النص (10)

كود بلغة HTML:

      <TABLE>
<TABLEBORDER="10" CELLPADDING="10" CELLSPACING="10">
<TR>
<TD>1 الشوامخ </TD>
<TD>2 الشوامخ </TD>
</TR>

<TR>
<TD>1 الشوامخ </TD>
<TD>2 الشوامخ </TD>
</TR>

<TR>
<TD>1 الشوامخ </TD>
<TD>2 الشوامخ </TD>
</TR>

<TR>
<TD>1 الشوامخ </TD>
<TD>2 الشوامخ </TD>
</TR>
</TABLE>

2- لعمل جدول السمكه (5) المسافة بين خلاياه (5) المسافة بين حدود النص (10) ولونه فضي:

كود بلغة HTML:

 <TABLEBORDER="5" CELLPADDING="5" CELLSPACING="10"BGCOLOR="silver"> 
<br>
<TABLEBORDER="5" CELLPADDING="5" CELLSPACING="10"BGCOLOR="silver" HEIGHT="300">
<TR>
<TD>1 الشوامخ </TD>
<TD>2 الشوامخ </TD>
</TR>

<TR>
<TD>1 الشوامخ </TD>
<TD>2 الشوامخ </TD>
</TR>

<TR>
<TD>1 الشوامخ </TD>
<TD>2 الشوامخ </TD>
</TR>

<TR>
<TD>1 الشوامخ </TD>
<TD>2 الشوامخ </TD>
</TR>
</TABLE>

3_لعمل جدول ملون سمكه (5) المسافة الفاصلة بين خلاياه (5) المسافة الفاصلة بين حدوده وبداية النصوص (10) ارتفاعه المطلق (300) وعرضه النسبي (75%) :

كود بلغة HTML:

 <TABLEBORDER="5" CELLPADDING="5" CELLSPACING="10"BGCOLOR="#00cccc" HEIGHT="300" WIDTH="75%">
<TR>
<TD>1 الشوامخ </TD>
<TD>2 الشوامخ </TD>
</TR>

<TR>
<TD>1 الشوامخ </TD>
<TD>2 الشوامخ </TD>
</TR>

<TR>
<TD>1 الشوامخ </TD>
<TD>2 الشوامخ </TD>
</TR>

<TR>
<TD>1 الشوامخ </TD>
<TD>2 الشوامخ </TD>
</TR>
</TABLE>

مثال لجدول بسيط بالقياس النسبي :

كود بلغة HTML:

<tablewidth="100%" height="100%" border="4">

   <tr>
 <tdwidth="80%" height="20%">التعريف
 <tdwidth="80%" height="20%">العنوان
 </tr>
 <tr>
 <tdwidth="80%" height="20%">التعريف
 <tdwidth="80%" height="20%">العنوان
 </tr>
 <tr>
 <tdwidth="80%" height="20%">التعريف
 <tdwidth="80%" height="20%">العنوان
 </tr>
 <tr>
 <tdwidth="80%" height="20%">التعريف
 <tdwidth="80%" height="20%">العنوان
 </tr>
 <tr>
 <tdwidth="80%" height="20%">التعريف
 <tdwidth="80%" height="20%">العنوان
 </tr>
 </table>

..Ł7αŋ} · منذ /07-26-2010, 11:57 PM

نُكمل :

(2) - خصائص الوسم <TR> ... </TR>

الذي يحدد عدد الصفوف في الجدول كما تعلمنا في بداية الدرس ويكتب داخل الوسم

<TABLE> ... </TABLE> .

ولنبدأ بسرد الخصائص وتعريفها:

ALIGN :

لتحديد محاذاة النص أفقيا داخل الخلايا التي يتكون منها الصف، أما قيمه فهي:

(Right, Left, Center) والقيمة الافتراضية هي Center:

كود بلغة HTML:

    <TR ALIGN="??">

؟؟= اختاري قيمة معينة.

----{

}----

VALIGN : لتحديد محاذاة النص عموديا داخل خلايا الصفوف إما للأعلى أو الأسفل أو المنتصف أو على امتداد الخط الأساسي للخلية وقيمه:
(Baseline ,Top, Bottom, Middle):

كود بلغة HTML:

  <TR VALIGN="??">

؟؟= اختاري القيمة .

----{

}----

BGCOLOR:لتحديد لون خلفية النص التي يتكون منها الصف دون مراعاة للون الجدول الذي حددناه في الدرس السابق:

كود بلغة HTML:

  <TR BGCOLOR??">

اختاري اللون المناسب من سلسلة الألوان التي تعرفنا عليها سابقا.
مثال لتطبيقات خصائص <TR> مجتمعة :

كود بلغة HTML:

<TRALIGN="center" VALIGN="Middle" BGCOLOR="#FFFFCC">

وهنا نضع تطبيقات خصائص<TR> داخل تطبيق جدول:

كود بلغة HTML:

<tablewidth="100%" height="100%" border="4">
 <TRALIGN="center" VALIGN="Middle" BGCOLOR="#FFFFCC">
     <tdwidth="80%" height="20%">التعريف
 <tdwidth="80%" height="20%">العنوان
 </tr>
 <tr>
 <tdwidth="80%" height="20%">التعريف
 <tdwidth="80%" height="20%">العنوان
 </tr>
 <TRALIGN="center" VALIGN="Middle" BGCOLOR="#FF00FF">
 <tdwidth="80%" height="20%">التعريف
 <tdwidth="80%" height="20%">العنوان
 </tr>
 <tr>
 <tdwidth="80%" height="20%">التعريف
 <tdwidth="80%" height="20%">العنوان
 </tr>
 <TRALIGN="center" VALIGN="Middle" BGCOLOR="#FFFFCC">
 <tdwidth="80%" height="20%">التعريف
 <tdwidth="80%" height="20%">العنوان
 </tr> 
 </table>

انتهى الدرس الخامس بحمد الله

----{

}----

وهذا تطبيق للدروس مجتمعة حتى درسنا هذا:

كود بلغة HTML:

    <html>
<head>
<title> منتديات الشوامخ الاسلامية </title>
</head>
 <nbsp;&><nbsp;&><nbsp;&>
 <bodybgcolor="#FFCC99"><bodybackground="DigitalArt-38.jpg"><nbsp;&><nbsp;&>
 <br><br><br>
 <IMGSRC="allahsalam.gif" BORDER="0" align="middle" HEIGHT="200" WIDTH="200"><nbsp;&><nbsp;&> 



       <p><center><b><i>
 <FONTFACE="Impact" SIZE="6" COLOR="#000000">الـ</FONT>
 <FONTFACE="Impact" SIZE="6" COLOR="#008080">شـ</FONT>
 <FONTFACE="Impact" SIZE="6" COLOR="#FF0000">و</FONT>
 <FONTFACE="Impact" SIZE="6" COLOR="#0000FF">ا</FONT>
 <FONTFACE="Impact" SIZE="6" COLOR="#800000">مـ</FONT>
 <FONTFACE="Impact" SIZE="6" COLOR="#FF00FF">خ</FONT>
 <br><br><br><br><br><br>
 <p><center><b><i><fontsize="4">قال صلى الله عليه وسلم<pr>
 ليس الشديد بالصرعة،إنما الشديد من يملك نفسه عند الغضب
 <BLOCKQUOTE>متفق عليه</BLOCKQUOTE></font></b></i></center>
 </i></b></center></p> 
 <br><br><br><br> 
 <TABLEALIGN="Right">
 <TABLEBORDER="10" CELLPADDING="10" CELLSPACING="2"
 TABLEBGCOLOR="#FFFFCC"
 HEIGHT="75%" WIDTH="100%">
 <TRALIGN="center" VALIGN="Middle" >
 <TRBGCOLOR="#FFFFCC">
 <TD>1 الشوامخ </TD>
 <TD>2 الشوامخ </TD>
 </TR>
 <TRALIGN="center" VALIGN="Middle" >
 <TRBGCOLOR="#FFFFCC">
 <TD>1 الشوامخ </TD>
 <TD>2 الشوامخ </TD>
 </TR>
 <TRALIGN="center" VALIGN="Middle" >
 <TRBGCOLOR="#FFFFCC">
 <TD>1 الشوامخ </TD>
 <TD>2 الشوامخ </TD>
 </TR>
 <TRALIGN="center" VALIGN="Middle" >
 <TRBGCOLOR="#FFFFCC">
 <TD>1 الشوامخ </TD>
 <TD>2 الشوامخ </TD>
 </TR>
 </TABLE> 
 <IMGSRC="6909alsh3er.gif" BORDER="0" align="raight" HEIGHT="400" WIDTH="400"> 
 </bady></html>

روح الأمل · منذ /07-27-2010, 04:48 AM

وعليكم السلام ورحمه الله وبركاته
ماشاءالله تبارك الله
الله يحفظك ياالغلا

شكله رهيب
بس يباله ترركيز
يارب الهمنا الزكاازة ><

جزاك الله خير

تسجيل حضور

..Ł7αŋ} · منذ /07-29-2010, 09:10 AM

ياهلا وغلا

ويحفظك ربي ويرعاك يالغلا

هو صح شوي طويل بس ان شاء الله يركز مع التكرار والتركيز

يسلملي هـ التفاعل

ابتسامه عذبه · منذ /08-02-2010, 08:11 PM

ربي يسعدك لحون

بس شوي شوي

أحس ضيعت وش ذا؟؟؟

يارب يسر

جزيتي خيرا’’

تسجيل حضور

..Ł7αŋ} · منذ /08-04-2010, 07:53 AM

ويسعدك بسومه

معاك حق تضيعين ,الشغله يبغاله تركيز

لاعدمتك تواجدك المشرق

شـ شموخي ـوفوا! · منذ /08-07-2010, 09:20 PM

شو مال طالباتي النجيبات ..
بدأ الملل يتسلل إلى نفوسهم وحنا خلاص بقى لنا درس وحيد فقط

سوف لن أسمح بالـ وش اسمه ذا ..

أنتظركم ترجعون تقرؤون الدرس من جديد ( تم تنسيقه بشكل يسهّل على الجميع )
وبإذن الله راح يسهل عليكم ..

صدقوني تراه جداً ممتع ..

أنتم انسخوا الأكواد وشوفوا النتيجة .. وإبدؤوا غيروا بالقِيم على مزاجكم ،،
جد شيء حلو ~

لحونتي .. يعطيك العافية يا الغلا .. ما قصرتِ ..

روح الأمل و ابتسامة عذبة ..
تواجدكم يسعدني .. الله يوفقكم ويسعدكم ويسهّل أموركم يا رب ..

أنا جاهزة لأي استفسار يا عسولات ..
شوية تركيز + عزيمة وصبر = تعلّم سريع وممتع ~

أيضاً .. بانتظار البقية الباقية .. =)

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

الإهداءات