ตาราง ตอนที่ 4



การจัดตำแหน่งข้อมูลตามแนวนอน (Align)
การจัดตำแหน่งให้ข้อมูลนั้น เราสามารถใช้แอตทริบิวต์ Align กับแทก <TD> เช่น
หากต้องการให้ข้อความอยู่ทางด้านซ้าย(ซึ่งปกติข้อความจะอยู่ทางด้านซ้ายเสมอ) ให้ใช้ <TD Align=Left> ... </TD>
หากต้องการให้ข้อความอยู่ทางด้านขวา ให้ใช้ <TD Align=Right> ... </TD>
หากต้องการให้ข้อความอยู่ทางตรงกลาง ให้ใช้ <TD Align=Center> ... </TD>

ตัวอย่าง

Source

<Table Border=1 width=100%>
<Tr>
<Td Align=left width=33%>Left Alignment</font></Td>
<Td Align=center width=33%>Center Alignment</font></Td>
<Td Align=right width=33%>Right Alignment</font></Td>
</tr>
</Table>

View


Left Alignment Center Alignment Right Alignment




การจัดตำแหน่งข้อมูลตามแนวตั้ง (Valign)
เราสามารถใช้แอตทริบิวต์ Valign เพื่อใช้ในการจัดตำแหน่งข้อมูล ในแนวตั้งได้ ซึ่งมีสามระดับคือ บน กึ่งกลาง และล่าง
หากต้องการให้ข้อมูลอยู่ด้านบนของตาราง ใช้ <TD Valign=Top>
หากต้องการให้ข้อมูลอยู่กึ่งกลางของตาราง ใช้ <TD Valign=Middle>
หากต้องการให้ข้อมูลอยู่ด้านล่างของตาราง ใช้ <TD Valign=Bottom>

ตัวอย่าง

Source

<Center>
<Table border>
<tr>
<td RowSpan=4 Valign=Top>Top Alignment</td>
<td RowSpan=4 Valign=Middle>Middle Alignment</td>
<td RowSpan=4 Valign=Bottom>Bottom Alignment</td>
</tr>
<tr><td>Data 4</td><td>Data 5</td><td>Data 6</td></tr>
<tr><td>Data 7</td><td>Data 8</td><td>Data 9</td></tr>
<tr><td>Data 10</td><td>Data 11</td><td>Data 12</td></tr>
</Table>

View

Top Alignment Middle Alignment Bottom Alignment
Data 4Data 5Data 6
Data 7Data 8Data 9
Data 10Data 11Data 12