(HTML) 테이블 글자 정렬에 대해 알아보자!

<table style="height: 200px;" border="1px;">
<tbody>
<tr>
<td align="left" valign="top">왼쪽 위</td>
<td align="left" valign="middle">왼쪽 가운데</td>
<td align="left" valign="bottom">왼쪽 아래</td>
</tr>
<tr>
<td align="center" valign="top">가운데 위</td>
<td align="center" valign="middle">가운데 가운데</td>
<td align="center" valign="bottom">가운데 아래</td>
</tr>
<tr>
<td align="right" valign="top">오른쪽 위</td>
<td align="right" valign="middle">오른쪽 가운데</td>
<td align="right" valign="bottom">오른쪽 아래</td>
</tr>
</tbody>
</table>

왼쪽 위	왼쪽 가운데	왼쪽 아래
가운데 위	가운데 가운데	가운데 아래
오른쪽 위	오른쪽 가운데	오른쪽 아래

위와 같이 자리 정렬하는 방식은 다음과 같습니다.

 

align = left, center, right

글자의 위치를 align를 사용하면 왼쪽 가운데 오른쪽으로 이동 시킬 수 있습니다.

 

valign = top, middle, bottom

반대로 valign를 사용할 경우 글자의 위쪽,가운데,밑쪽을 이동 시킬 수 있는데

 

여기서 align와 valign를 같이 사용하게 될 경우

 

align="left" valign="top"일 경우

위에 보이시는 테이블 처럼 왼쪽 위에 글자가 위치하게 됩니다.