آموزش HTML - جدول های HTML

جدول های HTML

تگ جدول < table > :

اين تگ برای ايجاد جدول ها در صفحه استفاده می شود . به طور کلی جدول ها به 2 منظور ايجاد می شوند :

ايجاد يک جدول معمولی با تعدادی خانه ، برای نمايش مطالب مورد نظر در سطرها و ستون های جدا از هم .
تقسيم فضای صفحه با استفاده از چهارچوب جدول ها برای منظم چيدن محتويات صفحه . به طور مثال مطالب اين صفحه در تعدادی خانه جدول مرتب شده است . در اين حالت می توان با عدم تعيين حاشيه ( border ) برای خانه های جدول ، از چهارچوب جدول ها استفاده کرد در حالی که آنها عملا از ديد کاربر مخفی هستند .

جدول ها برای هر منظوری به کار روند ، بايد با استفاده از تگ < table > ايجاد شوند . هر جدول مجموعه ای از سطرها و ستون هاست . برای ايجاد يک سطر جديد از يک تگ < tr > استفاده می شود که هر خانه ( ستون ) درون سطر هم توسط يک تگ < td > مشخص می شود .

الگوريتم طراحی جدول :

در طراحی جدول بايد به نکات زير دقت کرد :

در هنگام ايجاد يک سطر یا استفاده از تگ < tr > ، قبل از ايجاد سطر جديد حتما بايد تگ < tr > قبلی بسته شود و در هر سطر نيز بايد در صورت ايجاد هر خانه با تگ < td > قبل از ايجاد يک خانه جديد بايد تگ < td > قبلی بسته شود .
درون تگ < table > فقط می توان تگ < tr > و درون تگ < tr > نيز فقط می توان از تگ < td > استفاده کرد .
خانه هاو سطرهای يک جدول منظم و مرتب هستند . به عبارت ديگر به طور مثال نمی توان در يک سطر جدول 3 خانه و در سطر پايينی آن 2 خانه با پهناهای متفاوت ايجاد کرد . در چنين مواردی بايد با استفاده از خاصيت colspan در تگ < td > سطر با خانه کمتر و استفاده از تکنيک جدول های تو در تو اين مسئله را بر طرف کرد .

جدول های تو در تو : می توان در درون يک جدول ، جدول های ديگری نيز ايجاد کرد . در اين حالت جدول درونی همانند يک خانه جدول بيرونی خواهد بود . جدول درونی را بايد در يک تگ < 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 >

Body 1

Body 2

C1	C2	C3
C4	C5	C6

1) سطر دوم جدول بيرونی دارای يک خانه و سطر دوم دارای دو خانه است . نتظيم خاصيت colspan = 2 در سطر اول باعث می شود تا بين سطر اول و دوم هماهنگی ايجاد شده و تک خانه سطر اول کش آمده و دو خانه سطر دوم را پوشش بدهد .
2) نوشتن متن فقط درون تگ باز و بسته td مجاز است .
3) سطر سوم ( سومين تگ tr ) محدوده جدول درونی را مشخص می کند ، که بخش کدهای سبز را شامل می شود .
4) به جدول هم می توان در بخش style و هم در داخل تگ table ، حاشيه border داد . حاشيه ای که در قسمت style تعيين شود فقط باعث نمايش خطوط دور جدول می شود و خطوط درونی را شامل نمی شود . اما حاشيه تعيين شده در تگ table باعث نمايش خطوط بيرونی و درونی جدول می شود . همچنين می توان به هر td به صورت مجزا حاشيه اختصاص داد .

خصوصيات تگ Table
نام خاصيت	نوع خاصيت	شرح
align	left right center	نحوه ترازبندی و قرار گيری جدول را در صفحه مشخص می کند که 3 حالت دارد : 1) left : چپ 2) right : راست 3) center : وسط
bgcolor	نام رنگ color name	رنگ پس زمينه جدول را تعيين می کند .
border	pixel	ضخامت و پهنای خطوط حاشيه دور جدول را تعيين می کند .
cellpadding	pixel	ميزان فاصله بين خطوط حاشيه جدول و محتويات دورن خانه های درون آن را تعيين می کند .
cellspacing	pixel	فاصله بين خانه های جدول را تعيين می کند . در صورتی که مقدار اين خاصيت صفر باشد ، خانه های جدول به هم می چسبند .
frame	above below border box hsides lhs rhs vsides	مشخص می کند که کدام قسمت از خطوط حاشيه های جدول بايد نمايش داده شوند که می تواند يکی از حالت های زير را داشته باشد : - above : خطوط بالايي جدول نمايش داده خواهند شد . - below : خطوط پايينی جدول نمايش داده خواهند شد . - border : کليه خطوط حاشيه های خانه های جدول نمايش داده خواهند شد . - box : کليه خطوط حاشيه خانه های جدول نمايش داده خواهند شد . - hsides : فقط خطوط افقی حاشيه خانه های جدول نمايش داده خواهند شد . - lhs : فقط خطوط افقی سمت چپ حاشيه خانه های جدول نمايش داده خواهند شد . - rhs : فقط خطوط افقی سمت راست حاشيه خانه های جدول نمايش داده خواهند شد . - vsides : فقط خطوط عمودی حاشيه خانه های جدول نمايش داده خواهند شد . - void : هيچ کدام از خطوط حاشيه های خانه های جدول نمايش داده خواهند شد .
rules	cols rows group all	مشخص کننده نوع و حالت خطوط تقسيم کننده خانه های جدول به خانه های کوچکتر است که انواع ممکن آن عبارتند از : - cols : خانه های جدول فقط بر حسب ستون ها با خطوط از هم جدا می شوند . - rows : خانه های جدول فقط بر حسب سطرها با خطوط از هم جدا می شوند . - group : خانه های جدول بر حسب گروه بندی داخلی در جدول با خطوط از هم جدا می شوند . - all : تمام خانه های جدول با خطوط عمودی و افقی از هم جدا می شوند .
summary	text	يک متن خلاصه در مورد جدول است که برای برخی مرورگرهای صوتی يا بدون تصوير استفاده می شود .
width	pixel % درصد	ميزان پهنا و عرض جدول را تعيين می کند .