Table Object Properties

Previous >    <Next  

‎ويژگي هاي شئTable

‎شئTable كه درجاوااسكريپت ايجاد ميشود، مرتبط با يكي از عناصرHTML ‎<table>‎ ‎صفحه ميباشد .اين شئ داراي ويژگي هاي همان عنصر‎<table>‎ است كه ميتوان با فرمت ‎شئ گرائي با شئ مذكور روي آن اثر گذاشت .بعبارتي ميتوان مقادير ويژگيهاي آنرا تنظيم ويا بدست ‎آورد.

‎جدول ويژگي هاي شئTable مطابق زير بوده ، ودراين صفحه هركدام دربخش داخلي تشريح ميشوند.

‎ويژگي ‎شرح
align ‎توسطHTML 5 پشتيباني نمي شود .بجايش از style.cssFloat استفاده ميشود .
‎تراز جدول را تنظيم ويا برگشت ميدهد.
background ‎توسطHTML 5 پشتيباني نمي شود .بجايش ازstyle.background استفاده ميشود.
‎تصوير پس زمينه جدول را تنظيم ويا برگشت ميدهد.
bgColor ‎توسطHTML 5 پشتيباني نمي شود .بجايش ازstyle.backgroundColor استفاده ميشود.
‎رنگ پس زمينه جدول را تنظيم ويا برگشت ميدهد.
border ‎منسوخ شده است، بجايش ازstyle.border استفاده ميشود.
‎عرض حاشيه جدول را تنظيم ويا برگشت ميدهد.
caption ‎عنوان جدول كه در عنصر‎<caption>‎ جدول قرار دارد، برگشت ميدهد .
cellPadding ‎توسطHTML 5 پشتيباني نمي شود .بجايش ازstyle.padding استفاده ميشود.
‎فضاي مابين مرز ومحتوي سلولهاي جدول را تنظيم ويا برگشت ميدهد.
cellSpacing ‎توسطHTML 5 پشتيباني نمي شود .بجايش ازstyle.borderSpacing استفاده ميشود.
‎فضاي مابين سلولهاي جدول را تنظيم ويا برگشت ميدهد.
frame ‎توسطHTML 5 پشتيباني نمي شود.
‎مرزهاي بيروني جدول را تنظيم ويا برگشت ميدهد.
height ‎توسطHTML 5 پشتيباني نمي شود .بجايش ارstyle.height استفاده شود .
‎ارتفاع جدول را تنظيم ويا برگشت ميدهد.
rules ‎توسطHTML 5 پشتيباني نمي شود.
‎نوع مرز داخلي بين سلولهاي جدول را تنظيم ويا برگشت ميدهد.
summary ‎توسطHTML 5 پشتيباني نمي شود.
‎شرح خلاصه داده هاي جدول را تنظيم ويا برگشت ميدهد.
tFoot ‎عناصريكه در عنصر‎<tfoot>‎ جدول قرار دارد، برگشت ميدهد.
tHead ‎عناصريكه در عنصر‎<thead>‎ جدول قرار دارد، برگشت ميدهد.
width ‎توسطHTML 5 پشتيباني نمي شود .بجايش ارstyle.width استفاده شود.
‎عرض جدول را تنظيم ويا برگشت ميدهد.

‎ويژگيTable background

‎اين ويژگي پس زمينه عنصري را تنظيم ويابرگشت ميدهد .اين ويژگي خودشامل هشت ويژگي ميباشد .اين ‎توسطHTML5 پشتيباني نمي شود وبجايش از style.background استفاده ميشود .

‎مثال ـ تنظيم پس زمينه يك سند .استايل روي عنصر‎<body>‎ 

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

--(go to editor for change code and run)

‎با استفاده از اين ويژگي، ميتوان يك يا چند مورد زيرا به هرترتيبي تنظيم ويا برگرداند.

‎ويژگيdom ‎ويژگيcss
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundPosition background-position
backgroundOrigin background-origin
backgroundRepeat background-repeat
backgroundSize background-size

‎ويژگي هاي بالا را ميتوان با ويژگي هاي سبك جداگانه نيز تنظيم كرد .استفاده از ويژگي هاي ‎جداگانه براي نويسندگان كم تجربه براي كنترل بهتر بسيار توصيه مبشود.

‎فرمت استفاده ـSyntax

‎فرمت برگشت ويژگي object.style.background

‎فرمت تنظيم ويژگي

object.style.background = "color image repeat attchment position size origin clip |intial |inherit"

‎مقادير ويژگي ـProperty Values

