본문 바로가기

프로그래밍/HTML

테이블 만들기


1.<TABLE>  : 테이블을 선언하는 태그
형식)
 <TABLE>~ </TABLE>
 <TABLE BORDER = "픽셀수">~ </TABLE> : 테이블의 외곽선 지정.
 <TABLE WIDTH = "픽셀수" or " 가로폭 비율%" >~ </TABLE> : 테이블의 가로폭조절.
 <TABLE HEIGHT= "픽셀수" or " 세로폭 비율%" >~ </TABLE> : 테이블의 세로폭조절.
 <TABLE CELLSPACING= "픽셀수" >~ </TABLE> :  셀과 셀 사이의 여백을 조절.
 <TABLE CELLPADDING= "픽셀수" >~ </TABLE> :  셀과 문자 사이의 여백을 조절.
 <TABLE BHCOLOR= "색상명" or "RGB값"  >~ </TABLE> :테이블 색상.
 <TABLE ALIGN= "LEFT" or "RIGHT"  >~ </TABLE> :테이블 정렬.
 

2.<TR>     : Table Row. 테이블 내의 한 행을 정의
<TR BHCOLOR= "색상명" or "RGB값"  >~ </TR> : 행의 색상.
 
3.<TD>     : Table Data. 각 행의 셀을 만들 때 사용.
<TD ALIGN = "left" or "right" or "center"> : 셀의 데이터에 대한 좌우 정렬
<TD VALIGN = "top" or "bottom" or "middle" or "BASELINE"> : 셀의 데이터에 대한 상하
                                                                                       정렬
<TD ROWSPAN> : 셀의 행을 합치기 위한 태그
<TD COLSPAN> : 셀의 열을 합치기 위한 태그     
<TD WIDTH>   : 셀의 수평 길이를 나타낸다.     
<TD HEIGHT>  : 셀의 수직 길이를 나타낸다
<TD BHCOLOR= "색상명" or "RGB값"  >~ </TD> : 셀의 색상.

4.<TH>     : Table Header.행에 있는 셀을 제목으로 지정하여 강조

5.<CAPTION>: 테이블의 제목을 표시
<CAPTION ALIGN= "top" or "bottom">테이블 제목</CAPTION>

ex)
-------------------------------------------
<html>
     <head><title>URL을 통한 링크</title></head>
     <body>
 <center> <br>
 <table border>
<CAPTION ALIGN= "top" >테이블 제목</CAPTION>
  
<tr>
   <td>1-1</td>
   <td>1-2</td>
  </tr>
  <tr>
   <td>2-1</td>
   <td>2-2</td>
  </tr>
 </table>
 </center>
     </body>
</html>

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





ex)셀 합치기 예제
-------------------------------------------
<html>
     <head><title>URL을 통한 링크</title></head>
     <body>
 <center> <br>
 <table border>
 <CAPTION ALIGN= "top" >테이블 제목</CAPTION>  
  <tr>
   <td>1-1</td>
   <td>1-2</td>
   <td>1,-3</td>
   <td rowspan="3">1,2,3-4</td> 
  </tr>
  <tr>
   <td>2-1</td>
   <td>2-2</td>   
   <td>2-3</td> 
  </tr>
  <tr>
   <td>3-1</td>
   <td>3-2</td>   
   <td>3-3</td> 
  </tr>
  <tr>
   <td colspan="3">4-1,2,3</td>
   <td>4-4</td> 
  </tr>
 </table>
 </center>
     </body>
</html>

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

'프로그래밍 > HTML' 카테고리의 다른 글

입력 양식 만들기  (0) 2011.02.03
프레임 만들기  (0) 2011.02.03
이미지 삽입  (0) 2011.02.03
연결 태그  (0) 2011.02.03
목록 태그  (0) 2011.02.03