Light mode Dark mode

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..