DOM แท็ก td
property
abbr
align
axis
cellIndex
className
colSpan
id
innerHTML
rowSpan
vAlign
width
abbr ข้อความชื่อย่อของแท็ก
td
ตัวอย่าง
<table id="table1" border="1" width="200">
<tr><td id="td1" abbr="td 1">a</td></tr>
<tr><td id="td2">b</td></tr>
</table>
<script type="text/javascript">
alert(document.all.td1.abbr);
</script>
จากตัวอย่างจะแสดง dialog เป็นค่า abbr ของ td1
align รับหรือตั้งค่าการเรียงข้อมูลภายในแท็ก
td
ตัวอย่าง
<script type="text/javascript">
function alignLeft()
{
document.all.td1.align="left";
document.all.td2.align="left";
}
function alignRight()
{
document.all.td1.align="right";
document.all.td2.align="right";
}
</script>
<table id="table1" border="1" width="200">
<tr><td id="td1" align="center">a</td></tr>
<tr><td id="td2" align="center">b</td></tr>
</table>
<input type="button" onclick="alignLeft()" value="Left"><br
/>
<input type="button" onclick="alignRight()" value="Right"><br
/>
ค่าที่เป็นไปได้คือ left | right | center
จากตัวอย่างจะกำหนดให้ชิดซ้ายหรือขวาตามการกดปุ่ม
axis ข้อความชื่อของแกนในแท็ก
td
ตัวอย่าง
<table id="table1" border="1" width="200">
<tr><td id="td1" axis="column 1">a</td></tr>
<tr><td id="td2" axis="column 2">b</td></tr>
</table>
<script type="text/javascript">
alert(document.all.td1.axis);
</script>
จากตัวอย่างจะแสดง dialog เป็นค่า axis ของ td1
cellIndex ค่าตัวเลขบอกว่าเป็น
column ที่เท่าไหร่
ตัวอย่าง
<table id="table1" border="1" width="200">
<tr><td id="td1">a</td></tr>
<tr><td id="td2">b</td></tr>
</table>
<script type="text/javascript">
alert(document.all.td1.cellIndex);
alert(document.all.td2.cellIndex);
</script>
จากตัวอย่างจะแสดง dialog เป็นค่า column ของ td1 และ td2 ตามลำดับเป็นค่า 0 และ
1
className รับหรือตั้งค่าของ
class
ตัวอย่าง
<table id="table1" cellspacing="10" class="class1">
<caption>caption ของ table</caption>
<tr><td id="td1" class="classTD1">a</td></tr>
<tr><td>b</td></tr>
</table>
<script type="text/javascript">
document.write(document.all.td1.className);
</script>
จากตัวอย่างจะพิมพ์ค่าของ className
colSpan รับหรือตั้งค่าของ
colspan
ตัวอย่าง
<script type="text/javascript">
function change()
{
document.all.td3.colSpan="2";
}
</script>
<table border="1">
<tr>
<td id="td1">a</th>
<td id="td2">b</th>
</tr>
<tr>
<td id="td3">c</td>
<td id="td4">d</td>
</tr>
</table>
<input type="button" onclick=change() value="change">
จากตัวอย่างจะเปลี่ยนค่าของ colSpan
id กำหนดหรือรับค่าid
ตัวอย่าง
<table border="1">
<tr>
<td id="td1">a</th>
<td id="td2">b</th>
</tr>
<tr>
<td id="td3">c</td>
<td id="td4">d</td>
</tr>
</table>
<script type="text/javascript">
document.write(document.all.td1.id);
</script>
จากตัวอย่างจะพิมพ์ข้อความว่า td1
innerHTML กำหนดหรือรับค่า
HTML ภายในแท็ก tr
ตัวอย่าง
<table border="1">
<tr>
<td id="td1">a</th>
<td id="td2">b</th>
</tr>
<tr>
<td id="td3">c</td>
<td id="td4">d</td>
</tr>
</table>
<script type="text/javascript">
alert(document.all.td1.innerHTML);
</script>
จากตัวอย่างจะพิมพ์ข้อความภายในแท็ก td1คือ a
rowSpan รับหรือตั้งค่าของ
rowspan
ตัวอย่าง
<script type="text/javascript">
function change()
{
document.all.td1.rowSpan="2";
}
</script>
<table border="1">
<tr>
<td id="td1">a</th>
<td id="td2">b</th>
</tr>
<tr>
<td id="td3">c</td>
<td id="td4">d</td>
</tr>
</table>
<input type="button" onclick=change() value="change">
จากตัวอย่างจะเปลี่ยนค่าของ rowSpan
vAlign กำหนดหรือรับค่าการจัดเรียงในแนวตั้ง
ตัวอย่าง
<script type="text/javascript">
function alignTop()
{
document.all.td1.vAlign="top";
document.all.td2.vAlign="top";
}
function alignBottom()
{
document.all.td1.vAlign="bottom";
document.all.td2.vAlign="bottom";
}
</script>
<table border="1">
<tr>
<td id="td1" height=100 width=100>a</th>
<td id="td2" height=100 width=100>b</th>
</tr>
<tr>
<td id="td3" valign=middle height=100 width=100>c</td>
<td id="td4" valign=middle height=100 width=100>d</td>
</tr>
</table>
<input type="button" onclick="alignTop()" value="alignTop"><br
/>
<input type="button" onclick="alignBottom()" value="alignBottom"><br
/>
ค่าที่เป็นไปได้คือ top | middle | bottom | baseline
จากตัวอย่างจะกำหนดให้ชิดบนหรือล่างตามการกดปุ่ม
colSpan รับหรือตั้งค่าของ
colspan
ตัวอย่าง
<script type="text/javascript">
function change()
{
document.all.td3.width="200";
}
</script>
<table border="1">
<tr>
<td id="td1">a</th>
<td id="td2">b</th>
</tr>
<tr>
<td id="td3">c</td>
<td id="td4">d</td>
</tr>
</table>
<input type="button" onclick=change() value="change">
จากตัวอย่างจะเปลี่ยนค่าของ width