موضوع

تگ < 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 >
کد
Header
Body 1 Body 2
C1 C2 C3
C4 C5 C6
خروجی
1) سطر دوم جدول بيرونی دارای يک خانه و سطر دوم دارای دو خانه است . نتظيم خاصيت colspan = 2 در سطر اول باعث می شود تا بين سطر اول و دوم هماهنگی ايجاد شده و تک خانه سطر اول کش آمده و دو خانه سطر دوم را پوشش بدهد .
2) نوشتن متن فقط درون تگ باز و بسته td مجاز است .
3) سطر سوم ( سومين تگ tr ) محدوده جدول درونی را مشخص می کند ، که بخش کدهای سبز را شامل می شود .
4) به جدول هم می توان در بخش style و هم در داخل تگ table ، حاشيه border داد . حاشيه ای که در قسمت style تعيين شود فقط باعث نمايش خطوط دور جدول می شود و خطوط درونی را شامل نمی شود . اما حاشيه تعيين شده در تگ table باعث نمايش خطوط بيرونی و درونی جدول می شود . همچنين می توان به هر td به صورت مجزا حاشيه اختصاص داد .
توضيحات

 

Copyright 2014. All rights reserved.