본문 바로가기

▣컴퓨터 활용팁

테이블 테그 <table>

반응형

테이블 테그 <table>

--------------------------------------------------------------------------------
 


HTML문서를 만들때 표를 사용하는것은 가장중요하다고 해도 과언이 아닙니다. 대부분의 웹페이지의 소스를 보면 표로 그 구성(전체틀)을 구성하게 됩니다.
즉 이미지나 글자 등을 배치할때 그리고 실제 표모양을 보여줄때도 아주아주 중요하게 쓰이는 태그입니다.
예를 들어 웹페이지에 올릴 이미지를 만들었습니다. 하지만 이미지를 통째로 올리자니 그 용량이 너무너무 큽니다. (로딩속도가 장난아닙니다 -_-;;) 이럴때는 이미지를 적당한 용량으로 잘라서 저장한후에 이미지 조각조각들을 표에 빈틈없이 배치해 하나로 합쳐줍니다.

어렵냐구요? 아니요.. 어렵지는 않습니다.
지금까지의 예제에서는 글자나 그림등을 되는대로 배치했지만 이제부터는 원하는 곳에 배치할수 있습니다.
표도 아주 쉽게 만들어 낼수 있습니다.


--------------------------------------------------------------------------------

<Table><Tr><Td>
 

 표를 만들어 주는 명령어는 <Table>태그 입니다. <Table>표에는 행을 담당하는 <Tr>태그, 그리고 <Tr>태그안에 열을 담당하는 <Td>태그가 사용됩니다. 실제 표안에 들어가는 내용들은 결국 <Td>태그안에 들어가게 됩니다.

무슨소린지 모르시겠다구요??? 테이블의 구성은 아래와 같다는 말씀입니다.
<Table>-------------------------------------- 표
      <Tr>------------------------------------- 표의 첫째줄
            <Td>--------------------------------- 첫째줄의첫째칸
                 내용-------------------------------표안에 첫재줄의 첫째칸에 들어갈내용
            </Td>
      </Tr>
</Tabel>

 
 표를 만들때도 다양한 속성을 설정할수 있습니다.
하지만 <Table>, <Tr>, <Td>태그만다 적용가능한 속성이 약간씩 차이가 있으므로 나누어서 설명해보겟습니다.

 
 먼저 <Tabel>, <Tr>, <Td> 모두에 적용할수 있는 속성
      - width : 표,줄,칸의 너비설정하며 그 값으로 픽셀이나 %를 가집니다.
      - height : 표,줄,칸의 높이 설정하며 그 값으로 픽셀이나 %를 가집니다.
      - bgcolor : 표,줄,칸에 배경색 설정하며 그 값으로 색이름이나 RGB코드를 가집니다.
      - background : 표,줄,칸의 배경에 그림을 삽입하며 그 값으로 이미지경로를 가집니다.
      - align : 표,줄,칸를 정렬하며 그 값으로 left, right, center를가집니다.

 
 두번째로 <Table>에만 적용되는 속성
      -border : 표의 테두리 두께를 설정하며 그 값으로 픽셀값을 가집니다.(기본값은1)
      -cellspacing : 셀과 셀 간격을 설정하며 그 값으로 픽셀값을 가집니다.(기본값은1)
      -cellpadding : 셀과 문장과의 여백을 설정하며 그 값으로 픽셀값을 가집니다.
            (기본값은1)
      -bordercolorlight : 표의 테두리에 밝은 영역의 색을 설정하며 그 값으로 색이름이나
            RGB코드를 가집니다.
      -bordercolordark : 표의 테두리에 어두은 영역의 색을 설정하며 색이름이나 RGB코드를
            가집니다.

 
 세번째로 <Tr>, <Td>에만 적용되는 속성
      - colspan : 표의 칸을 합쳐주는 속성으로 그 값으로 합칠 칸수를 가집니다.
      - rowspan : 표의 줄을 합쳐주는 속성으로 그 값으로 합칠 줄수를 가집니다.
      - valign : 셀안의 내용을 정렬해주는 속성으로 그 값으로 top, middle, bottom을
             가집니다.
 
 

Table><Tr><Td>태그의 속성과 인자값을 정리해

태그
속성
인자
표현
설명
<Table>
<Tr>
<Td>
width
표,줄,칸의 너비
<table width=100> 표 너비를 100픽셀로
height
표,줄,칸의 높이
<table height=100> 표 높이를 100픽셀로
bgcolor
표,줄,칸의
배경색
<table bgcolor=red> 표 배경색을 빨강색으로
background
표,줄,칸의 배경그림
<table background=bg.gif> 표 배경그림을 bg.gif로
align
left
<table align=left> 표의 내용을 왼쪽정렬
center
<table align=center> 표의 내용을 가운데정렬
right
<table align=right> 표의 내용을 오른쪽정렬
<Table>
border
표의
테두리 두께
<table border=3> 표의 테두리 두께를 3픽셀로
cellspacing
셀과 셀간격
<table cellspacing=2> 셀과 셀사이의 간격을 2픽셀로
cellpadding
셀과
내용과의 여백
<table cellpadding=5> 셀과 셀안의 내용사이의 여백을 5픽셀로
bordercolorlight
표의
테두리에 밝은영역색
<table bordercolorlight=white> 표의 외곽선을 입체적으로 표현할때 밝은영역을 흰색으로
bordercolordark
표의
테두리에 어두운
영역의색
<table bordercolordark=black> 표의 외곽선을 입체적으로 표현할때 어두운 영역을 검은색으로
<Tr>
<Td>
colspan
합칠
칸수
<tr colspan=3> 3칸을 하나로 합침
rowspan
합칠
줄수
<tr rowspan=3> 3줄을 하나로 합침
valign
top
<td valign=top> 칸의 내용을 위로정렬
middle
<td valign=middle> 칸의 내용을 가운데로정렬
bottom
<td valign=bottom> 칸의 내용을 밑으로 정렬

 

 

<Table><Tr><Td>태그의 사용예제


<HTML>
      <HEAD>
            <TITLE>&lt;Table&gt;태그의 사용예제</TITLE>
      </HEAD>
      <BODY>
 

지금부터 표를 만들어 보겠습니다.<br>
미리 만들어볼 표의 구성을 말해보면... 테이블폭은 300, 높이는 200, 2줄에 3칸으로 구성하며, 첫번째줄은 3칸을 모두 합쳐보겠습니다.<br>
테이블 첫째줄색은 검은색 첫째줄색은 흰색, 나머지 둘째줄의 첫번째 칸은 빨강 두번째칸은 노랑 세번째칸은 초록색으로..<br>
테두리 두께는 0으로 셀에서 내용까지의 여백을 5픽셀로 셀과셀사이의 여백을 2픽셀로..<br>
첫번째줄 내용은 가운데로 배치..두번째줄 오른쪽 밑으로 정렬하겠습니다.<br><br><br>

<Table width="500" border="0" cellspacing="2" cellpadding="5" bgcolor="#000000" height="200">
      <Tr bgcolor="white" align="center">
            <Td colspan="3">첫번째줄(3칸합침)</Td>
      </Tr>
      <Tr align="right" valign="bottom">
            <Td bgcolor="red">두번째줄 첫번째칸</Td>
            <Td bgcolor="yellow">두번째줄 두번째칸</Td>
            <Td bgcolor="green">두번째줄세번째칸</Td>
      </Tr>
</Table>

      </BODY>
</HTML>

반응형