홈 닫기
  • 메인홈으로
  • 전체메뉴 보기
  • 이달의 교육
  • 아카데미 교육
  • 창업스쿨
  • 1:1 방문컨설팅
  • 지역별교육&파트너
  • 무료 스튜디오
  • 쇼핑몰 자격증
  • 맨위로

커뮤니티

테이블 태그 2007.02.13

테이블 태그는 대부분의 페이지에 포함되어 있고 글이나 그림 그리고 구성을 정렬시키기 용이하기 때문에

프레임을 사용하지않는 쇼핑몰에서는 사용빈도가 높은, 중요한 태그입니다.

 

 

테이블에는 행과 열이 있습니다.

테이블 태그에서 행의 추가는 <tr>태그를 이용하면 되고 열의 추가는 <td> 태그를 이용하면 됩니다. 활용 예제를 통해 테이블을 이용한 각종 태그들을 익혀보겠습니다.

 

<html>
<body>

<table>  <!--테이블의 시작//-->

<tr> <!--행의 시작//-->

<td> <!--열의 시작//-->

가장 기본적인 테이블 태그 입니다.

</td> <!--열의 끝//-->

</tr> <!--행의 끝//-->

</table> <!--테이블의 끝//-->

</body>
</html>

 

위의 소스를 실행해보면 아래의 글자만 보입니다.

'가장 기본적인 테이블 태그 입니다.'

여기서 테이블의 존재 여부를 확인하고 싶다면 border 태그를 통해 테이블의 둘레를 지정해 줍니다.

 

 

<html>
<body>

<table border="1" bordercolor="blue">  <!--테이블의 시작//-->

<tr> <!--행의 시작//-->

<td> <!--열의 시작//-->

가장 기본적인 테이블 태그 입니다.

</td> <!--열의 끝//-->

</tr> <!--행의 끝//-->

</table> <!--테이블의 끝//-->

</body>
</html>

 

위의 소스를 실행해 보면 테이블의 테두리가 형성된 것을 확인할 수 있습니다.

이제 테이블의 행과 열을 추가하고 전체적인 사이즈의 조절을 해보겠습니다.

 

<html>
<body>

<table border="1" bordercolor="blue" width="500" height="500">  <!--테이블의 시작//-->

<tr> <!--행의 시작//-->

<td> <!--열의 시작//-->

1행 1열입니다.

</td> <!--열의 끝//-->

<td> <!--열의 시작//-->

1행 2열입니다.

</td> <!--열의 끝//-->

</tr> <!--행의 끝//-->

<tr>

<td> <!--열의 시작//-->

2행 1열입니다.

</td> <!--열의 끝//-->

<td> <!--열의 시작//-->

2행 2열입니다.

</td> <!--열의 끝//-->

</tr>

</table> <!--테이블의 끝//-->

</body>
</html>

 

width는 테이블의 좌우 사이즈를 지정해주는 태그이고

height는 테이블의 상하 사이즈를 지정해주는 태그입니다.

 

이제 이 테이블에서 각각의 내용을 행과 열 별로 다르게 적용시켜 보겠습니다.

 

 

<html>
<body>

<table border="1" bordercolor="blue" width="500" height="500">  <!--테이블의 시작//-->

<tr> <!--행의 시작//-->

<td align="right" bgcolor="blue" valign="top"> <!--열의 시작//-->

1행 1열입니다.

</td> <!--열의 끝//-->

<td align="center" bgcolor="red"> <!--열의 시작//-->

1행 2열입니다.

</td> <!--열의 끝//-->

</tr> <!--행의 끝//-->

<tr>

<td> <!--열의 시작//-->

<img src="http://www.godomall.co.kr/images/godo_logo.gif">

</td> <!--열의 끝//-->

<td> <!--열의 시작//-->

 

<table border="1" bordercolor="yellow" bgcolor="pink">
<tr><td> 테이블 안의 새로운 테이블입니다</td></tr>

</table>

 

</td> <!--열의 끝//-->

</tr>

</table> <!--테이블의 끝//-->

</body>
</html>

 

실행결과입니다.

 

 

 

 

위에서 본 것처럼 테이블 안에서 여러 태그들의 사용이 가능하고 이미지의 삽입은 물론 테이블 안에 새로운 테이블의 형성도 가능합니다.

 

사용된 태그에 대해서 간단하게 설명드리면..

 

align : 좌우 정렬 방식을 지정합니다.

valign : 상하 정렬방식을 지정합니다.

bgcolor : 배경색을 지정하는 태그입니다.

 

 

 

 

목록보기