HTML5] Table내 Cell Text 정렬

2014. 9. 16. 16:39 - Song's IT

셀 내부에 있는 텍스트를 좌우 그리고 가운데로 정렬하기 위해서는 align 속성의 left, right, center 를 지정합니다.



또한 셀 내부에 있는 텍스트를 위 아래 그리고 중앙으로 정렬하기 위해서는 valing 속성의 top, bottom, middle을 지정합니다.


 

텍스트 좌우 ,가운데 정렬하기

실행결과

<html>
<head></head>
<body> 
<table border=1 width=200>
<tr>
<td align=left>이름</td>
<td align=center>
학년 </td>
<td align=right>
책제목</td>
</tr>
</table>
</body> 
</html>

이름

학년

책제목

 

align=left, center, right 속성을 사용하여 셀 안의 문자들이 가각 왼쪽 가운데 오른쪽으로 정렬 되었습니다 문자의 왼쪽정렬의 align=left 속성을 지정하지 않아도 기본적으로 정렬되기 때문에 left 속성을 지정하지 않아도 상관 없습니다.


텍스트를 위,중앙,아래로 정렬하기

실행결과

<html>
<head></head>
<body> 
<table border=1 width=230 height=60>
<tr>
<td valign=top>이름</td>
<td valign=middle>
학년 </td>
<td valign=bottom>
제목</td>
</tr>
</table>
</body> 
</html>

이름

학년

제목

 

valign=top, middle, bottom 속성을 사용하여 셀 내부의 글자가 각각 위 중앙 아래로 정렬 되었습니다.



align, valign속성 응용하기

실행결과

<html>
<head></head>
<body> 
<table border=1 width=230 height=60>
<tr>
<td align=left valign=middle>이름</td>
<td align=center valign=top>
학년 </td>
<td align=right valign=bottom>
제목</td>
</tr>
</table>
</body> 
</html>

이름

학년

제목

 

align 속성과 valign 속성을 다 사용해서 셀 안의 글자 위치지정을 자유롭게 할 수 있습니다.



'Development > HTML5 / CSS3' 카테고리의 다른 글

[HTML5 / CSS3] DIV 수평, 수직중앙정렬  (0) 2014.08.19
[HTML5 / CSS3] Block & Inline 요소  (0) 2014.08.19

다른 카테고리의 글 목록

Development/HTML5 / CSS3 카테고리의 포스트를 톺아봅니다