HTML 8단계 - 테이블(Table) 1탄

안녕하세요.

HTML 8단계 테이블(Table) 1탄 시간이 돌아왔습니다.

저번 시간에는 프레임(frame) 3탄을 알아봤는데요 혹시나 잊지는 않으셨겠죠?~

오늘도 화이팅하며, 부담없이 봐주시면 됩니다.

자 그럼 HTML 8단계 테이블(Table) 1탄 시작해볼께요~

 

ㅁ HTML 테이블(Table)

 

테이블 태그는 HTML 문서에서 가장 많이 사용되고 있는 태그중 하나 입니다.

테이블 태그에서 가장 기본이 되는 태그는 <table>, >tr>, <td> 이 3가지 태그입니다.

<table> 태그는 테이블의 시작을 알려주며 테이블 끝에는 </table> 태그로 정의 합니다. 

그리고 <tr>태그는 "table row"의 약자로 행을 생성할때 사용됩니다.

또한 <td>태그는 "table data"의 약자로 각 행에 셀을 정의하고 있습니다.

즉, 행에서 열을 나누는 기능을 담당합니다. 

글로는 이해하는데 어려움이 있긴에 바로 예문을 한번 살펴볼께요. 따라서 작성해 보시고 테스트해 보세요.

 

<table border="1">

  <tr>

    <td>1행 1열의 테이블</td>

  </tr>

</table>

 

위의 소스를 보시면 1행, 1열의 테이블을 만들어진 것을 보실 수 있을껍니다.

<table> 안에 border="1"의 경우 border는 테이블의 경계선을 지정하는 속성입니다.

border="0" 으로 지정하면 테이블의 경계선이 화면상에 보이지 않고요.

border="1" 으로 지정하면 테이블의 경계선이 화면에 보여집니다.(1보다 큰수를 입력할경우에는 경계선이 더 커집니다.)

 

응용편으로 1행에 2열을 가진 테이블을 작성해 볼께요~

해당 예문 소스는 다음과 같습니다.

 

<table border="1">

  <tr>

    <td>1행 1열</td>

    <td>1행 2열</td>

  </tr>

</table>

 

어떠신가요? 어렵진 않으시죠?

 

이번에는 행을 하나 더 생성하여 2행 2열의 테이블을 만들어 보겠습니다.

해당 예문 소스는 다음과 같습니다.

 

<table border="1">

  <tr>

    <td>1행 1열</td>

    <td>1행 2열</td>

  </tr>

  <tr>

    <td>2행 1열</td>

    <td>2행 2열</td>

  </tr>

</table>

 

위의 소스처럼 태이블을 만드는 순서는 가장 먼저 테이블을 정의하고 행을 지정한다음에 그 행에서 열을 지정하는 순서 입니다.

 

테이블을 알아봤으니 다음 차례인 자주 사용하는 속성에 대해서도 알아봐야겠지요?~ㅎ

여러가지의 속성이 있으나 자주 사용하는것 위주로 정리해 볼께요~

자 그럼 시작합니다.~

 

1. align

 

align 속성의 경우 정렬을 지정할때 사용하는 속성입니다.

가령 왼쪽 정렬(left), 가운데 정렬(center), 오른쪽 정렬(right)로 속성을 지정할 수 있습니다.

가장먼저 왼쪽 정렬(left) 예문 소스를 살펴보겠습니다.

 

<table border="1" align="left">

  <tr>

    <td>1행 1열의 테이블 왼쪽 정렬</td>

  </tr>

</table>

 

가운데 정렬(center) 예문 소스를 살펴보겠습니다.

<table border="1" align="center">

  <tr>

    <td>1행 1열의 테이블 가운데 정렬</td>

  </tr>

</table>

 

오른쪽 정렬(right) 예문 소스를 살펴보겠습니다.

<table border="1" align="right">

  <tr>

    <td>1행 1열의 테이블 오른쪽 정렬</td>

  </tr>

</table>

 

이와 같이 align으로 속성값을 지정해서 정렬시킬때 사용하시면 됩니다.

 

2. width, height

 

테이블 속성중 width, height는 테이블의 넓이, 높이를 지정하는 속성입니다. 

width는 넓이를 지정할때 사용하며, height는 높이를 지정할때 사용하는 속성입니다.

 

예문 소스를 한번 살펴보겠습니다.

<table border="1" width="300" height="100">

  <tr>

    <td>1행 1열의 테이블 넓이는 300픽셀, 높이는 100픽셀</td>

  </tr>

</table>

 

위의 소스는 넓이는 300픽셀, 높이는 100픽셀인 테이블을 작성한 소스입니다.

 

응용편으로 첫번째 열의 넓이가 100픽셀, 두번째 열의 넓이가 200픽셀인 테이블을 작성해 볼께요~

해당 예문 소스는 다음과 같습니다.

<table border="1" width="300">

  <tr>

    <td width="100">1행 1열의 테이블 넓이는 100픽셀</td>

    <td width="200">1행 2열의 테이블 넓이는 200픽셀</td>

  </tr>

</table>

 

어떠신가요? 어렵진 않으시죠?

 

이번에는 첫번째 행의 높이가 30픽셀, 두번째 행의 높이가 50픽셀인 테이블을 작성해 볼께요~

해당 예문 소스는 다음과 같습니다.

<table border="1" width="300">

  <tr height="30">

    <td>1행 1열의 테이블 높이는 30픽셀</td>

  </tr>

  <tr height="50">

    <td>2행 1열의 테이블 높이는 50픽셀</td>

  </tr>

</table>

 

어떠신가요? 이해가 잘 되시나요?

항상 말씀드리는 거지만 반복해서 연습하셔야 된다는건 필수인거 아시죠?ㅎㅎㅎ

다음시간에는 테이블(Table) 2탄을 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.