info@rightechco.com
ارسال توسط Saber

آموزش استایل دهی به جداول در CSS

CSS, طراحی سایت ۰

 آموزش استایل دهی به جداول در CSS

 

در این مبحث در مورد جداول  ، نحوه نمایش جداول در CSS و محتویات آن صحبت می کنیم.

Tabels

 

border-collapse :

این خاصیت مدل حاشیه را برای تگ table مشخص میکند.

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

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

collapsing : در صورت استفاده از این مقدار فاصله بین خانه های جدول و حاشیه های انها قرار نمیگیرد.

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

#result {
border-collapse:separate ;
border-spacing:1em 0.5em ;
}

 

در مثال بالا میزان 1em فاصله افقی را و میزان 0.5em فاصله عمودی را در بین خانه های جدول تعیین میکند.

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

Empty-cells :

با استفاده از این خاصیت می توانید تعیین کنید که آیا رنگ پس زمینه و حاشیه های خانه هایی که محتویات ندارند نمایش داده شوند یا خیر. این خاصیت تنها زمانی استفاده می گردد که خاصیت separate برای جدول استفاده کرده باشیم . اما در مقدار collapsing در نظر گرفته نمی شود.

خاصیت Empty-cells دارای مقادیر زیر می باشد:

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

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

caption-side :

این خاصیت مکان عنوان جدول را در جهت عمودی مشخص می کند،اما اگر خواسته باشید مکان افقی را تعیین نمایید می توانید از خاصیت text-align استفاده نمایید.

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

top: این مقدار مکان متن را در بالا قرار می دهد.

bottom: این مقدار مکان متن را در پایین قرار می دهد.

inherit: این مقدار ، مقدار پیش فرض این خاصیت است.

ارسال توسط Saber

آموزش جدول در HTML

HTML, طراحی سایت ۰

آموزش جدول در HTML

جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب <table> ایجاد می شوند که در آن برچسب <tr> برای ایجاد ردیف ها و برچسب <td> برای ایجاد داده های سلول ها استفاده می شوند.

مثال:

<!DOCTYPE html>
<html> 
<head> 
<title>HTML Table Cellpadding</title> 
</head> 
<body> 
<table border=”1″ cellpadding=”5″ cellspacing=”5″> 
<tr> <th>Name</th> <th>Salary</th> </tr> 
<tr> <td>Ali</td> <td>5000</td> </tr>
<tr> <td>Reza</td> <td>7000</td> </tr> 
</table> 
</body> 
</html> 

 

در اینجا border یک ویژگی از برچسب <table> می باشد و برای قرار دادن حاشیه در پهنای همه ی سلول ها استفاده می شود. اگر به حاشیه احتیاج نداشته باشید می توانید از border=”0″ استفاده کنید.

تیتر جدول

تیتر جدول می تواند با استفاده از برچسب <th> تعریف شود. این برچسب برای جایگزینی با برچسب <td> استفاده می شود که برچسب <td> برای نمایش داده ی حقیقی سلول استفاده می شود. طبیعتا شما ردیف های بالای جدول را به عنوان تیتر قرار می دهید.

ویژگی های cellpadding و cellspacing

دو ویژگی به نام های Cellpadding و Cellspacing وجود دارند که برای تنظیم محیط سفید در سلول های جدول استفاده می شوند. ویژگی cellspacing عرض حاشیه را تعریف می کند، در حالیکه cellpadding فاصله ی بین حاشیه ی سلول و محتوای آن را تعریف می کند.

ویژگی های colspan و rowspan

اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.

پس زمینه ی جدول

می توانید به دو روش زیر برای جدول خود زمینه ای تنظیم کنید .
ویژگی Bg color می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
ویژگی background می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.
همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.

طول و عرض جدول

شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.

شرح جدول

برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.

تیتر، بدنه و پاورقی جدول

جدول ها می توانند به سه بخش تقسیم شوند تیتر، بدنه و پاورقی جدول. عنوان و فوت (tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد.

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

  • <thead> برای ایجاد یک تیتر مجزا
  • <tbody> برای نشان دادن بدنه ی اصلی جدول
  • <tfoot> برای ایجاد یک پاورقی مجزا در یک جدول

یک جدول برای نشان دادن صفحات و گروه های مختلف یک داده، ممکن است دارای عناصر <tbody> مختلفی باشد، اما ظاهر شدن برچسب های <thead> و <tfoot> قبل از <tbody> زیاد مهم نیست.