border-width:توسط این خاصیت می توان ضخامت خطوط حاشیه را به وسیله یکی از حالت های زیر تعیین کرد :
– thin : در این حالت خطوط حاشیه نازک خواهند بود .
– medium : در این حالت خطوط حاشیه متوسط خواهند بود .
– thick : در این حالت خطوط حاشیه ضخیم خواهند بود .
– length : در این حالت صخامت خطوط حاشیه را بر حسب واحدی مثل پیکسل ( pixel ) یا نقطه ( pt ) تعیین می کنیم .
border-style:توسط این خاصیت می توان حالت خطوط حاشیه را بر حسب یکی از حالت های زیر تعیین کرد :
– none : در این حالت هیچ خطی به عنوان خطوط حاشیه عنصر نمایش داده نمی شود .
– hidden : در این حالت خطوط حاشیه مخفی هستند .
– dotted : در این حالت خطوط حاشیه به صورت نقطه نقطه نمایش داده می شوند .
– dashed : در این حالت خطوط حاشیه به صورت بریده بریده نمایش داده می شوند .
– solid : در این حالت خطوط حاشیه به صورت معمولی نمایش داده می شوند .
– doubled : در این حالت خطوط حاشیه به صورت دو خطی نمایش داده می شوند .
– groove : در این حالت خطوط حاشیه به صورت ۳D نمایش داده می شوند که معمولا خطوط بالایی و سمت چپ پر رنگ تر از خطوط دیگر هستند .
– ridge : در این حالت خطوط حاشیه به صورت ۳D با طیف رنگی نمایش داده می شوند .
– inset : در این حالت خطوط حاشیه به صورت ۳D نمایش داده می شوند که معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگر هستند .
– outset : در این حالت خطوط حاشیه به صورت ۳D نمایش داده می شوند که معمولا خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگر هستند .
border-color:تعیین کننده رنگ خطوط حاشیه است . رنگ میتواند به روش های زیر تعیین شود :
- نام رنگ مثل blue یا red .
- تعیین رنگ به وسیله تابع rgb به صورت زیر :
( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb
این تابع مقدار ۳ رنگ را با هم ترکیب کرده و یک رنگ را ایجاد می کند .که مقدار رنگ توسط عددی بین ۰ تا ۲۵۵ تعیین می شود ، که هر چه عدد بزرگتر باشد میزان آن رنگ در کل رنگ بیشتر خواهد بود .
Example : rgb (10,65,232) - نعیین رنگ به صورت عددی ترکیبی در مبنای ۱۶ هگزادسیمال :
میزان رنگ آبی میزان رنگ سبز میزان رنگ قرمز #
Example : #08FF00
در مثال زیر به یک جدول و خانه های آن خاصیت border داده ایم . در حالت اول به صورت تکی و در حالت دوم به صورت خاصیت چند مقداری این کار را کرده ایم . در خاصیت border بهتر است به صورت چند مقداری عمل کنیم .
نکته مهم : در جدول باید خاصیت border را بر هر یک از خانه های جدول ( تگ td ) به صورت جداگانه اعمال کنیم . خواص هر خانه می تواند کاملا با دیگران متفاوت باشد .
مثال۱:
< table cellspacing=”0″ style=”border-color: Blue; border-style: solid; border-width: medium; width: 500px” > < tr > < td style=”border-color: Blue; border-style: solid; border-width: medium” > Cell 1 < /td > < td style=”border-color: Green; border-style: solid; border-width: medium” > Cell 2 < /td > < /tr > < /table >
|
مثال۲:
< table cellspacing=”0″ style=”border: solid medium blue ; width: 500px” > < tr > < td style= “border: solid medium blue” > Cell 1 < /td > < td style= “border: solid medium green” > Cell 2 < /td > < /tr > < /table > |
مثال۳:
< table cellpadding=”5″ cellspacing=”5″ style=”border: solid medium blue; width: 500px” > < tr > < td style=”border: solid thin blue” > Cell 1 solid , thin < /td > < td style=”border: dashed medium blue” > Cell 2 dashed , medium < /td > < td style=”border: double thick maroon” > Cell 3 double , thick < /td > < /tr > < tr > < td style=”border: dotted thick green” > Cell 4 dotted , thick < /td > < td style=”border: outset medium green” > Cell 5 outset , medium < /td > < td style=”border: inset medium red” > Cell 6 inset , medium < /td > < /tr > < tr > < td style=”border: ridge medium red” > Cell 7 ridge , medium < /td > < td style=”border: groove medium red” > Cell 8 groove , medium < /td > < td style=”border: hidden medium blue” > Cell 9 hidden , medium < /td > < /tr > < /table > |