آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه اول)

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

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

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

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

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ali</td>
<td>21</td>
</tr>
<tr>
<td>Mohammad</td>
<td>25</td>
</tr>
</table>

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

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

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

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

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

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

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

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

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

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

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

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

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 : این صفت مخففی از محتوای سلول را نشان می‌دهد .به مثال زیر توجه کنید:

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

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

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

bgcolor : رنگ پس زمینه سلول را تعیین می‌کند.

width : عرض ستلول را مشخص می‌کند.

height :ارتفاع سلول را مشخص می‌کند.

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

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

<table border="1">
<tr>
<th colspan="4"> Work Content  Points</th>
</tr>
<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Floor/Block</td>
</tr>
</table>

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

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

<table border="1">
<tr>
<td>Bill</td>
<td>[email protected]</td>
<td>345678</td>
<th rowspan="3"> 3/C </th>
</tr>
<tr>
<td>Jane</td>
<td>[email protected]</td>
<td>777744</td>
</tr>
<tr>
<td>Alison</td>
<td>[email protected]</td>
<td>888652</td>
</tr>
</table>

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

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

چه امتیازی به این مقاله می دید؟

1 2 3 4 5