HTML5 기본태그 (테이블 태그)

개발/HTML 2013. 11. 26. 10:08

1. 테이블 기본태그
    <table>~</table> 태그는 테이블(표)을 만들어 준다. 행과 열로 구성된다.
    <tr>~</tr> 태그는 각 행을 기술할 때 사용하며 각행을 기술할 때마다 <TR>태그로 정의해 준다.
    <td>~</td>태그는 테이블 안의 데이터를 넣어준다. 즉, 칸을 만들어 준다.
    <th>~</th>태그는 테이블 안의 의 제목을 지정합니다.기본 글꼴은 볼드체,기본 정렬은 중앙정렬이다.
ex)
<!doctype html>
<HTML>
<HEAD><TITLE> 테이블연습</TITLE>
</HEAD>
<BODY>
<TABLE>
   <TR>
       <TD> 1행 1열 </TD>
       <TD> 1행 2열</TD>
   </TR>
   <TR>
       <TD> 2행 1열</TD>
       <TD> 2행 2열</TD>
   </TR>
   <TR>
       <TD> 3행 1열</TD>
       <TD> 3행 2열</TD>
   </TR>
</TABLE>
</BODY></HTML>

 

2. 테이블의 속성
    (1) BORDER, BORDERCOLOR
       1) BORDER=n 
            테이블의 테두리 굵기를 정의한다.
            N은 픽셀값을 의미
        2)BORDERCOLOR
            테이블의 테두리의 색을 지정한다.
            BORDERCOLOR="색명 또는 RGB값“의 형식으로 사용한다.

 

(2) WIDTH ,HEIGHT
    1)WIDTH
        테이블의 너비를 설정한다.
        WIDTH=n(n%)의 형식으로 사용한다.
        n은 픽셀이나 퍼센트 값을 설정할 수 있는데, 픽셀은 절대값을 나타내고, 퍼센트는 실행되는 창의

  비율로 나타낸다.

2)HEIGHT=n(n%)
    테이블의 높이를 설정한다.
    HEIGHT=n(n%) 의 형식으로 사용한다.
    n은 픽셀이나 퍼센트 값을 설정할 수 있는데, 픽셀은 절대값을 나타내고, 퍼센트는 실행되는 창의     비율로 나타낸다.


(3) ALIGN
    ALIGN=LEFT/CENTER/RIGHT : 각각 좌측, 중앙, 우측 정렬을 지정합니다.
    1)<table align=“ “>
        테이블 자체에대한 정렬이다. 즉, 실행되는 창에 대한 테이블의 위치이다.
    2)<tr align=“ “>
        한 줄에 대한 정열. 해당되는 줄의 셀에 위치하는 내용에 대한 정렬이다.
    3)<td align=“ “>
        한 칸에 대한 정열. 해당되는 칸의 셀에 위치하는 내용에 대한 정렬이다.

 

(4) BGCOLOR
    BGCOLOR="색상명 또는 RGB값" 
        1)<table bgcolor=“ “>
             테이블 전체의 바탕색을 지정합니다.
        2)<tr bgcolor=“ “>
             테이블 한 줄의 바탕색을 지정합니다.
        3)<td bgcolor=“ “>
             테이블 한 칸의 바탕색을 지정합니다.

 

(5) CELLSPACING, CELLPADDING
    1) CELLSPACING=n 
        <table>태그의 속성으로 테이블의 셀과 셀 사이의 간격을 n 픽셀 단위로 지정합니다.
         실무에서는 cellspacing=0 값이 주로 사용된다.
     2) CELLPADDING=n 
         <table>태그의 속성으로 테이블에서 문자와 셀 사이의 간격을 n 픽셀 단위로 지정합니다 
        실무에서는 cellpadding=0 값이 주로 사용된다


(6) COLSPAN, ROWSPAN
    1)COLSPAN=n
        칸(column)을 합침.
        즉, 오른쪽으로 n개 만큼의 셀을 하나로 합친다.(기본값은 1)
    2)ROWSPAN=n 
        줄(row)을  합침.
        즉, 아래쪽으로 n개 만큼의 셀을 하나로 합친다.(기본값은 1)


(7) NOWRAP

 

'개발 > HTML' 카테고리의 다른 글

HTML5 기본태그 (오디오 태그)  (0) 2013.11.26
HTML5 기본태그 (이미지 태그)  (0) 2013.11.26
HTML5 기본 태그( 목록 태그)  (0) 2013.11.26
HTML5 기본 태그( 글과 관련된 태그)  (0) 2013.11.21
HTML5 기본 문서  (0) 2013.11.21