สร้างตารางโดยเขียน Code เอง

จริงๆแล้วหากเราใช้โปรแกรม Dreamweaver ในการสร้างเว็บไซต์ โปรแกรมจะมีเมนูสร้างตารางมาให้เราเสร็จสรรพ์ แต่ถ้าถามว่าหากต้องการสร้าง table จากการเขียน code เอง ทำได้ไหม .. บอกได้เลยว่าทำได้ครับ เขียน code ไม่กี่บรรทัดก็ได้ตารางที่เราต้องการแล้ว

tag ที่เราจะต้องใช้ในบทความนี้คือ tag ที่ชื่อว่า <table> … </table> เป็นการบอกว่าใน tag นี้จะประกาศเป็นการสร้างตารางนะ คุณลักษณะปรกติของตารางคือมีแถวนอนและแถวตั้งแบบที่คนไทยเราเรียกกัน แต่หากเป็นสากลขึ้นมาหน่อยจะเรียกว่า row ( แถวนอน ) และ Column ( แถวตั้ง )

ซึ่งเราจะใช้ tag เพิ่มเติมสำหรับ row และ column ภายใน tag <table> ได้แก่

• <tr> ใช้ประกาศแถวแนวนอน หรือ Row
• <td> ใช้ประกาศแถวแนวตั้ง หรือ Column ซึ่งจะอยู่ใน tag <tr> อีกทีหนึ่ง

ตัวอย่าง

<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Table ตารางประกาศค่าเส้นขอบ = 1 พิคเซล มี <tr> 2 ครั้ง ก็คือมี 2 row ภายใน <tr> มี <td> อย่างละ 2 อัน สรุปตารางนี้คือมี 2 row 2 column จะเป็นตัวอย่างดังรูปภาพข้างล่างนี้ครับ

จะเห็นว่าการเขียน Code เองนั้นอาจจะมีความซับซ้อนนิดหน่อย เข้าใจได้ยากนิดนึงสำหรับมือใหม่ แต่ถ้าใช้โปรแกรม Dreamweaver ในการสร้างตารางก็จะง่ายกว่ามากครับ เพียงแค่เขียนว่าต้องการกี่ row จะเอากี่ column ใส่ค่าได้เลย

Jir4yu.