کار با جداول در HTML

 

یکی از مهمترین عناصر موجود در html جداول می باشند. معمولاً برای منظم کردن سایر عناصر موجود در صفحه مانند فرم ها، لینک ها، تصاویر، متن ها و ... استفاده می شوند. در ابتدا جداول برای قالب بندی و طرح بندی کل صفحات کاربرد ویژه ای داشتند. اما با ظهور CSS و پیدایش روش های نوین طرح بندی، امروزه کاربردشان تنها به نمایش منظم سایر عناصر محدود شده است.

در این بخش با نحوه استفاده جداول، تگ ها و صفت های مربوط به آن ها آشنا خواهیم شد و در ادامه ویژگی های پیشرفته تر آن ها یعنی گروه بندی های ردیفی و ستونی را بررسی می کنیم.

ساختار اساسی جدول

ساختار کلی یک جدول در مثال زیر آمده است :

 

1 <table border="1">
2     <tr>
3         <th>Name</th>
4         <th>Age</th>
5     </tr>
6     <tr>
7         <td>Ali</td>
8         <td>21</td>
9     </tr>
10     <tr>
11         <td>Mohammad</td>
12         <td>25</td>
13     </tr>
14 </table>

 

نتیجه در مرورگر :

 

table tag <a  style=آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه اول)" title="آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه اول) 7learn.com" width="361" height="263" />

 

در حالت کلی می توان گفت که جدول ها در HTML از ردیف هایی تشکیل می شوند که سلول ها در آن ها قرار دارند.

در ادامه با تگ هایی که در ارتباط با ساختار جداول هستند، بیشتر آشنا خواهیم شد :


تگ<table> : برای ایجاد یک جدول استفاده می گردد که ابتدا و انتهای هر جدول را مشخص می کند. تگ <table>  از خصوصیات زیر پشتیبانی می کند:

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

dir : جهت گیری متون داخل جدول را مشخص می کند و می تواند یکی از مقادیر rtl یا ltr را انتخاب کند.

bordercolordark  : معمولاً حاشیه اطراف جدول از دو رنگ تیره و روشن ایجاد می شود. این خصوصیت، رنگ تیره تر حاشیه (border) را تعیین می کند.

bordercolorlight  : رنگ روشن border را مشخص می کند.

bordercolor  : رنگ اصلی border را مشخص می کند و آن را از حالت دو رنگی خارج می نماید. در واقع border را فقط به یک رنگ به نمایش در می آورد.

cellpadding  : عددی صحیح بر حسب px را به عنوان مقدار می پذیرد و فضای محتوای داخل سلولها و دیواره هایشان را کنترل می کند.

cellspaceing  : عددی صحیح بر حسب px را به عنوان مقدار می پذیرد و فضای بین هر سلول را کنترل می کند.

تصویر زیر موقعیت خصوصیات  cellpadding و cellspacing را به شما نشان می دهد.

 

table <a  style=آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه اول)" title="آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه اول) 7learn.com" width="450" height="257" />

 

 

align  : محل قرار گیری جدول در صفحه (یا عنصری که جدول در آن قرار دارد ) را مشخص می کند و یکی از مقادیر زیر را می پذیرد:

 

  • right  : جدول را در سمت راست قرار می دهد.
  • center  : جدول را در وسط قرار می دهد.
  • left  : جدول را در سمت چپ قرار می دهد.

 

width :عرض جدول را برحسب px یا درصد مشخص می نماید.

 

height  : ارتفاع جدول را برحسب px یا درصد مشخص می نماید.

 

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

 

summary  : رشته ای ساده است که توضیحاتی در مورد محتویات جدول را به عنوان مقدار می پذیرد.

 

background  : آدرس عکسی را به عنوان مقدار می پذیرد و آن را در پس زمینه جدول قرار می دهد.

 

