Education/Kindergarten

HTML 테이블 사용하기

habit 2010. 4. 25. 00:04
반응형
테이블 만들기

온갖 문자 정보들이 넘쳐나는 인터넷 상에서 뭔가 정리되고 균등한 정보를 제공하기 위해서 '테이블' 기능은 매우 중요합니다. 테이블을 통해서 각 정보들을 쉽게 구분할 수 있게 하는 것은 누구나 다 아는 사실이지만 웹 페이지의 디자인을 위해서도 테이블이 사용된다는 사실을 알면 쉽게 넘어갈 수 없는 기능입니다.

테이블이라고 하면 워드 프로세서의 '표'처럼 간단하게 마우스로 지익~ 그어서 만들 수도 있지만 HTML은 이와 다르게 일일이 테이블에 대한 사항을 입력해줘야만 합니다. 익숙해지거나 혹은 세세한 부분까지 수정하기 위해서는 HTML 태그를 직접 써가며 할 수 있지만 4단원에 설명된 편집 프로그램을 사용해서 테이블에 대한 내용을 숙지하고 알아가는 것도 좋은 방법이 될 것입니다.


간단한 테이블 만들기

이제 본격적으로 테이블을 만들어보도록 하겠습니다.
2열을 가진 2행의 테이블(총 4칸)은 아래와 같은 모습을 갖고 있습니다.
이름 번호
링크 5913

위의 테이블을 HTML로 표현하면 아래와 같습니다.
<TABLE BORDER="1">	<TR>		<TD>이름</TD>		<TD>번호</TD>	</TR>	<TR>		<TD>링크</TD>		<TD>5913</TD>	</TR></TABLE>

각 부분에 대한 설명입니다.
  1. TABLE
    테이블이 시작된다는 것을 알리게 됩니다. 테이블이 끝나는 곳에는 반드시 </TABLE>로 닫아주셔야 합니다.
    테이블 속에 또 다른 테이블이 들어갈 수도 있습니다.
    위의 테이블 예에서는 BORDER 옵션을 주어 테이블의 테두리가 표시될 수 있게 하였습니다.

  2. TR
    각 행을 지칭합니다. 이것 역시 행이 끝나는 부분에 </TR> 태그로 닫아주셔야 합니다.
    행이 10개가 있다면 TR 태그 10개를 차례대로 열고 닫아주셔야 합니다.사용예시 

<center><table border="1" cellpadding="0"  background="cap/cap15.gif"><tr>   <td rowspan="2" valign="bottom">한칸</td>
<td bgcolor="silver">두칸</td></tr><td>세칸</td></tr></table></center>
한칸 두칸
세칸

TD
각 셀(열)을 나타내는 것으로써 역시 셀이 끝나는 부분에 </TD> 태그로 닫아주셔야 합니다.
하나의 행에 여러 셀이 있을 수 있으며 이 셀의 개수는 테이블 전체에 영향을 끼칩니다.
(2개 이상의 행을 1개의 셀로 바꿀 경우 COLSPAN 태그를 사용합니다.) 

사용예시  

 

<table border="0" cellspacing="10">
    <tr bgcolor="gray">
        <td colspan="2">하안~ 칸</td>
    </tr>
    <tr bgcolor="menu">
        <td>두칸</td><td>세칸</td>
    </tr>
</table>
하안~ 칸
두칸 세칸


이름 번호
링크 5913
<td colspan = "3">  3칸을 1칸으로 인식시킴


본격적인 테이블 구성
위의 예제를 살펴보면 테이블이 아주 조그맣게 나와서 보기에 좋지가 않습니다.
음식도 꾸미기에 따라서 맛이 달라지듯 HTML 태그를 조절하면 훨씬 좋은 테이블을 만들 수 있습니다.

  1. 1. 테이블의 크기
    위의 예제에서 TABLE 태그에 아래와 같은 옵션을 줍니다
        <TABLE WIDTH="120" HEIGHT="100">
    결과를 보면
    이름 번호
    링크 5913

    이와 같이 테이블이 조금 더 커진 것을 볼 수 있습니다.
    그런데 위에서 준 옵션은 픽셀 단위로 지정을 한 것이기 때문에 전체 HTML 페이지의 크기에 맞춰서 비율(퍼센트 - %)로도 조절할 수 있습니다.
        <TABLE WIDTH="50%" HEIGHT="20%">
    이름 번호
    링크 5913


  2. 2. 테이블 외각선
    테이블의 외각선을 잘 꾸밈으로 전체적인 테이블의 분위기를 바꿀 수 있습니다.
        <table border="외각선 굵기" cellpadding="셀과 셀 내용의 간격" cellspacing="셀과 셀의 간격">

    외각선의 옵션에 따라서 달라지는 테이블 모습을 보도록 하겠습니다.

        <TABLE BORDER=3 WIDTH="120" HEIGHT="100"> 적용
    이름 번호
    링크 5913


        <TABLE BORDER=0 WIDTH="120" HEIGHT="100"> 적용
    이름 번호
    링크 5913


        <TABLE BORDER=1 WIDTH="120" HEIGHT="100" CELLPADDING=5> 적용
    이름 번호
    링크 5913


        <TABLE BORDER=1 WIDTH="120" HEIGHT="100" CELLSPACING=5> 적용
    이름 번호
    링크 5913


  3. 3. 테이블에 색상 적용시키기
    테이블 혹은 각 셀 별로 색상을 적용시켜서 좀 더 다양한 효과를 볼 수 있습니다.


        <TABLE BORDER=1 WIDTH="120" HEIGHT="100" BGCOLOR=#9999FF> 적용
    이름 번호
    링크 5913

    혹은 각 셀 별로 다른 색상을 줄 수 있습니다.

    HTML :
    <TABLE BORDER="1" WIDTH="120" HEIGHT="100" BGCOLOR="#9999FF">	<TR>		<TD BGCOLOR="#66CC66" ALIGN="RIGHT">이름</TD>		<TD BGCOLOR="#CCFF66" ALIGN="CENTER">번호</TD>	</TR>	<TR>		<TD BGCOLOR="#0066CC"><B>링크</B></TD>		<TD BGCOLOR="#FFCC00"><CENTER><FONT COLOR="GREEN">		<B><A HREF="HTTP://WWW.LINKPRICE.COM" TARGET="_BLANK">5913</A>		</B></FONT></TD>	</TR></TABLE>
    예 :
    이름 번호
    링크
    5913



팁 : 에디트 플러스에서 테이블 쉽게 만드는 방법
1. 버튼을 클릭한 후 원하는
칸 만큼을 선택하면		 2. 자동으로 해당되는 HTML이
생성됩니다.

td colspan="2">





추가적인 HTML 정보

지금까지 설명드렸던 내용들은 HTML의 기초적인 내용에 들을 간략하게 소개한 것입니다.
만약 더 깊은 내용의 정보가 필요하시다면 아래 링크들을 눌러 더 자세하고 다양한 정보를 살펴보는 것도 좋은 방법일 것입니다.

  • 태그클럽 http://tagclub.intizen.com/
    HTML의 전체적인 내용과 함께 자바스크립트까지 다양한 정보를 제공하는 사이트입니다.

  • 태그매니아 http://www.tagmania.net
    HTML의 단계적인 강좌와 함께 HTML의 풍부한 기능을 더해주는 CSS의 정보까지 제공하는 사이트입니다.

위 내용 외에도 인터넷 검색 엔진을 통해 'HTML 강좌'를 검색해보면 더욱 다양한 내용들을 보실 수 있을 것입니다.
저작자표시 비영리 변경금지 (새창열림)