[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>

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

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. BlogIcon odlinuf 2009.02.16 00:11 신고  댓글주소  수정/삭제  댓글쓰기

    제 블로그에 테이블 만들어서 집어넣어야 할 게 하나 있는데 그동안 좀 귀찮아서
    테이블에 대해 알아볼 생각을 안하고 있었거든요. 떡 본 김에 제사지낸다고, ㅋㅋ
    올리신 팁 보고 지금부터 해야겠습니다. :-)

  2. BlogIcon 異眼(이안) 2009.02.16 01:07 신고  댓글주소  수정/삭제  댓글쓰기

    저런 표만드는 건 옛날엔 Tag 사용해서 다 만들곤 했는데...(그 옛날이란 10년도 더 전인 대학시절....어흑, 나도 늙었꾸나!!!!)
    이젠 외계어 같아요.ㅋㅋ

    • BlogIcon Kay~ 2009.02.16 01:10 신고  댓글주소  수정/삭제

      전 첨에 이 테이블태그가 어찌나 어렵던지요! ㅎㅎ
      익숙해졌다 생각하니까 또 div와 span이 또 머리를 아프게 하더군요!

  3. BlogIcon 구차니 2009.02.16 01:23 신고  댓글주소  수정/삭제  댓글쓰기

    출장갔다와서 이제야 리플 달수 있는 글이 보이는군요 ㅎㅎ
    그런데 요즘에 티스토리 소스를 보던가 하면 tbody가 많이 보이던데
    table과는 다른건가요?

    • BlogIcon Kay~ 2009.02.16 09:47 신고  댓글주소  수정/삭제

      아 출장 다녀오셨군요!
      <tbody>도 <table>태그안에 적어주는 태그입니다.
      <tbody>는 각셀에 공통적으로 들어가는 속성(옵션)에 대해서 한번에 지정을 해줄때 사용하는 태그입니다.
      그러므로 속성이 적혀있지 않고 <tbody>만 있는것은 삭제를 해도 아무 이상이 없습니다.
      보통은 거의 사용하지 않는데 html 웹에디터나 나모웹에디터등에서 자동으로 생성이 되더군요.

  4. BlogIcon DanielKang 2009.02.16 04:54 신고  댓글주소  수정/삭제  댓글쓰기

    표만큼은 아직까진 html로 직접 작성하는게 확실히 편하긴 하죠
    저는 복잡한 표 만들땐 그냥 dreamweaver 같은 걸로 만든다음에 html 복사해서 쓰기도 한답니

    • BlogIcon Kay~ 2009.02.16 09:50 신고  댓글주소  수정/삭제

      ㅋㅋ 저도 나모웹에디터를 사용하는데...
      가끔은 너무 많은 속성들이 들어가서 소스의 크기가 몇배가 되어버리고 지저분해서..
      직접 하드코딩하는 경우가 많습니다.
      특히 포스팅중에는 더욱 ^^
      그리고 skin 수정할때는 특히 직접작성해주는 것이 더 편리한것 같아요.
      테이블태그의 사용이나 그 태그의 복잡함때문에 div와 span으로 대체되어 가지만 아직은 많이 사용하는 태그인것 같습니다. ^^

  5. BlogIcon JUYONG PAPA 2009.02.16 14:17 신고  댓글주소  수정/삭제  댓글쓰기

    쉬엄쉬엄하세요. ^^

  6. BlogIcon 시골친척집 2009.02.17 13:13 신고  댓글주소  수정/삭제  댓글쓰기

    표만들기를 확실하게 내걸루 만들어야 하는데
    수박 겉핥기로 배우다보니
    맨날 2% 부족입니다~~^^;;
    '즐겨찾기'루다가 저장해서 제 메일로 넣을려구요~ㅎ

  7. BlogIcon 상대성 2009.04.22 14:30 신고  댓글주소  수정/삭제  댓글쓰기

    전에 케이님블로그와서 이것저것 많이 배우고 특히 서식활용의 유용성에 대해 깨우쳤었어요~
    여행포스팅을 많이 하는지라 서식을 만들어놓으려고하는데...중고딩때 태그배운다고 했었는데도
    지금와서 테이블 만들려니까 어렵네요;;;ㅠ

    FTP처럼 파일첨부해서 제 컴터의 그림을 업로드시켜놓고 쓰는건 찾았어요~(글검색하다가ㅡ^^)
    그걸 표의 한 셀 배경으로 쓰고 싶은데;;
    태그를 써도 안보이네요;;ㅠㅠ
    TD style background="images/meal.jpg"
    이걸로 안되는걸까요??ㅇㅅㅇ

  8. BlogIcon 하얀구름세상 2010.06.13 01:39 신고  댓글주소  수정/삭제  댓글쓰기

    요즘 열심히 가르쳐주시는데로 따라하느라 열공중입니다. ㅋㅋ
    티스토리, 애드센스, 모두 여기서 한방에 공부 할수 있겠네요. ^^
    감사합니다.

  9. BlogIcon djduck 2011.11.26 21:31 신고  댓글주소  수정/삭제  댓글쓰기

    정말 좋은블로그네요

  10. cqlee12 2012.05.01 15:38  댓글주소  수정/삭제  댓글쓰기

    다시 html 공부하는데 좋은 정보 .. 감사합니다

  11. 2014.05.24 15:59  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon Kay~ 2014.05.27 10:36 신고  댓글주소  수정/삭제

      티스토리에서 태그 적용은
      글쓰기 창 우측 상단에 보면 html 이 있습니다.
      그곳을 클릭한다음에 해야 합니다. ^^