Jir4yu.me

ความรู้สึก.. ที่ตอนไหนๆก็(ไม่)เหมือนกัน

วิธีสร้าง ตาราง Table ด้วยภาษา HTML

สร้างตารางโดยเขียน 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.

Jirayu Limjinda

ถ้าไม่รู้จักกัน บางทีคุณอาจจะไม่เข้าใจกับสิ่งที่ผมทำ.. กลับกัน ถ้าคุณรู้จักผมดี คุณจะไม่ต้องเอ่ยปากถามเลยว่าทำไม

แสดงความคิดเห็นของคุณที่นี่

loading, please wait..

loading, please wait..