آموزش html - قسمت ششم - جدول

معمولا به دو دلیل اصلی از جدول ها طراحان صفحه وب استفاده می کنند.

1) سازماندهی کردن اطلاعات  با استفاده از جدول.
2) چیدمان یا طرح بندی صفحه با استفاده از جدول های مخفی (hidden tables)

تقسیم کردن صفحه به قسمت های مختلف , ایجاد کردن منوها , ایجاد کردن سر صفحه  (header )  , قرار دادن آسان تر عکس ها در مکان های دلخواه از صفحه, نوشتن متون در چند ستون در یک صفحه و .... از جمله کاربرد جدول ها می باشند.

جدول های ابتدائی (Basic Tables) :
جدول ها با دستور <table>  تعریف می شوند.هر جدول از سطرها (Rows) و ستونهایی(Columns) تشکیل شده است.

سطر ها (Rows ) :
برای اضافه کردن سطرها به جدول از دستور <tr> ... </tr> استفاده می کنیم.

ستون ها (Columns):
برای اینکه هر سطر را به ستون هایی تقسیم کنیم از دستور <td>...</td> استفاده می کنیم.

مثال :

<table border=1> 
   <tr> 
         <td>column 1 into first row </td>
         <td>column 2 into first row</td>  
   </tr>
    <tr>          
         <td>column 1 into second row</td> 
         <td>column 2 into second row.</td> 
    </tr>
</table>

نتیجه به صورت زیر خواهد بود :

صفت های دستور <table>:

صفت align:  با استفاده از این صفت می توان موقعیت جدول را در صفحه تعیین کرد.مقادیر left ,center ,right به ترتیب باعث نمایش جدول در سمت راست , مرکز وچپ صفحه خواهند شد.

صفت background : برای وارد کردن عکس به عنوان پس زمینه جدول , ازاین صفت استفاده می کنیم.

<table background ="URL">

</table>

صفت bgcolor : برای تعریف کردن رنگ برای پس زمینه جدول.

صفت border :  برای  تعیین کردن ضخامت حاشیه یا کادر جدول.

صفت bordercolor :  برای تعیین کردن رنگ کادر.

صفت bordercolordark :مشخص کردن رنگی به عنوان  سایه برای کادر جدول.

صفت  cellpadding : با استفاده از این صفت می توان فاصله ای بین خانه های جدول و محتوای جدول تعیین کرد.

صفت   cellspacing : برای تعیین فاصله بین خانه های جدول.

مثال :

<table align = center cellpadding=4 cellspacing=14  bgcolor =white  border=5  bordercolor=red  bordercolordark=gray>
   <tr> 
	<td>column 1 into first row </td>
        <td>column 2 into first row</td>
   </tr>
   <tr>
        <td>column 1 into second row</td>
        <td>column 2 into second row.</td> 
   </tr>
</table>

نتیجه به صورت زیر خواهد بود :

صفت frame :

 این صفت به معنای چهار چوب و دارای مقادیر زیر است :

void : برای پاک کردن کادرهای بیرونی.

above : یرای نمایش  دادن حاشیه بالایی جدول.

below : برای نمایش دادن حاشیه پایینی جدول.

lhs : حاشیه قسمت چپ جدول را نمایش می دهد.

rhs : حاشیه قسمت راست جدول را نمایش می دهد.

hsides : برای نشان دادن دو ضلع  افقی حاشیه.

vsides : برای نشان دادن دو ضلع  عمودی حاشیه.

box : برای نمایش دادن همه اضلاع حاشیه جدول.

صفت valign :

این صفت دارای دو مقدار زیر است :

top : محتوای جدول را با بالای خانه های جدول تنظیم می کند.

botton : محتوای جدول را با پایین خانه های جدول تنظیم می کند.

صفت width :

این صفت که یا با پیکسل یا به صورت درصد بیان می شود عرض جدول را تعیین می کند.

مثال :

<table align = center bgcolor =white border=4 bordercolor=black   bordercolordark=gray   valign = top frame=above>
   <tr> 
         <td>column 1 into first row </td>
         <td>column 2 into first row</td>
   </tr>
   <tr>
         <td>column 1 into second row</td>
         <td>column 2 into second row.</td> 
   </tr>
</table>

صفت های  دستورهای <td> و <tr> :

صفت align : با استفاده از مقادیر left,right,center ازاین صفت می توان موقعیت محتوا را در مرکز , قسمت راست و چپ خانه های جدول تعیین کرد.

صفت background : با استفاده از این صفت می توان عکسی را به عنوان پس زمینه خانه یا خانه های جدول قرار داد.

صفت bgcolor : با استفاده از این صفت می توان برای خانه های جدول رنگ در نظر کرفت.

صفت bordercolor : با استفاده از این صفت می توان برای حاشیه یا کادر خانه ها رنگ مشخص کرد.

صفت bordercolordark : می توان رنگی را به عنوان سایه برای حاشیه خانه های جدول تعریف کرد.

صفت valign : این صفت دارای مقادیر top,middle,bottom است که به ترتیب باعث نمایش محتوای خانه های جدول در پایین , وسط و بالای خانه ها می شود.

صفت width : عرض خانه های جدول را تعیین می کند که می تواند با پیکسل یا درصد مقداردهی شود.

صفت height : ارتفاع خانه های جدول را تعیین می کند که می تواند با پیکسل یا درصد مقداردهی شود..

صفت های بالا در هر دو دستور <td> و <tr> معتبر هستند اما صفت هایی که در زیر بیان می شوند مخصوص دستور <td

صفت colspan : با استفاده ازاین صفت می توان تعیین کرد که عرض هر خانه به اندازه چند ستون باشد.برای جداولی کاربرد دارد که پهنای خانه های آن متفاوت است.

صفت rowspan :  با استفاده ازاین صفت می توان تعیین کرد که ارتفاع هر خانه به اندازه چند سطر باشد.برای جداولی کاربرد دارد که ارتفاع  خانه های آن متفاوت است.