[웹개발] HTML 테이블 만들기

안녕하세요

로로봉입니다 : )

이번 포스팅에서는 HTML 테이블을 만들어 보도록 하겠습니다.

HTML 테이블은 표를 만드는 용도로 사용되지만 화면의 레이아웃을 만드는 것으로도 사용됩니다.

예전에는 웹 화면을 분할하기 위해 프레임을 사용했지만 현재는 프레임보다 테이블을 많이 이용한다고 합니다.

테이블의 정의는 <table></table> 태그를 사용합니다. 테이블은 줄로 구성되고 줄은 칸으로 구성됩니다.

줄을 나타내는 태그는 <tr></tr>이고, 칸을 나타내는 태그는 <td></td>로 구성됩니다.

 

아래와 같이 3x3 테이블을 만들어보겠습니다.

<table border="1" style="width:300px;height:100px">
　　<tr>
　　　　<td>1</td><td>2</td><td>3</td>
　　</tr>
　　<tr>
　　　　<td>4</td><td>5</td><td>6</td>
　　</tr>
　　<tr>
　　　　<td>7</td><td>8</td><td>9</td>
　　</tr>
</table>

위와 같이 작성 후 실행하면 아래와 같이 1~9까지 입력된 테이블을 볼 수 있습니다.

[ 그림 1] - 표 결과

표 테이블에 제목 줄은 테이블 태그 안에 <td>칸 태그와 동일하게 <th></th>를 사용하면 표 제목으로 텍스트가 진하게 출력됩니다.

또한 <caption></caption> 태그를 이용하면 테이블에 캡션을 추가할 수 있습니다.

칸을 합치는 방법으로 가로 칸을 합치기 위해선 <td>태그에 colspan 속성을 사용하고, 세로 칸을 합치기 위해선 rowspan 속성을 사용하면 됩니다.

<td colspan="2">내용</td>

<td rowspan="2">내용</td>

위 테이블에 적용하면 아래와 같이 첫번째 줄은 가로 2칸 합치기, 2~3번째줄은 1번칸 세로 합치기를 다음과 같이 구성 할 수 있습니다.

<table border="1" style="width:300px;height:100px">
　　<caption>캡션 테스트</caption>
　　<tr>
　　　　<th>제목1</th><th>제목2</th><th>제목3</th>
　　</tr>
　　<tr>
　　　　<td colspan="2">1,2</td><td>3</td>
　　</tr>
　　<tr>
　　　　<td rowspan="2">4,7</td><td>5</td><td>6</td>
　　</tr>
　　<tr>
　　　　<td>8</td><td>9</td>
　　</tr>
</table>

아래와 같이 실행 결과를 확인 할 수 있습니다.

[ 그림 2 ] - 칸 합치기 결과

칸안에는 <img>태그를 이용해 사진도 넣을 수 있습니다.

 

좋아요♥ + 구독 부탁드립니다 : )