تگ جدول < table >

[narges-sh]

اين تگ برای ايجاد جدول ها در صفحه استفاده می شود . به طور کلی جدول ها به 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 >
کد




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 به صورت مجزا حاشيه اختصاص داد .
توضيحات





خصوصيات تگ 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
% درصد
ميزان پهنا و عرض جدول را تعيين می کند .