인터넷, 블로그활용팁 테이블에 대해서 알아볼까요? - 4. 테이블과 내용의 정렬

[인터넷, 블로그 활용팁 테이블 태그에 대해서... 테이블과 테이블 속의 개체 정렬 방법]

한동안 날씨가 풀렸다 싶었는데 어제부터 급 쌀쌀해지더니 오후부터는 눈발이 날리더라구요.
아직까지는 별로 쌓이지 않았지만 아침이 되면 어떨지.....

한동안 테이블에 대한 글을 못 썼는데 오랜만에 테이블태그에 관한 내용으로 간단하게 포스팅을 해볼까 합니다.
우선 그동안 소개해드렸던 테이블태그에 관한 내용을 살펴보실까요?

인터넷, 블로그활용팁:테이블에 대해 알아볼까요? - 3. 셀 합치기(셀병합)
인터넷, 블로그활용팁:테이블에 대해 알아볼까요? - 2. 테이블태그의 구성
[블로그팁]테이블(표)을 티스토리에서 활용하자! - 1. 행과 열이란?

오늘은 테이블에 대한 네번째 글로 테이블과 그 안에 들어가는 내용의 정렬에 대해 살펴보겠습니다.

정렬에 사용되는 요소

1. 가로정렬

가로정렬을 뜻하는 기본 요소는 [align]을 사용합니다.
그리고 방향을 지정해주는 부가적인 요소인 [left, center, right]를 사용하구요.
각각 왼쪽, 가운데, 오른쪽을 뜻한다는 것은 굳이 설명하지 않아도 아시겠죠?ㅎㅎㅎ

그럼 어떻게 사용할까요?

왼쪽: align=left
가운데: align=center
오른쪽: align=right

2. 세로정렬

가로정렬과 마찬가지로 세로정렬 역시 기본요소와 부가요소로 나뉘는데요.
[valign]과 [top, middle, bottom]을 사용합니다.

위: valign=top
중간: valign=middle
아래: valign=bottom

가로정렬과 세로정렬 모두 세가지 형태로만 간단하게 살펴봤는데요.
추가적인 요소를 넣는다면 세부 설정도 가능합니다. 하지만 여러번 강조하다시피 간단하게... 아시죠?ㅎㅎ

테이블의 정렬

그럼 위에서 설명드린 가로와 세로 정렬을 이용해서 실전에 응용해볼게요.

우선 블로그를 기준으로 했을 때 본문이나 사이드바에 테이블을 사용하게 되는데요.(물론 타이틀에도 사용하긴 합니다.) 이 때 본문영역, 사이드바 영역에서의 테이블 정렬도 필요하게 됩니다.
주로 가로정렬만을 지정하게 되는데요.

보시다시피 세가지의 정렬 방법을 볼 수 있는데요.
테이블이 각각 왼쪽, 가운데, 오른쪽에 정렬된 경우를 나타낸 것입니다.
이 때 직접 사용하는 태그는 아래와 같습니다

<table align=left>, <table align=center>, <talbe align=right>

이전 포스트에서 말씀드렸듯이 테이블태그는 <table>로 시작하게 되는데요.
그 안에 테이블을 정렬하는 태그가 추가되는 것이죠.

테이블 내부 개체 정렬

그럼 이번에는 테이블 내부의 개체의 정렬은 어떻게 할 수 있는지 알아볼게요.
이때는 셀내부의 정렬이라 보시면 되겠네요.

1행3열의 테이블이구요. 셀의 가로정렬인데요.
본문 안에서 테이블의 가로정렬과 비슷하죠?

보시다시피 한칸이 셀이구요. 각각의 글자가 셀의 내용이라 보시면 됩니다.
차례로 왼쪽, 가운데, 오른쪽으로 정렬이 되어 있습니다.

사용된 소스는 아래와 같습니다.

<td align=left>, <td align=center>, <td align=right>

테이블의 가장 작은 구성 요소인 셀에 정렬을 지정하는 태그를 넣은 것이죠.

이번엔 셀 내부의 세로 정렬입니다.

역시 1행3열의 테이블이구요. 각각 위, 중간, 아래로 셀의 내용이 정렬되어 있습니다.

사용된 소스는 아래와 같습니다.

<td valign=top>, <td valign=middle>, <td valign=bottom>

조금 이해가 되시나요?
이번 글에서는 테이블 태그의 전체적인 소스를 사용하지 않고 각각 필요한 부분만 따로 떼어내서 설명을 해봤습니다.

혹시라도 테이블태그의 구성이 어떻게 되는지 모르신다면 위에서 링크한 이전 포스트를 참고하시면 도움이 될거에요.

오늘은 오랜만에 테이블에 대해 글을 써봤는데요.
너무 짧게 우려먹는게 아닌가 하는 생각도 들긴 하지만 한꺼번에 모든 내용을 담기보다는
조금씩, 되도록 상세하게 설명하는게 더 낫지 않을까 하는 마음을 가지고 글을 쓴다는 것을 알아주셨으면 좋겠네요..^^