[스크랩] HTML 강좌: 테이블(TABLE)

1. 테이블(TABLE)을 만들기 위한 기본태그순서 <table> 테이블(표)의 시작 <th> Table Header 의 약자로 <table> 태그내에 쓰이며, 각각의 행에 제목을 설정합니다. <td> 와 거의 같은 역할이지만, Header(타이틀) 태그로 글자가 조금 크고 굵게 표현됩니다. <tr> Table Row 의 약자로 <table> 태그내에 들어가며 표의 행을 만듭니다. <td> Table Data 의 약자로 각 열에 셀을 만들거나 필요한 만큼의 칸을 만들게 됩니다. </td> 표의 셀 만들기를 끝내는 태그입니다 </tr> 표의 행 만들기를 끝내는 태그입니다 </table> 표 만들기를 끝내는 태그명령입니다 위의 테이블 만들기 태그 사용순서를 꼭 익혀 두세요 !! 2. 테이블(TABLE) 태그에 사용되는 속성들과 용도 ⊙<TABLE>   </TABLE> ⊙ *☞ 이 태그들은 표의 영역을 선언하는 태그로서 표의 처음과 끝을 지정합니다. 이 태그들안에 아래의 태그들인 <th> </th> <tr> </tr> <td> </td> 들이 들어가게 됩니다. <TABLE > 태그안에 넣을 수 있는 속성들 <TABLE 속 성> BORDER 표의 테두리(선)의 형태를 설정한다. 숫자 넣으면 수자에 해당하는 굵기로 테두리가 표시된다. BORDERCOLOR 표의 테두리(선)의 색상을 설정한다. CELLSPACING 셀과 셀 사이의 간격(여백)을 주고자 할 때 사용한다. CELLPADDING 셀 내부에서의 간격(여백)을 주고자 할 때 사용한다. WIDTH 표(행)의 가로 넓이를 지정한다. HEIGHT 표(행)의 세로 높이를 지정한다. ALIGN 표의 정렬방식을 지정해 주는 속성(Align=left,center,right,top,bottom,baseline)   ⊙<TD>   </TD> ⊙ *☞ 이 태그들은 테이블의 열[가로 칸(셀)]을 만듭니다. <TD > 태그안에 넣을 수 있는 속성들 <TD 속 성> ALIGN 헤더의 셀에 들어가는 제목의 정렬방식을 설정하는 속성으로 디폴트값은(기본값) CENTER 이다.(LEFT, RIGHT, CENTER) VALIGN 표 내부 또는 각 행의 내부의 내용들에 대한 정열방법을 설정. ※ 속성값 : TOP, MIDDLE, BOTTOM, BASELINE COLSPAN 셀(가로,열)과 셀을 합치고자 할때 쓴다 값은 숫자로 넣으며 설정한 숫자의 셀(가로,행)들을 합해서 하나의 셀로 만들어 준다. ROWSPAN 행(세로)과 행(세로)을 합치고자 할때 쓴다 값은 숫자로 넣으며 설정한 숫자의 열(세로)들을 합해서 하나의 행로 만들어 준다. WIDTH 셀(칸)의 가로 넓이를 지정한다. HEIGHT 셀(칸)의 세로 높이를 지정한다. NOWRAP 셀안의 내용들이 설정한 셀 크기를 벗어나게 되면 자동으로 다음줄로 줄바꿈을 하게 되는데 이 속성을 넣으면 셀 안의 내용 이 셀 크기를 넘어서더라도 줄바꿈을 하지 않고 내용의 길이만큼 늘여준다.   ⊙<TR>   </TR> ⊙ *☞ 이 태그는 표의 행(세로)을 만들때 쓰며, 열(가로)을 끝내는 태그 뒤에 이 태그를 넣어 주어야만 줄바꿈을 하여 다음행이 만들어 지게 된다. 이 태그를 넣지 않으면 줄바꿈이 안되고 계속해서 가로로 열(셀)이 이어져서 만들어 진다.   </td> 다음에 넣는다. 기본 테이블과 colspan , rowspan 예 1행2열 표 2행3열 표 1행의 셀 2개를 합쳐 하나의 셀로 첫번째 행을 합쳐 하나의 행으로 <table border="1" width="100">  <tr>   <td>a</td>   <td>b</td>  </tr> </table> <table border="1" width="100">  <tr>   <td>a</td>   <td>b</td>   <td>c</td>  </tr>  <tr>   <td>d</td>   <td>e</td>   <td>f</td>  </tr> </table> <table border="1" width="100">  <tr>   <td colspan="2">A</td>  </tr>  <tr>   <td>B</td>   <td>C</td>  </td> </table> <table border="1" width="100">  <tr>   <td rowspan="2">A</td>   <td>B</td>  </tr>  <tr>   <td>C</td>  </tr> </table> 　a b a b c d e f A B C A B C 테이블 셀에 여백(CELLPADDING , CELLSPACING)을 설정하기,배경색 넣기 테이블의 셀 안에 여백 주기 셀과 셀 사이의 여백 주기 예제 테이블에 배경색을 넣기 원하는 셀에 색상을 넣기 <TABLE BORDER=1 CELLPADDING="10" WIDTH="100" > <TR> <TD> A </TD> <TD> B </TD> <TR> <TD> C </TD> <TD> D </TD> </TR> </TABLE> <TABLE BORDER=1 CELLSPACING="10" WIDTH="100" > <TR> <TD> A </TD> <TD> B </TD> <TR> <TD> C </TD> <TD> D </TD> </TR> <TABLE> <TABLE BORDER=2 bgcolor=red cellpadding=3 cellspacing=3 bordercolor=black WIDTH="100"> <TR> <TD> A </TD> <TD> B </TD> </TR> </TABLE> <TABLE BORDER=2 bgcolor=red cellpadding=3 cellspacing=3 bordercolor=black WIDTH=100> <TR> <TD align=center bgcolor=red>빨간</TD> <TD align=center bgcolor=blue>파란</TD> <tr> <TD align=center bgcolor=yellow>노란</TD> <TD align=center bgcolor=pink>분홍</TD> </TR> </TABLE> A B c D A B C D A B 빨간 파란 노란 분홍 응 용 테이블에 각 셀마다 다른 배경그림을 넣기 colspan 과 rowspan 응용 테이블에속에 두개의 테이블넣기 <TABLE BORDER=2 height=150 WIDTH=120 bgcolor=red cellpadding=1 cellspacing=1 bordercolor=black> <TR> <TD align=center background=http://www.lovingstar.net/images/114958dong.gif> <font color=white>배경 1</TD> <TD align=center background=http://www.lovingstar.net/images/bg6.gif>배경 2</TD> <tr> <TD align=center background=http://www.lovingstar.net/images/c037.gif>배경 3</TD> <TD align=center background=http://www.lovingstar.net/images/c002.gif>배경 4</TD> </TR> </TABLE> <table border="1" width="150"> <tr> <td rowspan="2">A</td> <td colspan="2">B </td> <td rowspan="3">c</td> </tr> <tr> <td>d</td> <td>e</td> </tr> <tr> <td colspan="3">f</td></tr> </table>　 <TABLE BORDER=2 height=200 cellpadding=0 cellspacing=3 bordercolor=green> <TR> <TD WIDTH=150><CENTER>바깥쪽 첫번째 셀 <table border=1 height=100 bordercolor=blue> <tr> <td width=80%>내부 테이블 1의 1행</td> <tr> <td width=80%>내부 테이블 2의 2행</td> </tr> </table> </td> <TD WIDTH=150><CENTER>바깥쪽 두번째 셀 <table height=100 border=1 bordercolor=red> <tr> <td width=80%>내부 테이블 2 의 1행</td> <tr> <td width=80%>내부 테이블 2의 2행</td> </tr> </table> </td></TR></TABLE> 배경 1 배경 2 배경 3 배경 4 A B c d e f 　 바깥쪽 첫번째 셀 내부 테이블 1의 1행 내부 테이블 2의 2행 바깥쪽 두번째 셀 내부 테이블 2 의 1행 내부 테이블 2의 2행 ⊙테이블을 만들때 이 점은 반드시 기억하세요 !! ⊙ *☞ 테이블은 폐쇄된 별도의 내부공간을 만드는 것입니다. 폐쇄된 공간과 같은 것은들 반드시 태그종결을 해 주어야 합니다. 다른 태그들도 마찬가지지만 특히 테이블 태그 같은 것들은 종결태그를 빠뜨리게 되면 테이블이 종결이 안되고 계속 유지되기 때문에 테이블이 시작하는 부분부터 원하지 않는 부분들까지 모두 테이블 안으로 포함되어져 버리게 됩니다. 그렇게 되면 아래의 모든 레이아웃들이 엉망이 되겠지요. 테이블 태그의 각각의 종결 태그들은 </th> , </tr> , </td> , </table> 입니다. 특히 초보분들은 테이블을 만든 후 이 부분들을 반드시 체크해 보는것을 잊지 마세요...!!!!

출처 : 마음외출쉼터

글쓴이 : 볼레로 원글보기

메모 :