‎مقدار ‎شرح
attachment ‎وضعيت ثابت بودن ويا اسكرولي تصوير را مشخص ميكند
clip ‎ناحيه نقاشي يك تصوير پس زمينه را تنظيم ميكند.
color ‎رنگ پس زمينه يك عنصر را تنظيم ميكند
image ‎يك تصوير را براي پس زمينه عنصري تنظيم ميكند.
origin ‎موقعيت ناحيه پس زمينه را تنظيم ميكند.
position ‎نقطه شروع تصوير پس زمينه را تنظيم ميكند.
repeat ‎نحوي تكرار تصوير پس زمينه را مشخص ميكند.
size ‎اندازه تصوير پس زمينه را تنظيم ميكند.
initial ‎اين ويژگي را به مقدار پيش فرض خود تنظيم ميكند.
inherit ‎ويژگي را از والد خود بارث ميبرد

‎ويژگيTable bgcolor

‎اين ويژگي رنگ پس زمينه جدول را تنظيم ويا برگشت ميدهد .اما درHTML5 پشتيباني نميشود و ‎بجايش ازstyle.backgroundColor استفاده ميشود .

‎مثال ـ رنگ پس زمينه يك سند را تنظيم ميكند .عنصر‎<body>‎ 

document.body.style.backgroundColor = "red";

--(go to editor for change code and run)

style.backgroundColor‎ميتواند براي رنگ پس زمينه عناصر مختلف بكار گرفته شود .

‎فرمت استفادهSyntax -‎

‎فرمت برگشت ويژگي
object.style.backgroundColor

‎فرمت تنظيم ويژگي
object.style.backgroundColor= "color |transparent |initial |inherit"

‎مقادير ويژگي ـProperty Values

‎مقدار ‎شرح
color ‎اين مقدار رنگ پس زمينه مشخص ميكند.
transparent ‎پيش فرض است .رنگ شفاف
initial ‎انرا به مقدار پيش فرض تنظيم ميكند.
inherit ‎رنگرا از والد خود بارث ميبرد

‎ويژگيTable caption

‎ويژگيTable caption محتوي عنصر‎<caption>‎ مرتبط با شئ Table را برگشت ‎ميدهد .بعبارتي عنوان جدول برگشت ميشود.

‎مثال ـ متن داخل عنصر‎<caption>‎ از جدول با id="myTable‎"‎در پيغام نمايش ميشود .

alert(document.getElementById("myTable").caption.innerHTML);

--(go to editor for change code and run)

‎توجه ـ تگ‎<caption>‎ بايد بلافاصله بعد از عنصر ‎<table>‎ قرار گيرد . ‎براي هر جدول فقط يك عنوان ميتوان تعريف نمود وآن بصورت پيش فرض در مركز وبالاي جدول نمايش ‎ميشود.

‎فرمت استفاده ـSyntax

‎فرمت برگشت ويژگي
tableObject.caption

‎ويژگيTable cellPadding

‎ويژگيTable cellPadding فاصله بين مرز سلول ومحتوي آنر مشخص ميكند .اين ويژگي در HTML5 ‎پشتيباني نميشود و بجايش از‎style.padding‎ استفاده ميگردد .

‎روال استفاده اين ويژگي براي عناصر مختلف مشابه است، مثال روي عنصر‎<div>‎ ميباشد

‎مثال ـ فاصله بين مرز‎<div>‎ ومحتوي آنر تنظيم ميكند .

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

--(go to editor for change code and run)

‎اين ويژگي ميتواند از يك تا چهار مقدار داشته باشد.

‎ويژگيmargin و padding هر دو فضاي اطراف يك عنصر را مشخص ميكنند .اما تفاوتي در آنها وجود ‎دارد .ويژگيmarign فضاي بيروني مرز و ويژگي padding فضاي داخلي مرز را معرفي مينمايند .

‎فرمت استفاده ـSyntax

‎فرمت برگشتي ويژگي
object.style.padding

‎فرمت تنظيم ويژگي
object.style.padding= "% | length |initial | inherit"

‎مقادير ويژگي ـProperty Values

‎مقدار ‎شرح
% ‎مقدار براساس درصدي از عرض عنصر والد
length ‎فضاي اطراف به واحد طول تعريف ميشود
initial ‎مقادير به پيش فرض آن تنظيم ميگردد.
inherit ‎مقاديررا از عنصر والد بارث ميبرد .تنظيم مطابق مقادير عنصروالد

‎مثال ـ نمايش اختلاف مابينpadding و margin 

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}

function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

--(go to editor for change code and run)

‎ويژگيTable cellSpacing

‎ويژگيTable cellSpacing فاصله بين سلول ها را مشخص ميكند .اين ويژگي درHTML5 ‎پشتيباني نميشود و بجايش از‎style.borderSpacing‎ استفاده ميگردد.

‎توجه ـ اگرborderCollapse روي اجتماع شدن تنظيم شده باشد، اين ويژگي در آنها تاثير ندارد .

‎مثال ـ تنظيم فاصله بين سلولها در جدول

document.getElementById("myTable").style.borderSpacing = "20px";

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

‎فرمت برگشتي ويژگي
object.style.borderSpacing

‎فرمت تنظيم ويژگي
object.style.boderSpacing= "length length|initial |inherit"

‎مقادير ويژگي ـProperty Values

