تگ جدول < table > :
اين تگ < tabal > برای ايجاد جدول ها در صفحه استفاده می شود . به طور کلی جدول ها به 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 > |
کد | ||||||||||||
|
خروجی | ||||||||||||
| 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 % درصد |
ميزان پهنا و عرض جدول را تعيين می کند . |
تگ < tr > :
از اين تگ برای ايجاد يک سطر در جدول استفاده می شود . در درون هر سطر به تعداد دلخواه می توان ستون ( خانه جدول ) به وسيله تگ < td > ، ايجاد کرد .
نکته : از تگ < tr > فقط برای ايجاد يک سطر و نه خانه جدول استفاده می شود . تگ < tr > ، بدون تگ < td > در درون آن خروجی ندارد .
| خصوصيات تگ Tr | ||
| نام خاصيت | نوع خاصيت | شرح |
| align | left right center Justify Char |
نحوه ترازبندی و قرار گيری محتويات درون سطر جدول را مشخص می کند که 5 حالت دارد : 1) left : چپ 2) right : راست 3) center : وسط 4) Justify : در کل عرض شی گسترش داده می شود . 5) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود . |
| bgcolor | نام رنگ color name |
رنگ پس زمينه خانه های سطر را تعيين می کند . |
| char | کاراکتر Character |
کاراکتری که قرار است متن دورن سطر حول آن تراز شود را تعيين می کند . توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . |
| charoff | Pixel درصد % |
میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون سطر را تراز کند . توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . |
| valign | top bottom middle baseline |
نحوه ترازبندی عمودی محتويات درون سطر جدول را تعيين می کند . - top : محتوِيات دورن خانه جدول از بالا تراز می شوند . - bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند . - middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند . |
مثال : ايجاد يک جدول با دو سطر :
| Example | |||
| < table width = "400px" border = "1" > < tr > < td > سطر 1 < /td > < /tr > < tr > < td > سطر 2 < /td > < /tr > < /table > |
کد | ||
|
خروجی | ||
تگ < Td > :
از تگ < td > برای ايجاد يک خانه جدول درون يک سطر ( تگ tr ) استفاده می شود . هر خانه جدول می تواند خصوصيات منحصر به فرد و ويژه خود را داشته باشد .
نکته : تگ < td > فقط بايد درون تگ < tr > استفاده شود .
| خصوصيات تگ Td | ||
| نام خاصيت | نوع خاصيت | شرح |
| abbr | متن Text |
با استفاده از اين خاصيت می توان يک عبارت خلاصه شده در مورد محتويات خانه جدول تعيين کرد . |
| align | left right center Justify Char |
نحوه ترازبندی و قرار گيری محتويات درون خانه جدول را مشخص می کند که 5 حالت دارد : 1) left : چپ 2) right : راست 3) center : وسط 4) Justify : در کل عرض شی گسترش داده می شود . 5) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود . |
| axis | نام Text |
يک نام را برای خانه جدول تعيين می کند . |
| bgcolor | نام رنگ color name |
رنگ پس زمينه خانه جدول را تعيين می کند . |
| char | کاراکتر Character |
کاراکتری که قرار است متن دورن خانه جدول حول آن تراز شود را تعيين می کند . توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . |
| charoff | Pixel درصد % |
میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون خانه جدول را تراز کند . توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . |
| colspan | عدد Number |
تعداد خانه های که اين خانه جدول آنها را پوشش می دهد را تعيين می کند . برای درک بهتر به مثال پايين صفحه توجه کنيد .* |
| height | pixel | میزان ارتفاع خانه جدول را تعيين می کند . اين خاصيت قديمی شده و به جای آن از CSS استفاده می شود . |
| nowrap | nowrap | تعيين می کند که اگر پهنای خانه جدول از پهنای متن درون آن کمتر بود ، خطوط متن شکسته شده و برای هم اندازه شدن با پهنای خانه جدول به بخش های کوچکتر تقسيم شوند يا خير . اين خاصيت قديمی شده و به جای آن از CSS استفاده می شود . |
| rowspan | عدد Number |
تعداد سطرهايی که اين خانه جدول آنها را پوشش می دهد را تعيين می کند . برای درک بهتر به مثال پايين صفحه توجه کنيد .* |
| scope | Col Colgroup Row Rowgroup |
مشخص می کند که اين خانه جدول اطلاعاتی را راجع به بقيه سطری که آن را در برگرفته ( Row ) ، يا بقيه ستونی که اين خانه جز آن است ( Col ) ، يا گروه سطرهايی که آن خانه را در بر گرفته اند ( Rowgroup ) و يا گروه ستون هايی که اين خانه جزء آن است ( Colgroup ) شامل می شود . |
| valign | top bottom middle baseline |
نحوه ترازبندی عمودی محتويات درون خانه جدول را تعيين می کند . - top : محتوِيات دورن خانه جدول از بالا تراز می شوند . - bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند . - middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند . |
| width | pixel % درصد |
ميزان پهنا و عرض جدول را تعيين می کند . |
در مثال های زير برخی از خصوصيات مهم و پر کاربرد معرفی شده جدول بالا را در عمل نشان می دهيم :
| Example | |||
| < table width = "500px" border = "1" > < tr > < td width = "200px" align = "left" height = "100px" valign = "top" bgcolor = "blue" > Cell 1 < /td > < td width = "300px" align = "center" valign = "bottom" bgcolor = "green" > Cell 2 < /td > < /tr > < /table > |
کد | ||
|
خروجی | ||
- خاصيت colspan و rowspan :
قبلا اشاره کرديم که خانه های جدول مرتب هستند و دارای ساختار مرتبط به هم . برای مثال نمی توان در يک سطر جدول 1 خانه و در سطر پايينی 3 خانه داشت . در چنين شرايطی از خاصيت colspan در سطر با خانه کمتر استفاده می کنيم تا سطری که خانه کمتر دارد ، سطر با خانه بيشتر را پوشش دهد . خاصيت colspan برای پوشش افقی خانه ها و خاصيت rowspan برای پوشش عمودی خانه های جدول به کار می رود . به مثال های زير توجه کنيد :
| Example | |||||||
| < table width = "450px" border = "1" > < tr > < td width = "450px" > Cell 1 < /td > < /tr > < tr > < td width = "150px" > Cell 2 < /td > < td width = "150px" > Cell 3 < /td > < td width = "150px" > Cell 4 < /td > < /tr > < /table > |
کد بدون خاصيت colspan | ||||||
|
خروجی کد بدون خاصيت colspan | ||||||
| می بينيم بدون استفاده از خاصيت colspan در سطر با خانه کمتر ، عملا جدول به هم ريخته بوده و خروجی درستی ندارد . در قسمت زير با اضافه کردن خاصيت colspan به خروجی درست می رسيم . | توجه ! | ||||||
| < table width = "450px" border = "1" > < tr > < td width = "450px" colspn = "3" > Cell 1 < /td > < /tr > < tr > < td width = "150px" > Cell 2 < /td > < td width = "150px" > Cell 3 < /td > < td width = "150px" > Cell 4 < /td > < /tr > < /table > |
کد با خاصيت colspan | ||||||
|
خروجی کد با خاصيت colspan | ||||||
- خاصيت rowspan :
مثال : حالت فوق را درباره 2 ستون با تعداد سطرهای متفاوت نشان می دهيم :
| Example | |
| < table width="450px" border="1" > < tr > < td width="450px" > Cell 1 < /td > < td width="150px" > Cell 2 < /td > < /tr > < tr > < td width="150px" >> Cell 3 < /td > < /tr > |
|
کد بدون خاصيت rowspan
| Cell 1 | Cell2 |
| Cell3 |
خروجی کد بدون خاصيت rowspan می بينيم بدون استفاده از خاصيت rowspan در سطر با خانه کمتر ، عملا جدول به هم ريخته بوده و خروجی درستی ندارد . در قسمت زير با اضافه کردن خاصيت rowspan به خروجی درست می رسيم . توجه ! < table width="450px" border="1" >
< tr >
< td width="450px" rowspan="2" >
Cell 1
< /td >
< td width="150px" >
Cell 2
< /td >
< /tr >
< tr >
< td width="150px" >>
Cell 3
< /td >
< /tr >
کد با خاصيت rowspan
| Cell 1 | Cell 2 |
| Cell 3 |
خروجی کد با خاصيت rowspan
تگ < th > :
از اين تگ برای ايجاد يک سر عنوان ( Header ) در بالای ستون های يک جدول استفاده می شود . متنی که قرار است به عنوان سر عنوان قرار بگيرد ، در درون تگ باز و بسته < th > تعريف شده و معمولا به صورت درشت ( Bold ) توسط مرورگر نمايش داده می شود .
تگ سر عنوان بايد در اولين سطر جدول قرار گرفته و برای هر ستون به طور مجزا تعريف شوند .
مثال : جدول زير دارای 2 ستون است که برای هر ستون آن يک سر عنوان ( Header ) مجزا تعريف شده است :
| Example | |||||
| < table width = "400px" border = "1" > < tr > < th > Header 1 < /th > < th > Header 2 < /th > < /tr > < tr > < td > ستون 1 < /td > < td > ستون 2 < /td > < /tr > < /table > |
کد | ||||
|
خروجی | ||||
خصوصيات تگ Th |
||
| نام خاصيت | نوع خاصيت | شرح |
| abbr | متن Text |
با استفاده از اين خاصيت می توان يک عبارت خلاصه شده در مورد محتويات خانه جدول تعيين کرد . |
| align | left right center Justify Char |
نحوه ترازبندی و قرار گيری محتويات درون خانه جدول را مشخص می کند که 5 حالت دارد : 1) left : چپ 2) right : راست 3) center : وسط 4) Justify : در کل عرض شی گسترش داده می شود . 5) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود . |
| axis | نام Text |
يک نام را برای خانه جدول تعيين می کند . |
| bgcolor | نام رنگ color name |
رنگ پس زمينه خانه جدول را تعيين می کند . |
| char | کاراکتر Character |
کاراکتری که قرار است متن دورن خانه جدول حول آن تراز شود را تعيين می کند . توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . |
| charoff | Pixel درصد % |
میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون خانه جدول را تراز کند . توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . |
| colspan | عدد Number |
تعداد خانه های که اين خانه جدول آنها را پوشش می دهد را تعيين می کند . برای درک بهتر به قسمت توضيحات colspan برويد . |
| height | pixel | میزان ارتفاع خانه جدول را تعيين می کند . اين خاصيت قديمی شده و به جای آن از CSS استفاده می شود . |
| nowrap | nowrap | تعيين می کند که اگر پهنای خانه جدول از پهنای متن درون آن کمتر بود ، خطوط متن شکسته شده و برای هم اندازه شدن با پهنای خانه جدول به بخش های کوچکتر تقسيم شوند يا خير . اين خاصيت قديمی شده و به جای آن از CSS استفاده می شود . |
| rowspan | عدد Number |
تعداد سطرهايی که اين خانه جدول آنها را پوشش می دهد را تعيين می کند . برای درک بهتر به قسمت توضيحات rowspan برويد . |
| scope | Col Colgroup Row Rowgroup |
مشخص می کند که اين خانه جدول اطلاعاتی را راجع به بقيه سطری که آن را در برگرفته ( Row ) ، يا بقيه ستونی که اين خانه جز آن است ( Col ) ، يا گروه سطرهايی که آن خانه را در بر گرفته اند ( Rowgroup ) و يا گروه ستون هايی که اين خانه جزء آن است ( Colgroup ) شامل می شود . |
| valign | top bottom middle baseline |
نحوه ترازبندی عمودی محتويات درون خانه جدول را تعيين می کند . - top : محتوِيات دورن خانه جدول از بالا تراز می شوند . - bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند . - middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند . |
| width | pixel % درصد |
ميزان پهنا و عرض جدول را تعيين می کند . |
تگ های < thead > , < tbody > , < tfoot > :
اين تگ ها برای دسته بندی سطرهای يک جدول به کار می روند .
تگ < thead > برای ايجاد و دسته بندی سطر سر عنوان ( Header ) استفاده می شود . تگ < tbody > شامل محتويات و بدنه اصلی جدول شده و تگ < tfoot > هم برای عنوان انتهايی جدول مورد استفاده قرار می گيرد .
نکته : امروز به دليل پشتيبانی نامناسب مرورگرها و عدم کارائي از اين تگ ها کمتر استفاده می شود .
نکته 2 : هر يک از تگ های فوق فقط در درون تگ < table > قابل استفاده بوده و حتما بايد دارای حداقل يک تگ < tr > باشند .
نکته 3 : در هنگام استفاده از اين تگ ها ، بايد به ترتيب قرار گيری آنها در درون تگ < table > به شرح زير دقت کرد :
1 . < thead > 2 . < tbody > 3 . < tfoot >
| خصوصيات تگ های thead , tbody , tfoot | ||
| نام خاصيت | نوع خاصيت | شرح |
| align | left right center Justify Char |
نحوه ترازبندی و قرار گيری محتويات درون خانه جدول را مشخص می کند که 5 حالت دارد : 1) left : چپ 2) right : راست 3) center : وسط 4) Justify : در کل عرض شی گسترش داده می شود . 5) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود . |
| char | کاراکتر Character |
کاراکتری که قرار است متن دورن سطر حول آن تراز شود را تعيين می کند . توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . |
| charoff | Pixel درصد % |
میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون سطر را تراز کند . توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . |
| valign | top bottom middle baseline |
نحوه ترازبندی عمودی محتويات درون خانه جدول را تعيين می کند . - top : محتوِيات دورن خانه جدول از بالا تراز می شوند . - bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند . - middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند . |
مثال : در جدول زير سطرهای جدول به 3 گروه مجزا تقسيم شده است .
| Example | ||||
| < table border="1" width = "400px" > < thead > < tr > < td > This text is in the THEAD < /td > < /tr > < /thead > < tbody > < tr > < td > This text is in the TBODY < /td > < /tr > < /tbody > < tfoot > < tr > < td > This text is in the TFOOT < /td > < /tr > < /tfoot > < /table > |
کد | |||
|
خروجی | |||
تگ < Colgroup > , < Col > :
تگ < colgroup > برای دسته بندی گروهی از ستون های يک جدول ( تگ های td ) جهت قالب بندی و تعيين خصوصيات ، استفاده می شود . تگ < colgroup > ، فقط خصوصيات را نگهداری کرده و هيچگونه خروجی بر روی صفحه ندارد . به ازای هر ستونی که قرار است توسط اين تگ دسته بندی شود ، يک تگ < col > درون آن ايجاد می شود .
نکته : تگ < colgroup > فقط درون تگ < table > قابل استفاده است .
| خصوصيات تگ colgroup | ||
| نام خاصيت | نوع خاصيت | شرح |
| align | left right center Justify Char |
نحوه ترازبندی و قرار گيری محتويات درون گروه خانه های جدول را مشخص می کند که 5 حالت دارد : 1) left : چپ 2) right : راست 3) center : وسط 4) Justify : در کل عرض شی گسترش داده می شود . 5) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود . |
| char | کاراکتر Character |
کاراکتری که قرار است متن دورن گروه خانه های جدول حول آن تراز شود را تعيين می کند . توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . |
| charoff | Pixel درصد % |
میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون سطر را تراز کند . توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . |
| span | Number عدد |
تعداد خانه هايی که قرار است اين تگ به وسيله تگ درونی col پوشش دهد را تعيين می کند . |
| valign | top bottom middle baseline |
نحوه ترازبندی عمودی محتويات درون گروه خانه خانه های جدول را تعيين می کند . - top : محتوِيات دورن خانه جدول از بالا تراز می شوند . - bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند . - middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند . |
مثال : اين مثال يک < colgroup > را که دارای 3 ستون با پهناهاي متفاوت است ، نمايش می دهد . در قصمت اول ، توسط هر تگ < col > خاصيت پهنای ستون تعيين شده و در قسمت دوم آن خواص به ترتيب به خانه های جدول اعمال شده اند :
توجه : امروزه با امکانات ارائه توسط CSS از اين گونه تگ ها کمتر استفاده می شود .
| Example | ||||
| < table border="1" width = "300px" > < colgroup span="3" > < col width="50px" > < /col > < col width="100px" > < /col > < col width="150px" > < /col > < /colgroup > < tr > < td > خانه 1 < /td > < td > خانه 2 < /td > < td > خانه 3 < /td > < /tr > < /table > |
کد | |||
|
خروجی | |||
منبع: دنیای فناوری با حساس کامپیوتر