frame  : مشخص می کند که کدام یک از border های چهار طرف جدول نمایش داده شود. این خصوصیت مقادیر زیر را می پذیرد:

 

  • void  : هیچ کدام از borderها را نمایش نمی دهد.(مقدار پیشفرض(
  • hsides  : فقط  borderهای افقی را نمایش می دهد.
  • :vsides  فقط border های عمودی را نمایش می دهد.
  • rhs  : فقط border سمت راست را نمایش می دهد.
  • lhs  : فقط border سمت چپ را نمایش می دهد.
  •  :above فقط border بالا را نمایش می دهد.
  • below  :فقط border پایینی را نمایش می دهد.
  • box  یا:border   همه borderها را نمایش می دهد.

 

مشاهده نتیجه

 


 

rules  : مشخص می نماید که کدام یک از حاشیه های داخلی جدول (اطراف ردیف، گروهی از ردیف ها، سلول ها و گروهی از سلول ها) نمایش داده شوند. این خصوصیت مقادیر زیر را می پذیرد:

 

  • none  : هیچ کدام از  borderهای داخلی را نمایش نمی دهد.(مقدار پیش فرض)
  • all  : تمام border های داخلی را به نمایش در می آورد.
  • groups  : فقط حاشیه های گروهی از ردیف ها یا گروهی از ستون ها را به نمایش در می آورد.
  • cols  : فقط border ستون ها را به نمایش در می آورد.
  • rows  : فقط border ردیف ها را به نمایش در می آورد.

 

مشاهده نتیجه

 

 تگ<tr> : برای ایجاد یک ردیف، و همیشه در داخل تگ  <table> استفاده می گردد. هر جدول می بایست حداقل یک ردیف داشته باشد. این تگ خصوصیت های زیر را دارا می باشد:

 

align  : چگونگی پیکربندی متن در هر یک از سلول های آن ردیف را مشخص می نماید و می تواند یکی از مقادیر زیر را بپذیرد :

 

  • left
  • right
  • center
  • justify

 

bgcolor  : رنگ پس زمینه ردیف را مشخص می نماید.

 

valign  : تراز عمودی متن در هر یک از سلول های یک ردیف را مشخص می نماید و مقادیر زیر را می پذیرد.

 

  •  :top  محتوای سلول را با بالای سلول منطبق  می کند.
  • middle : محتوای سلول را با وسط سلول منطبق  می کند.
  •  :bottom  محتوای سلول را با پایین سلول منطبق می کند.
  • baseline  : محتوای سلول را با اولین خطی که محتوای سلول ها از آن آغاز می شود منطبق می کند.

 

تگ های <td> و <th> : این دو تگ برای ایجاد سلول های داخل هر ردیف استفاده می شوند. تگ <td> برای سلول هایی که شامل داده های جدولی ساده و تگ <th>  برای سلول هایی که شامل عنوان جدولی می باشند، مورد استفاده قرار می گیرند.

 

به صورت پیش فرض محتوای سلول های از نوع <th> به شکل bold و وسط چین و سلول های <td>  به شکل نرمال و چپ چین نمایش داده می شوند. این دو تگ خصوصیت های مشابهی دارند که در زیر بیان می شود:

 

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

 

1

<td abbr="HTML"><Hyper Text Markup Language</td>

 

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

 

 :valign  تراز عمودی محتوای سلول را کنترل می نماید. و  یکی از مقادیر top ,  middle , bottom , baseline را انتخاب می کند.

 

bgcolor  : رنگ پس زمینه سلول را مشخص می نماید.

 

width  : عرض سلول را تعیین می نماید..

 

height : ارتفاع سلول را تعیین می نماید.

 

nowrap  : این خصوصیت بولین از شکسته شدن متن در یک سلول جلوگیری می نماید، مگر اینکه در متن داخل سلول از تگ  </ br> استفاده شده باشد.


 

colspan  : این خصوصیت هنگامی استفاده می شود که می خواهیم یک سلول را در طول چندین ستون گسترش بدهیم . عددی صحیح را به عنوان مقدار می پذیرد که این عدد مشخص کننده تعداد ستونهایی است که باید سلول در آنها گسترش پیدا کند. به مثال زیر و حاصل آن در مرورگر توجه نمایید :

1 <table border="1">
2     <tr>
3         <th colspan="4"> Work Content  Points</th>
4     </tr>
5     <tr>
6         <td>Name</td>
7         <td>Email</td>
8         <td>Phone</td>
9         <td>Floor/Block</td>
10     </tr>
11 </table>

نتیجه در مرورگر :

table colspan tag <a  style=آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه اول)" title="آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه اول) 7learn.com" width="370" height="202" />

rowspan  : این خصوصیت هنگامی مورد استفاده قرار می گیرد که می خواهیم یک سلول را در چند ردیف گسترش دهیم . عددی صحیح را به عنوان مقدار می پذیرد که این عدد مشخص کننده تعداد ردیف هایی است که باید سلول در آنها گسترش پیدا کند. به مثال زیر و حاصل آن در مرورگر توجه کنید:

1 <table border="1">
2     <tr>
3         <td>Bill</td>
4         <td> این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید </td>
5         <td>345678</td>
6         <th rowspan="3"> 3/C </th>
7     </tr>
8     <tr>
9         <td>Jane</td>
10         <td> این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید </td>
11         <td>777744</td>
12     </tr>
13     <tr>
14         <td>Alison</td>
15         <td> این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید </td>
16         <td>888652</td>
17     </tr>
18  </table>

نتیجه در مورگر:

table rowspan tag <a  style=آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه اول)" title="آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه اول) 7learn.com" width="370" height="202" />

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

ارسال نظر