Attribute ها در جداول

در سلسله آموزشهای طراحی سایت آنلاینر به ادغام سلول ها در HTML پرداختیم.

در این مقاله قصد بررسی Attribute ها در جداول  را داریم.

border:

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

cellpadding:

این صفت باعث میشود محتوای سلول به اندازه مورد نظر از کادر فاصله بگیرد. مثال زیر باعث میشود متن به اندازه 5 پیکسل از کنار سلول فاصله بگیرد.

[html]
[/html]

cellspacing:

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

مثال:

[html]

[/html]

align:

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

right برای راست چین کردن، left برای چپ چین کردن، center نیز برای وسط چین کردن استفاده میشود.

valign:

این صفت نیز برای ترازبندی متن سلول های جدول استفاده میشود ولی در جهت عمودی سلول،مقادیری که میتواند این صفت دریافت کند عبارتند از:

top : برای بالا چین کردن متن در سلول استفاده میشود.

middle:این مقدار برای وسط چین کردن متن در سلول استفاده میشود.

bottom: و در آخر نیز نیز این مقدار برای پایین چین کردن متون سلول استفاده میشود.

نکته : میتوانید متن های یک سلول را وسط چین در راستای افقی و پایین چین در راستای عمودی قرار دهید برای این کار میتوانید از کد زیر استفاده نمایید.

[html]

[/html]

bordercolor:

این صفت برای تعیین رنگ اصلی کادر جدول بکار میرود.میتوانید رنگ مورد نظر خود را با رنگ ثابت (red,blue,black) ویا کد رنگ (#333) تعیین نمایید.

مثال زیر رنگ کادر جدول را زرد میکند.

[html]</pre>
[/html]

cordercolorlight:

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

bordercolordark:

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

به مثال زیر دقت کنید.

[html]</pre>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<pre>
[/html]

و در نهایت این نکته را نیز همیشه به یاد داشته باشید که اگر صفتی را به تگ table اختصاص دهید آن تگ به تمام عوامل داخل table نیز اختصاص داده میشود.

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

در آموزش بعد به سلول های خالی و ایجاد padding برای سلول ها میپردازیم.

با آنلاینر همراه شوید …

به این صفحه رتبه دهید
مشاوره رایگان
Scroll to Top