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

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

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