HTML5 기본태그 (테이블 태그)
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