จัดตำแหน่งข้อมูล align&valign

การจัดตำแหน่งข้อมูลในตาราง (align,valign)

    1. การจัดตำแหน่งข้อมูลแนวนอน (align)

            เราสามารถจัดตำแหน่งข้อมูลในตารางให้ชิดซ้าย ชิดขวา หรืออยู่กึ่งกลางของช่องตาราง ได้ด้วย แอททริบิวท์ align โดยมีรูปแบบการใช้งานดังนี้

 

ตัวอย่างการจัดตำแหน่งข้อมูลแนวนอน (align)

<body>

<table border="2" width="300" height="200">

     <tr align="left">  <td> left </td>   <td> left </td>  </tr>

    <tr align="center"> <td> center </td> <td> center </td> </tr>

     <tr align="right">  <td> right </td>  <td> right </td> </tr>

</table>

</body>

 

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

 

ข้อมูลในช่องเซลล์ถูกจัดตำแหน่งแนวนอนตามค่าที่กำหนด

    2. การจัดตำแหน่งข้อมูลแนวตั้ง (valign) 

            เราสามารถจัดตำแหน่งข้อมูลในตารางให้ชิดขอบบน ชิดขอบล่าง หรืออยู่กึ่งกลางของช่องตาราง ได้ด้วยแอททริบิวท์ valign โดยมีรูปแบบการใช้งานดังนี้ 

ตัวอย่างการจัดตำแหน่งข้อมูลแนวตั้ง (valign)

<body>

      <table border="2" width="300" height="200">

  <tr valign="top">    <td> top </td> <td> top </td>     </tr>

  <tr valign="middle"> <td> middle </td> <td> middle </td>  </tr>

  <tr valign="bottom"> <td> bottom </td> <td> bottom </td>  </tr>

     </table> 

</body>

 

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

 

ข้อมูลในช่องเซลล์ถูกจัดตำแหน่งแนวตั้งตามค่าที่กำหนด