CSS for 티스토리

[html] table 태그 확실하게 이해하기

Kay~ 2009. 2. 15. 23:53

[html] table 태그 확실하게 이해하기

html 태그에서 테이블은 익히기가 가장 힘들기도 하지만 가장 많이 사용하는 태그가 html 태그입니다.

지난번에 서식활용으로 포스팅 시간을 줄여보자.라는 포스팅을 했는데 이런 서식을 만들때 빼놓을 수 없는 것이 table 태그입니다.

이번 포스트는 table 태그에 대해서 써보도록 하겠습니다.

먼저 html 이 무엇인지 모르는 분은 html 태그 사용법을 읽어보신 다음에 이어서 보시기 바랍니다.

다양한 용도의 <table> 태그

<table> 태그는 지금 이 글이 표시되는 상자나 표등을 웹에 표현할때 사용하는 태그입니다. <table>태그의 용도는 응용에 따라 많은 용도가 있지만 간단하게 정리해보도록 하겠습니다.

<table> 태그 용도
  • 박스를 그릴때
  • 문서의 일부분에 배경색을 넣고 싶을때 (이 내용이 표시되는 배경색처럼)
  • 왼쪽, 오른쪽 특정 위치를 기준으로 글자나 숫자를 표시하려고 할 때
  • 표를 작성할때 
  • 웹 문서 또는 홈페이지의 레이아웃을 잡을때

사실 table 태그는 웹페이지라면 반드시 사용되는 태그라고 보시면 됩니다.
(단, div와 span으로 table 태그를 대체할 수 있음)

<table> 태그의 사용형식

<사용형식>

<table border=1 width="넓이" height="높이">
   <tr>
       <td> 내용 </td>
   </tr>
</table>

설명.
<table> 태그를 이용하여 표를 작성하기 위해서는 위의 사용형식처럼 먼저 <table> 태그를 적은 다음
<tr> 태그를 적어서 한줄을 준비하고 <td>태그를 이용해서 값을 적어주는 방식으로 사용합니다.

 cell cell
 cell cell 

옵션과 설명

  • border : 표를 그릴때 선을 표시할지 여부를 지정. 1은 선을 표시하고 0은 선을 표시하지 않음.
  • align : 정렬방식으로 왼쪽정렬은 left, 중앙정렬은 center, 우측정렬은 right를 적어줌
  • background : 배경이미지를 지정할때 사용
  • bgcolor : 배경색을 지정, 색은 컬러명 또는 16진수(RGB컬러값)를 적어줌
    (예. bgcolor="red" or bgcolor="#ff0000" )
  • bordercolor : 선 색을 지정하는 옵션
  • cellspacing : 테이블안의 셀과 셀 사이의 간격
  • cellpadding : 셀의 안쪽 여백
  • width : 표의 넓이
  • height : 표의 높이
  • colspan : 가로로 셀을 합치는 옵션 (colspan=3 은 가로로 셀 3개를 하나로 합쳐줌)
  • rowspan :  세로로 셀을 합치는 옵션
옵션은 필요에 따라 사용할 수 있으며 필요없으면 생략해도 됩니다.
이외의 다른 옵션들이 더 있는데 위의 내용을 모두 이해하셨다면 그때 검색으로 찾아보시기 바랍니다.

<table>태그의 여러가지 사용예제

태그

웹에 표시되는 내용

<table>
 <tr>
      <td>값1</td>
      <td>값2</td>
  </tr>
 <tr>
      <td>값1</td>
      <td>값2</td>
  </tr>
</table>

값1

값2

값3

값4

설명.
<tr>은 한줄을 준비합니다. 위의 표는 한줄당 2개의 셀이 있으므로 <tr>과</tr>안에 <td></td> 2개를 적어줬습니다.

<table cellspacing=0 width="200">
 <tr>
      <td width="100">셀 넓이 100</td>
      <td width="100">셀 넓이 100</td>
  </tr>
 <tr>
      <td width="100" align=center>비앤아이</td>
      <td width="100" align=center>케이(Kay)</td>
  </tr>
</table>

셀 넓이 100

셀 넓이 100

비앤아이

케이(Kay)

설명.
cellspacing=0은 셀과 셀사이 간격을 0으로 했고,
테이블 가로크기를 200으로 지정했고 셀넓이는 100으로 지정하고,
2번째줄에서는 각셀을 align=center를 이용하여 중앙정렬을 한 예입니다.

<table cellspacing=0 width="200">
 <tr>
      <td colspan=2 align=center>
      셀 합치기</td>
  </tr>
 <tr>
      <td width="100">값1</td>
      <td width="100">값2</td>
  </tr>
</table>

셀 합치기

셀 넓이 100

셀 넓이 100

설명.
colspan은 가로로 셀2개를 하나로 합치는 옵션입니다.

<table width=200 bordercolor=red>
 <tr>
      <td width=50>넓이 50</td>
      <td width=150 bgcolor="yellow" align=center>
       넓이 150</td>
  </tr>
</table>

넓이 50

넓이 150

설명.
bordercolor로 선의 색을 빨강색으로 지정하고 bgcolor로 셀의 배경색을 녹색으로 지정한 예입니다.

 

html 관련글 <table> 태그를 이용한 정리

No.

제  목

1

 [블로그기초학습] HTML 태그의 사용 형식

2

 티스토리 활용 - 서식만들기와 사용하기

3

 블로거가 꼭 알아야 할 HTML 태그 7가지

4

 서식활용으로 포스팅 시간을 줄여보자

 ※ 위 표에 특이사항은 선의 굵기와 색입니다. 사용예는 아래와 같습니다.
<TABLE cellSpacing=0 borderColorDark=white width=550 align=center borderColorLight=#a1dba1 border=1>

태그 연습장을 클릭해서 바로 태그를 입력하여 실행해보세요! 생각보다 쉽고 재미 있답니다.