글
셀의 정렬속성
HTML
2011. 7. 21. 19:36
안녕하세요?
오늘도 table의 속성에 대해서 배워보겠습니다.
오늘 할 내용은 테이블 내의 글자를 정렬하는 것입니다. 왼쪽,오른쪽,가운데, 위쪽,아래쪽, 가운데 이렇게 정렬하는건데요. 써보면...
<TD ALIGN=LEFT/CENTER/RIGHT>
<TD VALIGN=TOP/MIDDLE/BOTTOM>
입니다. 왜 td에 할까요? td가 직접 글자가 들어가는 부분이니깐요. align은 말그대로 정렬하다는 뜻이죠. left는 왼쪽정렬 center는 가운데 정렬 right 는 오른쪽 정렬 top은 표의 셀(표의 한칸한칸을 셀이라고합니다. )에 글자를 위쪽으로 middle은 가운데로 bottom은 아래쪽에다가 써라하는 내용입니다. 이렇게 말로 설명하는것보다 직접 해보면 더 이해하기가 쉽겠죠?
그럼 각각의 속성을 이용해서 글자를 한번 나타내봅시다.
<table border=1 width=500>
<tr>
<td align=left>왼쪽 정렬셀</td>
<td align=center>가운데 정렬셀</td>
<td align=right>오른쪽 정렬된셀</td>
</tr>
</table>
이렇게 표를 만들면 셀이 3갠데 그중에 하나씩 정렬속성이 다르게 들어가는 것을 볼수 있습니다. 마찬가지로 위 아래 정렬도
<table border=1 height=300>
<tr>
<td valign=top>위쪽 정렬셀</td>
<td valign=middle>가운데 정렬셀</td>
<td valign=bottom>아래쪽 정렬된셀</td>
</tr>
</table>
이렇게 해주면 되겠습니다. 이해안가시는 분 없으시겠죠? ㅎㅎ
그럼 전체 소스코드입니다.
<html>
<head><title>표의 글자속성</title>
</head>
<body>
<table border=1 width=500>
<tr>
<td align=left>왼쪽 정렬셀</td>
<td align=center>가운데 정렬셀</td>
<td align=right>오른쪽 정렬된셀</td>
</tr>
</table>
<br>
<br>
<table border=1 height=300>
<tr>
<td valign=top>위쪽 정렬셀</td>
<td valign=middle>가운데 정렬셀</td>
<td valign=bottom>아래쪽 정렬된셀</td>
</tr>
</table>
</body>
</html>
실행결과는 어떻게 될거 같으세요? 표가 두개 있지요. 둘다 3개의 셀을 가지고 있습니다. 위의 표는 왼쪽,오른쪽,가운데정렬이고 아래표는 위쪽,가운데,아래정렬입니다. 위의 표는 width즉 너비가 500픽셀이고 아래표는 height 높이가 300픽셀입니다. 자 그럼 실행결과를 보도록 합시다. 대충 감이 오시죠?
예상했던대로 이렇게 나왔네요. ㅎㅎ
어떻습니까? 별로 안 어렵지요? 그럼 다음시간에 또...
오늘도 table의 속성에 대해서 배워보겠습니다.
오늘 할 내용은 테이블 내의 글자를 정렬하는 것입니다. 왼쪽,오른쪽,가운데, 위쪽,아래쪽, 가운데 이렇게 정렬하는건데요. 써보면...
<TD ALIGN=LEFT/CENTER/RIGHT>
<TD VALIGN=TOP/MIDDLE/BOTTOM>
입니다. 왜 td에 할까요? td가 직접 글자가 들어가는 부분이니깐요. align은 말그대로 정렬하다는 뜻이죠. left는 왼쪽정렬 center는 가운데 정렬 right 는 오른쪽 정렬 top은 표의 셀(표의 한칸한칸을 셀이라고합니다. )에 글자를 위쪽으로 middle은 가운데로 bottom은 아래쪽에다가 써라하는 내용입니다. 이렇게 말로 설명하는것보다 직접 해보면 더 이해하기가 쉽겠죠?
그럼 각각의 속성을 이용해서 글자를 한번 나타내봅시다.
<table border=1 width=500>
<tr>
<td align=left>왼쪽 정렬셀</td>
<td align=center>가운데 정렬셀</td>
<td align=right>오른쪽 정렬된셀</td>
</tr>
</table>
이렇게 표를 만들면 셀이 3갠데 그중에 하나씩 정렬속성이 다르게 들어가는 것을 볼수 있습니다. 마찬가지로 위 아래 정렬도
<table border=1 height=300>
<tr>
<td valign=top>위쪽 정렬셀</td>
<td valign=middle>가운데 정렬셀</td>
<td valign=bottom>아래쪽 정렬된셀</td>
</tr>
</table>
이렇게 해주면 되겠습니다. 이해안가시는 분 없으시겠죠? ㅎㅎ
그럼 전체 소스코드입니다.
<html>
<head><title>표의 글자속성</title>
</head>
<body>
<table border=1 width=500>
<tr>
<td align=left>왼쪽 정렬셀</td>
<td align=center>가운데 정렬셀</td>
<td align=right>오른쪽 정렬된셀</td>
</tr>
</table>
<br>
<br>
<table border=1 height=300>
<tr>
<td valign=top>위쪽 정렬셀</td>
<td valign=middle>가운데 정렬셀</td>
<td valign=bottom>아래쪽 정렬된셀</td>
</tr>
</table>
</body>
</html>
실행결과는 어떻게 될거 같으세요? 표가 두개 있지요. 둘다 3개의 셀을 가지고 있습니다. 위의 표는 왼쪽,오른쪽,가운데정렬이고 아래표는 위쪽,가운데,아래정렬입니다. 위의 표는 width즉 너비가 500픽셀이고 아래표는 height 높이가 300픽셀입니다. 자 그럼 실행결과를 보도록 합시다. 대충 감이 오시죠?
예상했던대로 이렇게 나왔네요. ㅎㅎ
어떻습니까? 별로 안 어렵지요? 그럼 다음시간에 또...
'HTML' 카테고리의 다른 글
| frame 제어 (0) | 2011.07.26 |
|---|---|
| frame기본 (0) | 2011.07.25 |
| 표의 경계선, 너비와 높이조절 (0) | 2011.07.19 |
| Rowspan, Colspan (0) | 2011.07.17 |
| 표만들기 기초 (0) | 2011.07.14 |
