ویژگیborder

 

برای مشخص نمودن ویژگیهای خط دور جدول و سلولهایی که با td , th ایجاد می شوند بکار می رود

 

مثال 1:

table, th, td
{
border: 1px solid black;
}

در اینجا خط دور جدول یا table و خط دور سلولی که با td, th ساخته شده است با ویژگی border مشخص شده است :

به ترتیب : ضخامت خط دور برابر یک پیکسل

نوع خط دور یکپارچه یا solid

رنگ خط دور سیاه



مشاهده و اجرای برنامه کامل



همانطور که در اجرای برنامه کامل مشاهده نموده اید ، جدول ظاهرا دو خطه به نظر می رسد زیرا خط دور جدول با خط دور سلولها متفاوت است



ویژگیborder-collapse 

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

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


مثال 1:

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

مشاهده و اجرای برنامه کامل

ویژگی width , height

برای تنظیم عرض و ارتفاع جدول بکار می روند




مثال 1:

عرض جدول برابر صد در صدر صفحه وب و ارتفاع هر سلول آن که با تگ th ایجاد شده است برابر  برابر 50 پیکسل از کل  ارتفاع جدول خواهد شد

table
{
width:100%;
}
th
{
height:50px;
}

مشاهده و اجرای برنامه کامل



ویژگیtext-align

قالب بندی متن موجود در سلولهای جدول با ویژگیهای متن مثل text-align , vertical-align انجام می شود .

 


مثال 1:

td
{
text-align:right;
}

متن درون سلولی که با تگ td ساخته می شود در سمت راست آن سلول قرار می گیرد


مشاهده و اجرای برنامه کامل

 ویژگی text-alignment  می تواند مقادیر left, right, center را برای تراز افقی به خود بگیرد

 

مثال 2:

td
{
height:50px;
vertical-align:bottom;
}


ارتفاع سلولی که با تگ td ساخته می شود برابر 50 پیکسل و محتوای آن در راستای عمودی ، در پائین سلول قرار می گیرد

مشاهده و اجرای برنامه کامل

ویگی vetrical-align می تواند مقادیر زیر را برای تراز بندی در راستای عمودی داشته باشد :top, bottom,  middle

 



ویژگیpadding

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


مثال 1:

td
{
padding:15px;
}

فاصله حاشیه هر سلول از محتوای دورن ان برابر 15 پیکسل می شود


مشاهده و اجرای برنامه کامل

 

ویژگی color , background-color

از این ویژگیها برای تغییر رنگ متن و زمینه جدول یا سلولی از ان استفاده می شود


مثال 1:

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

قسمت قرمز شده نشان می دهد که رنگ زمینه سلول هایی که با تگ th ساخته می شوند برابر سبز و رنگ متن موجود در این سلولها برابر سفید باشد

 

مشاهده و اجرای برنامه کامل