HTML 표 만들기 : 테이블 table tr td 태그 개념 정리 및 사용 방법
예전에 애드센스와 티스토리 입문때 가장 골치 아팠던 부분이 바로 중앙정렬 이었습니다. 애드센스 상단 두개의 광고를 노출시키는 방법, 그리고 중앙정렬 하는 방법을 몰라서 참 해메었던 기억이 있는데, 지금 다 배우고나니 별거 없구나 라는 생각을 하게 됩니다.
테이블 (table) 태그는 영역을 나누는 기능이라기 보다는, 표를 만들 때 많이 사용하는 태그인데, 사실 거의 사용하지는 않습니다. 테이블 태그 대신 div를 많이 씁니다. 그래도 알아두면 언젠가는 요긴하게 쓰일테니 오늘 배운 간단한 개념을 한번 정리해보고 응용해보는 시간을 갖도록 하겠습니다.
우선 html 기본 구조를 작성합니다. 늘 그렇듯 사용 프로그램은 브라켓 (Brackets) 입니다. 본문 body 안쪽에 테이블을 작성해 줍니다. 사용 태그는 <table> 입니다. 기본 구조는 위에 나온것과 같은데, 테이블이 어떻게 적용되는지 확인하기 위해서 border 값을 1px 적용시켰습니다.
<table>
<tr>
<td>내용</td>
</tr>
</table>
이게 기본 구조 입니다. 주석에도 나와있듯, tr은 가로줄을 뜻하며, td는 가로줄의 각 칸을 의미한다고 보시면 됩니다. 보통 엑셀에서 열과 행으로 이야기를 하는데, tr이 열인 샘이고, td는 행이라고 생각하시면 될 것 같습니다. 이제 내용에 숫자 1을 넣어봤으니 어떻게 출력되는지 확인해 보겠습니다.
그렇습니다. 이렇게 출력됩니다.
바로 오른쪽에 한칸을 더 추가해 보는건 어떻게 할까요? 위처럼 td를 한줄 더 추가해 주시면 됩니다.
네. 이렇게 나오죠.
한칸을 가로줄에 더 추가하는건 마찬가지로 td 요소를 한줄 더 추가해 주시면 되겠습니다.
그러면 이렇게 정상적으로 적용된것을 확인하실 수 있습니다.
이번에는 한줄이 아닌, 열을 세 개로 만들겠습니다. 아까 줄(열) 단위를 tr로 만들어 준다고 했으니, tr 요소를 3개 넣으면 될 것 같습니다. 그렇다면 태그 구조는 위처럼 만들면 될 것 같습니다.
네. 그러면 이렇게 출력이 됩니다.
응용해서 열 2개, 행 2개는 어떻게 될까요? 위처럼 태그를 구성하면 될 것 같습니다. 한번 출력해 보도록 합니다.
네. 보시는 것 처럼 가로로 두개, 세로로 두개인 표가 정상적으로 출력이 되는 것을 확인하실 수 있습니다. 이제 이 방법을 응용해서 시간표를 한번 만들어보셔도 될 것 같습니다. 다음 시간에는 표를 합치는 방법에 대해서 알아보겠습니다. 끝.
"친절한효자손 취미생활" 을 검색!
