인터넷, 블로그활용팁:테이블에 대해 알아볼까요? - 2. 테이블태그의 구성

얼마전.... 이라기 보다는 거의 한달전에(벌써??) 테이블의 기본이 되는 행과 열에 대해 포스팅을 했었답니다.

이미지출처: 1200M

테이블이 뭔지, 행과 열은 어떻게 구분하는지 궁금하시다거나 지난 글의 복습을 하고 싶으시면 아래의 링크를 클릭해주세요.
[블로그팁]테이블(표)을 티스토리에서 활용하자! - 1. 행과 열이란?


그럼 행, 열의 구분은 확실히 하셨을거라 생각하고 오늘의 얘기를 이어갈게요.

테이블태그의 기본 구성

테이블을 구성하는 기본 요소는 크게 세가지로 나눌 수 있습니다.
바로 table, tr, td 이렇게 세가지로 구성되는데요. 간단하게 설명을 드리면

table
 - 표 전체를 뜻함

tr
 - 행을 구성하는 요소(가로)

td
 - 열을 구성하는 요소(세로)

이해가 쉽도록 그림으로 표현했습니다. 보시다시피 표 전체의 시작은 table로 시작하게 됩니다.
그리고 행과 열을 구성하는 tr, td로 이루어지죠.



사실 위에서 보여드린 테이블에는 상하, 좌우 정렬/ 테두리 굵기/ 테두리 색/ 가로, 세로 크기 등의 소스가 들어갔지만
오늘 설명드리는 기본 요소만 정확하게 기억하시고 부가적인 내용은 다음편에서 설명드릴게요.

그런 의미에서 위 테이블의 부가적인 것을 뺀 기본 3요소의 소스만 살펴보면....

<table>        -------------   테이블(표) 시작
  <tr>           -------------   1행 시작
    <td>        -------------    1열 시작
    1             -------------    내용
    </td>       -------------    1열 끝
    <td>        -------------    2열 시작
    2             -------------    내용
    </td>       -------------    2열 끝
  </tr>          -------------    1행 끝
</table>       -------------    테이블 끝

html태그 소스는 열고 닫음을 확실하게 해야 한답니다.

복잡하게 설명할 필요없이 괄호를 얘로 들면 되겠네요.

table, tr, td를 각각 [대괄호], {중괄호}, (소괄호)로 생각한다면 쉽게 이해가 되겠죠?
대괄호 열고 그 안에서 중괄호 열고 또 그안에서 소괄호를 열었죠. 그리고 닫을 때는 역순으로
소괄호 닫고 나와서 중괄호 닫고 다시 나와서 대괄호를 닫는거죠.

[{(1)+(2)}]

요런 개념이죠....

수학에서는 위와 같은 경우 대괄호와 중괄호를 사용할 필요가 없지만 테이블태그에서는
세가지 요소는 기본적으로 꼭 사용하게 되어 있답니다.

예제로 풀어보아~~~요.

그럼 다음 그림을 보고 세가지 요소를 어떻게 사용해서 만들면 되는지 맞춰보세요.

정답을 보기 전에 생각을 해보시거나 태그를 사용해서 직접 연습을 해보시겠다면 아래의 태그연습장을 클릭해주세요.

태그연습장 꾹~~~!!!!

<table>
  <tr>
    <td>
    1
    </td>
    <td>
    2
    </td>
    <td>
    3
    </td>
  </tr>
</table>

생각한게 맞으셨나요?

테이블의 활용을 강조하는 이유는?

지난번 포스팅과 마찬가지로 테이블의 중요성을 강조하는 이유는 블로그에서도 테이블이 아주 유용하게 쓰인다는 것입니다.
제 블로그만 하더라도 많은 부분에 테이블태그가 사용되었구요.

타이틀 이미지와 아이콘, 플로팅버튼, 예전 상단광고(애드센스와 애드박스를 함께 사용할 때), 본문하단 추천박스, 페이스북 소셜댓글과 좋아요 버튼이 있는 박스 등 많은 부분에 사용되고 있답니다.

그러니 테이블에 대해 전혀 모르시거나 헷갈리는 부분이 있다면 분명 도움이 될거라 생각합니다.

이제까지 설명드린 것은 html을 아는 사람이라면 식은죽 먹기나 다름없는 아주 기초적인 것이지만
html태그를 잘 모르거나 익숙하지 않다면 금방 이해되지 않는 부분이기도 합니다.
그래서 되도록이면 아주 상세하게 풀어서 설명을 드리려고 하는 것이구요.

다음 시간에는 엑셀에서 자주 볼 수 있는 셀병합. 즉, 각각의 셀을 합쳐서 하나의 셀로 만드는 방법과
테이블, 혹은 셀의 크기를 지정하는 방법에 대해 설명드릴게요.