در مقاله قبل به صورت مقدماتی با جداول در html آشنا شدید.در این مقاله می خواهیم در مورد ویژگی هایی (attributes ) که در تگ table می توان استفاده کرد صحبت کنیم.

نکته : بسیاری از این خواص در html5 منسوخ شده اند و توصیه می شود از css به جای آنها استفاده شود اما از انجا که هنوز مقالات آموزش کار با css را تهیه نکرده ایم این خواص را اینجا معرفی خواهیم کرد و در مقالات مرتبط در آموزش CSS نحوه استایل دادن به جداول با استفاده از css را آموزش خواهیم داد.

نکته 2 :مثال هایی که در این مقاله استفاده می کنیم،به صورت خلاصه و صرفا برای آشنایی با نحوه استفاده از این ویژگی ها می باشد و آنها را به صورت عملی در مرورگر اجرا نخواهیم کرد.

ویژگی align

ویژگی align در یک جدول، تنظیم کننده موقعیت آن در سمت راست، چپ یا وسط صفحه (یا عنصری که جدول درون آن قرار گرفته ) است.این ویژگی یک از سه مقدار زیر را می تواند بپذیرد:

• center : قرار گرفتن جدول در وسط
• left : قرار گرفتن جدول در سمت چپ
• right : قرار گرفتن جدول در سمت راست

مثال :

<table align="right"></table>

ویژگی title

از ویژگی title برای ایجاد یک متن جهت معرفی جدول استفاده می شود، این متن در هنگامی که ماوس را داخل آن جدول ببریم، به صورت یک بالن (tooltip) در کنار نشانه گر ظاهر می شود.

<table title="this is a table"></table>

ویژگی dir

جهت قرارگیری خانه های داخل جدول را مشخص می کند و می تواند یکی از مقادیر rtl یا ltr را اختیار کند.اگر می خواهید خانه های جدول از راست به چپ چیده بشوند مقدار این ویژگی را rtl تنظیم کنید در غیر اینصورت مقدار آن را ltr قرار دهید.به طور پیش فرض خانه های جدول هم جهت با چینش عناصر والد خود،تراز می شوند.

<table dir="rtl"></table>

ویژگی summary

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

<table dir="rtl" summary="this is an example of tables in html"></table>

ویژگی width

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

<table border="2" cellpadding="10" cellspacing="10" width="500"></table>

در این مثال عرض جدول خود را 500 پکسل تعیین کرده ایم.می توانیم از واحدهای پیکسل و درصد برای تعیین عرض جدول خود استفاده کنیم.

<table border="2" cellpadding="10" cellspacing="10" width="50%"></table>

در این مثال جدولی با عرض نصف والد خود ایجاد کرده ایم.

ویژگی height

این ویژگی نیز یک مقدار عددی را می پذیرد و ارتفاع جدول را برحسب px یا درصد مشخص می کند.

<table border="2" cellpadding="10" cellspacing="10" height="600"></table>

ویژگی background

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

<table background="../images/myImage.png"></table>

ویژگی bgcolor

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

<table bgcolor="red"></table>

ویژگی bordercolor

ویژگی bordercolor رنگ خط حاشیه جدول و سلول های داخلی آن را مشخص می کند.

<table border="2" bgcolor="red" bordercolor="blue"></table>

علاوه بر ویژگی bordercolor دو ویژگی bordercolordark و bordercolorlight نیز وجود دارد که فقط در مرورگر اینترنت اکسپلورر پشتیبانی می شود، bordercolordark رنگ زاویه پائینی جدول و bordercolorlight رنگ زاویه بالایی آن را تنظیم می کند.

نحوه استفاده از این دو ویژگی نیز مشابه سایر ویژگی ها می باشد.

<table border="1" bordercolordark="Blue" bordercolorlight="red"></table>

ویژگی cellpadding

این ویژگی یک مقدار عددی می پذیرد و میزان فاصله محتوای سلول ها، از خطوط کناری (حاشیه) را بر حسب پیکسل مشخص می کند، هر چه مقدار آن بیشتر باشد، فضای داخلی سلول ها نیز بیشتر شده و محتوای درون آنها با فاصله بیشتری از خطوط دربرگیرنده، نمایش داده می شود.

<table border="2" bordercolor="red" cellpadding="10"></table>

در این مثال مقدار ویژگی cellpadding را 10 قرار دادیم،بنابراین محتوای هر کدام از خانه های جدول،10 پیکسل از حاشیه خود فاصله خواهند گرفت.(10 پیکسل از چپ،10 پیکسل از راست،10 پیکسل از بالا و 10 پیکسل از پایین یعنی مجموعا 40 پیکسل فضای خالی اطراف محتوای هر کدام از خانه های جدول ایجاد خواهد شد).

ویژگی cellspacing

این ویژگی نیز یک مقدار عددی را می پذیرد و میزان فاصله بین سلول های جدول را بر حسب پیکسل مشخص می کند.

<table border="2" cellpadding="10" cellspacing="10"></table>

ویژگی rules

با استفاده از این ویژگی می توانید تعیین کنید کدام یک از خطوط جداکننده عناصر جدول نمایش داده شوند.در حالت معمول، برای تمام سلول ها، ردیف ها و ستون ها، خطوط پیش فرض ترسیم می شود، اما با استفاده از این ویژگی می توانید رفتار پیش فرض مرورگر را تغییر دهید.مقادیری که این ویژگی می پذیرد عبارتند از :

• all : خطوط اطراف ستون ها و ردیف ها ایجاد می شود.
• cols : فقط خطوط مربوط به ستون ها ایجاد می شود.
• rows : فقط خطوط اطراف ردیف ها ایجاد می شود.
• groups : خطوط برای گروهی از ردیف ها یا ستون ها ایجاد می شود.
• none : هیچ خطی داخل جدول ایجاد نمی شود.

ویژگی frame

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

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

به این ترتیب با تمای ویژگی هایی که در تگ table می توان استفاده کرد آشنا شدید.البته مجددا این نکته را تکرار می کنیم که بسیاری از این ویژگی ها در html5 منسوخ شده اند و توصیه می شود که از سی اس اس برای استایل دادن به جدول خود استفاده کنید.برای مشاهده ویژگی هایی که در html5 پشتیبانی نمی شوند می توانید از این لینک استفاده کنید.

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه مقالات آموزش زبان HTML با ما همراه باشید.

کامنت جدید ...