HTML 강좌 6강 - HTML 태그 익히기#5 - TABLE 태그

HTML 강좌 6강 - HTML 태그 익히기#5

지난 강좌에 이어서 이번강좌에도 태그를 연습해 보도록 하자.

*테이블 태그

테이블 태그는 HTML 많이 사용하는 태그이다.

표 같은 형식의 데이터를 표현할 때 사용하거나, 게시판, 갤러리 등 사용도가 무척 많다.

사용법은 다음과 같다.

<table>

  <tr>

    <td>1행1열</td>

    <td>1행2열</td>

  </tr>

  <tr>

    <td>2행1열</td>

    <td>2행2열</td>

  </tr>

</table>

 

위와같이 코딩을 하고 테스트를 해보자.

 

라인이 없으니 보기가 좀 불편한듯..

보기 편하게 먼저 border 속성을 추가해보자~

 

이렇게 border 속성에 값을 주면..

테이블에 라인이 생긴다.

그리고 테이블 태그 속성에는 행이나 열을 합치는 속성이 있다.

colspan 속성과 rowspan 속성이다.

예를 들면 다음과 같이 1행과 2행의 열의 숫자가 일치 하지 않을 경우~

<table>

  <tr>

    <td>1행1열</td>

  </tr>

  <tr>

    <td>2행1열</td>

    <td>2행2열</td>

  </tr>

</table>

저상태로 테스트를 해보자.

위와같이 HTML이 약간 깨지는 현상이 있다.

저런 현상을 깔끔하게 해결하는 속성이 colspan 속성이다.

사용법은 다음과 같다.

<table border="1">

  <tr>

    <td colspan="2">1열1행</td>

  </tr>

  <tr>

    <td>2열1행</td>

    <td>2열2행</td>

  </tr>

</table>

colspan="2" 는 두개의 열을 하나의 열로 합친다는 의미이다.

3개의 열을 합친다면 colspan="3"

코딩을 하고 테스트를 해보자.

 

위와같이 테이블의 깨짐현상이 사라짐을 볼 수 있다.

같은 방식으로 rowspan을 테스트 해보자.

rowspan은 colspan과 달리 위아래 행의 열을 합치는 기능이다.

테스트를 해보자.

<table border="1">

  <tr>

    <td rowspan="2">1열1행</td>

    <td>1열2행</td>

  </tr>

  <tr>

    <td>2열2행</td>

  </tr>

</table>

행과 열이 약간 이해하기 어려울 수 있어서 다음과 같이 주석을 달아보았다.

 

이해하기가 좀 더 쉬울 것이다.

자 실행을 해볼까~

 

위와 같이 열이 합쳐지는 것을 볼 수 있다.

다음으로 볼 속성을 cellpadding, cellspacing 속성이다.

cellpadding은 행의 여백을 지정하고, cellspacing 행과 행사이의 여백을 지정한다.

 

위와같이 코딩을 하고 테스트를 해보자.

 

행의 여백, 그리고 행과 행사이의 여백이 생긴다.

그리고 마지막으로 테이블의 크기를 설정하는 속성과, 정렬을 하는 속성을 알아보자.

먼저 테이블의 크기를 지정하는 속성은 width, height 속성이다.

크기를 설정하는 width와 height 속성은 html 태그에서 계속 등장하는 속성이다.

또한 정렬을 설정하는 align 속성도 계속 등장한다.

 

위와같이 테이블에 크기를 주고, 중앙으로 정렬을 설정하였다.

 

테이블에 크기가 설정한 값으로 변경되는 것을 볼 수 있다.

그리고 <table> 태그에 중앙정렬 속성값을 주어, 테이블이 문서의 중앙에 위치하는 것을 알 수 있다.

align="center" / align="left" / align="right" 속성을 <table> 태그에 지정할 경우 문서의 중앙, 왼쪽, 오른쪽에 테이블이 위치한다.

또한 <tr> 태그와 <td> 태그에도 정렬을 설정할 수 있다.

 

위와 <tr>에 정렬을 지정해 주면 <tr> </tr> 사이 열들이 전부 영향을 받는다.

그리고 <td> 태그에도 따로 정렬을 지정할 수 있다.

 

위와같이 <tr>에 지정한 정렬, <td>에 지정한 정렬의 차이를 확인할 수 있다.

예제 파일은 첨부파일에서 받을 수 있습니다 :)

06.zip