Table Tutorial
Note: หรือถ้าลองทำแล้วไม่ work ให้เปลี่ยน &It ไปเป็นเครื่องหมายเปิดแทก "<" แทน ดู และให้ใช้กับ ทุกตัวอย่างในทุกบทเรียนเลยครับ.
&lttable> - Table: แทกนี้แหละคือการสร้างตาราง table. จะต้องเริ่มต้นและ จบแบบนี้เสมอ. และสามารถร่วมด้ายแทกต่อไปนี้:
border: กำหนอความกว้าง width ของขอบ border ที่ล้อมรอบตาราง table.
cellpadding: สามารถกำหนด value เป็นตั้งแต่ 1 ถึงอะไรก็ได้. มันคือระยะห่างระหว่าง  cell และความจุของมัน.
cellspacing: คือระยะห่างระหว่าง cell ทุกๆ cell.  สามารถกำหนด value เป็นตั้งแต่ 1 ถึงอะไรก็ได้.
width: กำหนดความกว้าง width, เป็น pixels, ของลักษณะของ frame.
align: กำหนดว่าจะให้ตาราง table แสดงผลเป็นแบบใด. สามารถกำหนด left, center, หรือ right.
border: กำหนดความกว้าง width, เป็น pixels, ของตัวตาราง table นั้น.
ตัวอย่างเช่น
&lttable align=center border=1 width=580 cellpadding=5 cellspacing=5></table>
 
ตอนนี้สำหรับ rows และ data ที่เป็นตัวกำหนดตาราง table.
&lttr> - Table Row
แทกนี้ required หรือจำเป็นต้องมีเสมอ เพราะมันบอกเบลาเซอร์ ว่าแถว row ใหม่ เริ่มตรงไหน. ซึ้งสามารถประกอบด้วยตัวเลือกต่อไปนี้:
align: adjusts the text or graphics in the row. It has the attributes left, center (or middle), and right.
valign: which stands for verticle align. This controls from top to bottom. It can include top, middle, bottom, and baseline. The row is then followed by...
bgcolor: defines the background color for the cell. Can be hexidecimal or RGB code.
bordercolor: defines the border color of the cell.
ตัวอย่างเช่น
&lttr align=middle valign=top bgcolor=#000000 bordercolor=#000080></tr>
 
&lttd> - Table Data
แทกนี้เป็นตัวกำหนดตัวของ cell เอง. สามารถใส่แทกฟอ์ม &lttr>, ร่วมด้วย แต่ก็สามารถใส่แทกต่อไปนี้ด้วยเช่นกัน:
align: จัดแถวตัวอักษร text หรือด้านแนวขนานของรูป graphics horizontally. สามารถกำหนดให้อยู่  left, middle, หรือ right ได้.
valign: จัดแถวตัวอักษร หรือด้านแนวดิ่งของภาพ graphics vertically. Can be left, middle, or right.
width: กำหนดความกว้าง width ของ cell เป็น pixels หรือ percentage.
height: กำหนดความสูง height ของ cell.
bgcolor: กำหนดสี background ของ cell ในโหมดสี Hexidecimal หรือ RGB.
background: ใส่ชื่อกำหนด image ให้เป็น background คล้ายๆ กับ &ltbody background ...> ทำงานใน body tag.
bordercolor: กำหนดสีของขอบ  border ของ cell. จะทำงานเฉพาะกับตารางที่มี border ตั้งแต่ 1 ขึ้นไป.
rowspan: กำหนดจำนวนกี่ rows ที่ cell ทอดข้าม span ขณะที่เปรียบเทียบกับ row อื่นๆ.
colspan: กำหนดจำนวนกี่ columns ที่ cell ทอดข้าม span ขณะเปรียบเทียบกับ row อื่นๆ
nowrap: ทำให้ตัวอักษร text ยังคงไม่มีสิ่งที่บรรจุต่อไป จาก table cells.
ตัวอย่างเช่น
&lttd width=300 height=300 rowspan=2 colspan=2 bgcolor=#000000 bordercolor=#000080 background="file.gif" nowrap></td>
 
&ltth> - Table Data
ก็คล้ายกับ &lttd>, แต่จะกำหนดให้ทุกอย่างภายใน cell ถูก center.
ตัวอย่างเช่น
&ltth width=300 height=300 rowspan=2 colspan=2 bgcolor=#000000 bordercolor=#000080 background="file.gif" nowrap></th>
 
&ltcaption> - The Caption
แทกนี้จะสร้างตารางที่มี caption. Duh!
ตัวอย่างเช่น

&lttable width=300 cellpadding=5 cellspacing=5 
border=5 align=middle>
&lttr> &lttd colspan=3 align=middle 
valign=middle> THIS RULES!!!
</td> </tr>

&lttr> &lttd align=middle valign=middle> 
Number 1
</td> 
&lttd align=middle valign=middle> 
Number 2
</td>
&lttd align=middle valign=middle> 
Number 3
</td> </tr>

&lttr> &lttd colspan=3 align=middle valign=middle> 
THAT'S IT!!!
</td> </tr> </table>


ลองเปรียบเทียบกับตัวอย่าง output นี้ดู:

THIS RULES!!!
Number 1 Number 2 Number 3
THAT'S IT!!!

จากสองสามตัวอย่างที่ผ่านมา เป็นไปได้ที่จะนำไปใช้จริง, ลองเซ็กภายในไซร์นี้ดู คุณจะพบว่ามี ต้วอย่างฟอร์มหลายตัว ที่คุณเลือกไปใช้ได้ หรือจำนำไปประยุกค์ใช้ กับ web editor โปรดของคุณก็ได้เช่นกัน. รับรองจะช่วยให้งานของคุณสะดวกขึ้น.

ผู้เขียนหว้งว่าคงสามารถตอบคำถามบางอย่างของคุณเกี่ยวกับตาราง tables ได้บ้างน๊ะครับ. ไม่มากก็น้อย เป็น tip ทีไม่ใช้เรื่องยากมากนัก แต่บางครั้งก็ทำให้คุณ เจ็บได้เหมือนกัน  เพียงแต่ลองเล่นกับมันแล้วคุณจะเข้าใจขึ้นเอง. เชื่อผู้เขียนเถาะ, ว่าคุณก็ทำได้.

Return Home

All Artwork & Design ฉ 1997-1999 Krit Spooker