‎مقدار ‎شرح
length
length 		‎فاصله بين سلولها را در واحد طول مشخص ميكنند.
‎مقدار منفي مجاز نيست وپيش فرض آنها صفر است
  • ‎اگر يك مقدار برايlength اعلام شود ، مقدار براي افقي وعمودي منظور ميشود .
  • ‎اگر براي آن دو مقدار اعلام شود، اولين مقدار براي افقي ودومي براي عمودي منظور ميشود.
initial ‎ويژگي را به پيش فرض آن تنظيم ميكند.
inherit ‎مقدار ويژگي را از والد بارث ميبرد.

‎مثال ـ دريافت فاصله بين سلولهاي يك جدول

--(go to editor for change code and run)

<>

‎ويژگيTable height

‎ويژگيTable height ارتفاع عنصر‎<table>‎ مرتبط با شئTable تنظيم و.يا برگشت ‎ميدهد .اين ويژگي توسطHTML5 پشتيباني نميشود .بجايش از style.height استفاده ميشود .

‎ويژگيstyle.height براي عناصرمختلف وجود دارد، بهمين دليل مثال با عنصر دكمه ارائه ميشود.

‎مثال ـ تنظيم ارتفاع عنصر‎buttom>‎ 

document.getElementById("myBtn").style.height = "50px";

--(go to editor for change code and run)

‎ويژگي ارتفاع فقط روي عناصر سطح بلوك‎(block-‎level)‎ يا عناصر با موقعيت مطلق يا ‎ثابت تاثير دارد .محتوي سر ريز را ميتوان با ويژگيoverflow مديريت كرد .

‎فرمت برگشتي ويژگي
object.style.height

‎فرمت تنظيم ويژگي
object.style.height= "% |length length|initial |inherit | auto"

‎مقادير ويژگي ـProperty Values

‎مقدار ‎شرح
auto ‎مرورگر ارتفاع را تنظيم ميكند .پيش فرض
length ‎ارتفاع را در واحد طول معرفي ميكند.
% ‎ارتفاع درصدي از ارتفاع عنصر والد
initial ‎ويژگي را به پيش فرض آن تنظيم ميكند.
inherit ‎مقدار ويژگي را از والد بارث ميبرد.

‎مثال ـ تغيير ارتفاع عنصر‎<div>‎ 

document.getElementById("myDIV").style.height = "500px";

--(go to editor for change code and run)

‎ويژگيTable tFoot

‎ويژگيHTML tFoot فهرستي از عناصر‎<tfoot>‎ مرتبط باشئ Table را برگشت ميدهد . ‎شئTable مرتبط بعنصري ازنوع ‎<table>‎ است، كه فهرست برگشتي مرتبط با اين عنصر ‎ميباشد.

‎مثال ـ پيغلم فهرست‎<tfoot>‎ از جدول 

alert(document.getElementById("myTable").tFoot.innerHTML);

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

‎فرمت برگشت ويژگي
tableObject.tFoot

‎ويژگيTable tHead

‎ويژگيHTML tHead فهرستي از عناصر‎<thead>‎ مرتبط باشئTable را برگشت ميدهد. . را برگشت ميدهدTable مرتبط باشئ<thead> فهرستي از عناصرHTML tHead ويژگي ‎ميباشد.

‎مثال ـ پيغلم فهرست‎<theah>‎ از جدول

alert(document.getElementById("myTable").tHead.innerHTML);

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

‎فرمت برگشت ويژگي
tableObject.tHead

<>

‎ويژگيTable width

‎ويژگيTable width عرض عنصر‎<table>‎ مرتبط با شئTable تنظيم و.يا برگشت ‎ميدهد .اين ويژگي توسطHTML5 پشتيباني نميشود .بجايش ازstyle.width استفاده ميشود.

‎ويژگيstyle.width براي عناصرمختلف وجود دارد، بهمين دليل مثال با عنصر دكمه ارائه ميشود.

‎مثال ـ تنظيم عرض عنصر‎buttom>‎ 

document.getElementById("myBtn").style.width = "300px";

--(go to editor for change code and run)

‎ويژگيucq فقط روي عناصر سطح بلوك ‎(block-‎level)‎ يا عناصر با موقعيت مطلق يا ‎ثابت تاثير دارد .محتوي سر ريز را ميتوان با ويژگيoverflow مديريت كرد .

‎فرمت برگشتي ويژگي
object.style.width

‎فرمت تنظيم ويژگي
object.style.width= "% |length length|initial |inherit | auto"

‎مقادير ويژگي ـProperty Values

‎مقدار ‎شرح
auto ‎مرورگر عرض را تنظيم ميكند .پيش فرض
length ‎عرض را در واحد طول معرفي ميكند.
% ‎عرض درصدي از عرض عنصر والد
initial ‎ويژگي را به پيش فرض آن تنظيم ميكند.
inherit ‎مقدار ويژگي را از والد بارث ميبرد.
Previous >    <Next