สร้างตารางด้วย <table>

การสร้างตาราง <table>,<tr>และ<td>

        การนำเสนอข้อมูลในรูปแบบตารางจะช่วยให้ข้อมูลถูกจัดออกเป็นสัดส่วน ง่ายต่อการทำความเข้าใจ และเปรียบเทียบข้อมูลต่างๆได้ง่าย

        นอกจากนี้เราสามารถนำ ตารางมาใช้ในการจัดรูปแบบองค์ประกอบต่างๆภายในหน้าเว็บตามตำแหน่งที่เราต้องการ     ได้อีกด้วย ดังตัวอย่างต่อไปนี้

ตัวอย่างหน้าเว็บเพจที่นำตารางมาใช้ในการจัดองค์ประกอบหน้าเว็บ

แท็กคำสั่งต่างๆ ที่ใช้ในการสร้างตารางบนหน้าเว็บเพจ

 

ชื่อแท็ก 

Table,tr,td

ตำแหน่งของแท็ก  

รูปแบบการใช้              

Table อยู่ภายใน <body>..</body>

tr อยู่ภายใน <tabel>..</table>

td อยู่ภายใน <tr>..</tr>

**ตัวอย่าง**

<body>

   <table>

         <tr>  <td> ข้อมูล </td >  </tr>

   </table>

</body>

 ** จำนวน <tr>..</tr> คือจำนวนแถวในตาราง และจำนวน <td> .. </td > คือจำนวนคอลัมน์ในแต่ละแถว

 

  ตัวอย่างการใช้งาน

 

<body>

     <table>

<tr>  <td>  ข้อมูล1  </td>    <td>  ข้อมูล2  </td>  </tr>

<tr>  <td>  ข้อมูล3  </td>   <td>  ข้อมูล4  </td>  </tr>

    </table>

</body>  

 

          จากตัวอย่างจะเห็นว่ามี <tr>…</tr> อยู่ 2 แถว หมายความว่ามีการสร้างแถวอยู่ 2 แถว ในแต่ละแถวมี  <td>…</td> อยู่ 2 ชุดคำสั่งหมายถึงในแต่ละแถวมีการสร้างคอลัมน์อยู่ 2 คอลัมน์จากโค้ดคำสั่งนี้จะเป็นการสร้างตาราง ขนาด 2 แถว แถวละ 2 คอลัมน์

ผลลัพธ์ที่ได้

 

          ถ้าในแต่ละแถว กำหนดจำนวนคอลัมน์ไม่เท่ากัน ก็จะเกิดช่องว่างแทนที่ตรงตำแหน่งนั้นเช่นเราจะเพิ่มแถวที่ 3    แต่เพิ่มคอลัมน์แค่ 1 คอลัมน์ ดังนี้

 

<body >

     <table>

<tr> <td> ข้อมูล1 </td> <td> ข้อมูล2 </td> </tr>

<tr> <td> ข้อมูล3 </td> <td> ข้อมูล4 </td> </tr>

<tr> <td> ข้อมูล5 </td>  </tr>

    </table>

</body> 

 

ผลลัพธ์ที่ได้

 

        **จะเห็นว่าแถวที่ 3 มีการสร้างคอลัมน์ “ข้อมูล5” แค่คอลัมน์เดียวทำให้หลังคอลัมน์ “ข้อมูล5” เกิดช่องว่างที่ไม่สามารถเพิ่มข้อมูลได้