إنشاء الجداول في HTML

الدرس الخامس:إنشاء الجداول

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

يعتمد إنشاء الجداول فيHTMLعلي التحكم في الصفوف وليس الأعمده , أي أنه يقوم تعبئه صف صف وليس عمود عمود كيف ذلك؟؟؟

الوسوم الرئيسيه الخاصه بالجداول

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

 

لإنشاء جدول		<Table>/>    Table>
لإنشاء صف جديد	Table row	>tr<          >/tr<
لتعريف الخلايا في كل صف	Table data	>tr<          >/td<

         

وتكون الصيغه العامه لإنشاء أي جدول هي:-

>table<

      >tr<   >td<  write here >/td< /> tr< >/table<

مثال5 إكتب الكود الخاص بالجدول التالي:-

Z	Y	X
12	11	A
14	13	B
16	15	C

 

>table<                            !>…….لانشاء الجدول <

>tr<                                  !>……لبدء الصف الأول   <

>td<  X  >/td<                  >!.......لوضع محتويات اول خليه بالصف الأول  <

>td<   Y  />td<                 >!......لوضع محتويات ثاني خليه بالصف الأول <

>td<    Z  />td<                >!.......لوضع محتويات ثالث خليه بالصف الأول <

>/tr<                                 >!......لإغلاق الصف الأول <

>tr<                                   >!......لبدء الصف الثاني <

>td<     A   >/td<              >!.......لوضع محتويات اول خليه بالصف الثاني <

>td<      11   >/td<            >!.......لوضع محتويات ثاني خليه بالصف الثاني <

>td<       12    >/td<           >!......لوضع محتويات ثالث خليه بالصف الثاني <

/>tr<                                 >!.....لإغلاق الصف الثاني                                    <

>tr<                                   >!......لبدء الصف الثالث                                <

>td<       B   />td<             >!......لوضع محتويات اول خليه بالصف الثالث <                             

<td<       13  >/td<             >!.....لوضع محتويات ثاني خليه بالصف الثالث <

>td<        14  >/td<            >!.....لوضع محتويات ثالث خليه بالصف الثالث  <

 />tr<                                  > !.......لإغلاق الصف الثالث  <

>/tr<                                   >!........لبدء الصف الرابع   <

>td<     C  >/td<                 >!.......لوضع محتويات اول خليه بالصف الرابع <

>td<      15  >/td<              >!.......لوضع محتويات ثاني خليه بالصف الرابع <

 >td<      16   >/td<             >!......لوضع محتويات ثالث خليه بالصف الرابع <

>/tr<                                   !>……لإغلاق الصف الرابع <

>/table<                              !>……لإغلاق الجدول  <

 

 

هل من الممكن التخلي عن < td  />  جرب بنفسك وشاهد النتيجه .

الخصائص المستخدمه مع الجداول:-

 

 

>table border = " 4 "<	لتحديد سمك حدود الجدول والقيمه الإتاضيه لها صفر (أي لا حدود للجدول)	Border
>table width = " 450"< >table width = "50%">	لتحديد عرض الجدول إما بكتابه العرض مباشره                                       بالبكسيل او بطريقه النسبه المئويه حيث تحسب نسبه الجدول إلي نسبه عرض صفحه المتصفح	width
>table height = "600"< >table height = "80%"<	لتحديد ارتفاع الجدول بنفس طريقه وشروط عرض الجدول	height
>table cellspacing ="8"<	لوضع مسافات فاصله بين كل خليه من خلايا , وتكون ارقام المسافات تلك صغيره	cellspacing
>table align = " right"< >table align = " left"< >table align = " center"<	لمحاذاه الجدول في الصفحه يمينا او يسارا او في منتصفها	Align
>table bgcolor = "#ff0000"<	لتحديد لون خلفية الجدول	bgcolor

 

 

 

الخصائص المستخدمه مع الصفوف  < tr > :-

وتضم خاصيه align للمحاذاه بأنواعها , وحاصيه bgcolor حيث تعطي خلفيه للصف بغض النظر عن خلفيه الجدول.

الخصائص المستخدمه مع الخلايا <td  >:-

	لتحديد عرض الخليه	Width
	لتحديد ارتفاع الخليه	height
	لتحديد لون خلفيه الخليه	bgcolor
>td colspan = " 3" <	لدمج اكثر من خليه افقيا	Colspan
>td rowspan = "3 " <	لدمج اكثر من خليه راسيا	rowspan

 

يتبقي ان تعرف في موضوع الجداول عنصرين:-

لتحديد عنوان للجدول ويكون اعلي الجدول (في السطر الذي يسبق الجدول)	Caption
وهي إختصار Table   Header ,وهي لوصف خلايا راس الجدول حبث تكون سميكه وفي منتصف الخليه	Th

 

مثال 6

إكتب الكود الخاص بإنشاء الجدول التالي :-

عنوان الجدول

TH: table Header	الحروف هنا سميكه	الحروف هنا سميكه	هنا راس الجدول
تلك الخليه اكثر طولا لأنها تأخذ حيز خليتين	نص عادي في خليه عاديه	تلك الخليه عريضه أكثر لأنها تأخذ حيز خليتين
	هذا النص في اسفل يمين الخليه	نص عادي في خليه عادي	نص عادي في خليه عاديه

 

كود صفحه HTML الخاص بإنشاء ذلك الجدول :-

 

>table border = " 1 " cellpadding= "5 " cellspacing= " 5"<

> caption align = " top " < عنوان الجدول >/caption<

>tr<

>th bgcolor = "#ffffCC"< هنا راس الجدول >/th<

>th bgcolor = "#FFFFCC"< الحروف هنا سميكه >/th<

>th bgcolor = "#FFFFCC"< الحروف هنا سميكه >/th<

>th bgcolor = "#FFFFCC"< TH : Table Header >/th<

>/tr<

>tr<

>td colspan = "2" < تلك الخليه عريضه اكثر لانها تاخذ حيز خليتين  >/td<  

>td<  نص عادي في خليه عاديه >/td<

>td rowspan = "2" < تلك الخليه اكثر طولا لانها تاخذ حيز خليتين >/td<

>/tr<

>tr<

>td< نص عادي في خليه عاديه >/td<

>td< نص عادي في خليه عاديه >/td<

>td align= " right " valign = " bottom "<  هذا النص في اسفل يمين الخليه >/td<

>/tr<

>/table<