HTML 문서에서 표 그리기
다음 포스트에서 더 이야기 하겠지만 표를 그리는 태그는 근래에 들어 쓰면 안되는 태그로 오해를 많이 받고 있다. 하지만 표로 나타낼 수 있는 컨텐츠가 많다는 점과, 문서의 형태를 표현하다가 표와 같은 형태의 내용도 html 에서 다룰 수 있음을 알아 보도록 한다.
Recap
- url의 정의
- url 구조
- 파일명으로 링크
- 디렉터리와 파일명으로 링크
- 웹주소를 통한 링크
- 웹과 서버, 클라이언트
테이블과 행, 열 - table, tr, td
대부분 알다시피 테이블은 행(가로줄)과 열(세로줄)로 이루어져 있다. 태그의 부모 관계를 (띄어 쓰기를 통해서 html 이 body 태그를 품고 있는것처럼) 이용하여 table > tr > td (표 > 줄 > 칸) 의 순서로 태그를 작성하고 td(칸) 태그 안에 내용을 삽입한다.
<!DOCTYPE html>
<html>
<body>
<h1>테이블 테스트</h1>
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>반복 되는 문자가 많으므로 Ctrl+C 로 카피후 Ctrl-V를 이용하여 붙여 넣는 방식으로 편집을 하도록 하자. 결과는 아래와 같다.
생각과 같이 나오지는 않았다. 우선은 외곽선이 있어야 표 다워 보일 듯 하다.
테이블의 속성 - border, width, height
- 외곽선을 표시하기 위하여 table 태그의 border 속성을 1로 설정한다.
- 이미지 태그와 같이 table의 폭을 width 속성으로, 높이를 height 속성 통해 정해 다.
<h1>테이블 테스트</h1>
<table border="1" width="400" height="300">
<tr>결과를 확인해보면
표 다워 진 모습을 확인 할 수 있다.
테이블 cell의 속성 - align, width, height
- 글자가 중간 오도록 하기 위하여 한칸을 뜻하는 td 태그에 align 속성을 설정한다.
- 테이블과 마찮가지로 width와 height를 임의 사이즈로 설정해 보도록 한다.
<h1>테이블 테스트</h1>
<table border="1" width="400" height="300">
<tr>
<td align="center" width="120" height="50">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>다른 td 태그들에 알맞은 사이즈를 입력하면서 변경되는 상태를 살펴 보도록 한다.
이렇게 테이블을 작성할 수 있게 된 것은 힌트 한 가지를 제공한다.
지원 중단된 테이블 레이아웃
테이블을 사이즈에 알맞게 배치를 한 후 각 내용들을 td 안쪽에 작성하므로써 하나의 페이지 레이아웃을 잡을 수 있게 된다. 지금은 여러가지 이유로 반드시 피해야 하는 작업이므로 언급을 피하도록 하겠다.
댓글
댓글 쓰기