تگ < table > :
اين تگ برای ايجاد جدول ها در صفحه استفاده می شود . به طور کلی جدول ها به 2 منظور ايجاد می شوند : ايجاد يک جدول معمولی با تعدادی خانه ، برای نمايش مطالب مورد نظر در سطرها و ستون های جدا از هم . تقسيم فضای صفحه با استفاده از چهارچوب جدول ها برای منظم چيدن محتويات صفحه .
به طور مثال مطالب اين صفحه در تعدادی خانه جدول مرتب شده است . در اين حالت می توان با عدم تعيين حاشيه ( border ) برای خانه های جدول ، از چهارچوب جدول ها استفاده کرد در حالی که آنها عملا از ديد کاربر مخفی هستند . جدول ها برای هر منظوری به کار روند ، بايد با استفاده از تگ < table > ايجاد شوند . هر جدول مجموعه ای از سطرها و ستون هاست . برای ايجاد يک سطر جديد از يک تگ < tr > استفاده می شود که هر خانه ( ستون ) درون سطر هم توسط يک تگ < td > مشخص می شود .
الگوريتم طراحی جدول : در طراحی جدول بايد به نکات زير دقت کرد : در هنگام ايجاد يک سطر یا استفاده از تگ < tr > ، قبل از ايجاد سطر جديد حتما بايد تگ < tr > قبلی بسته شود و در هر سطر نيز بايد در صورت ايجاد هر خانه با تگ < td > قبل از ايجاد يک خانه جديد بايد تگ < td > قبلی بسته شود .
درون تگ < table > فقط می توان تگ < tr > و درون تگ < tr > نيز فقط می توان از تگ < td > استفاده کرد . خانه هاو سطرهای يک جدول منظم و مرتب هستند . به عبارت ديگر به طور مثال نمی توان در يک سطر جدول 3 خانه و در سطر پايينی آن 2 خانه با پهناهای متفاوت ايجاد کرد . در چنين مواردی بايد با استفاده از خاصيت colspan در تگ < td > سطر با خانه کمتر و استفاده از تکنيک جدول های تو در تو اين مسئله را بر طرف کرد .
| مثال | |||||||||||||
|
< table cellpadding ="5" cellspacing ="0" style ="border
:solid 2px blue; width:100%" >
< tr > < td class ="header" colspan ="2" > Header < /td > < /tr > < tr > < td class ="body" > Body 1 < /td > < td class="body" > Body 2 < /td > < /tr > < tr > < td class ="body" colspan ="2" style ="padding :0" > < table cellpadding ="5" cellspacing="0" style ="width :100% " > < tr > < td style ="border :solid 1px green " > C1 < /td > < td style ="border :solid 1px green " > C2 < /td > < td style ="border :solid 1px green " > C3 < /td > < /tr > < tr > < td style ="border :solid 1px green " > C4 < /td > < td style ="border :solid 1px green " > C5 < /td > < td style ="border :solid 1px green " > C6 < /td > < /tr > < /table > < /td > < /tr > < /table > |
کد | ||||||||||||
|
خروجی | ||||||||||||
|
1) سطر دوم جدول بيرونی دارای يک خانه و سطر دوم دارای دو خانه است . نتظيم خاصيت colspan
= 2 در سطر اول باعث می شود تا بين سطر اول و دوم هماهنگی ايجاد شده و تک خانه سطر
اول کش آمده و دو خانه سطر دوم را پوشش بدهد . 2) نوشتن متن فقط درون تگ باز و بسته td مجاز است . 3) سطر سوم ( سومين تگ tr ) محدوده جدول درونی را مشخص می کند ، که بخش کدهای سبز را شامل می شود . 4) به جدول هم می توان در بخش style و هم در داخل تگ table ، حاشيه border داد . حاشيه ای که در قسمت style تعيين شود فقط باعث نمايش خطوط دور جدول می شود و خطوط درونی را شامل نمی شود . اما حاشيه تعيين شده در تگ table باعث نمايش خطوط بيرونی و درونی جدول می شود . همچنين می توان به هر td به صورت مجزا حاشيه اختصاص داد . |
توضيحات | ||||||||||||