TABLE 만들기

<TABLE>...</TABLE> <Table> 과 </Table> 태그 사이에 줄(row)에 해당하는 <TR> </TR> 태그를 넣고 그 사이에 각 칸에 들어갈 표의 내용을 나타내는 <TD> </TD> 태그가 들어간다. <TD>는 항상 <TR>에 의해 둘러싸여야 한다. <TD> 대신 <TH> 태그를 쓰면 수평, 수직 정렬이 자동으로 가운데가 되며, 볼드(bold)체로 표시된 표제가 된다. 테이블의 속성 테이블 크기 : WIDTH = (픽셀의 수 또는 백분율), HEIGHT = (픽셀의 수 또는 백분율) 테두리 : BORDER = 픽셀의l 수 테이블 내부의 선 굵기 : CELLSPACING = 픽셀의 수 테이블 내용과 선 간의 여백 : CELLPADDING = 픽셀의 수 셀 합치기 여러 행에 걸치는 셀 : ROWSPAN = 행의 수 여러 열에 걸치는 셀 : COLSPAN = 열의 수 한국의 미술관 서울 시립 미술관 http://www.metro.seoul.kr/muse/ 국립 현대 미술관 http://www.moca.go.kr <table BORDER="1"> <caption>한국의 미술관</caption> <tr> <td>서울 시립 미술관</td> <td><a HREF="http://www.metro.seoul.kr/muse/">www.metro.seoul.kr</a></td> </tr> <tr> <td>국립 현대 미술관</td> <td><a HREF="http://www.moca.go.kr">www.moca.go.kr</a></td> </tr> </table> 설교 제목 본 문 날 자 서로 사랑하라 요한1서4:7-12 6/3/2007 발을 내 딛으라 여호수아3:14-17 6/10/2007 <table BORDER="10" WIDTH="450" HEIGHT="30"> <tr> <td>설교 제목</td> <td>본 문</td> <td>날 자</td> </tr> <tr> <td>서로 사랑하라</td> <td>요한1서4:7-12</td> <td>6/3/2007</td> </tr> <tr> <td>발을 내 딛으라</td> <td>여호수아3:14-17</td> <td>6/10/2007</td> </tr> </table> 은혜 찬양 제 목 가 수 은혜 찬양 제 목 가 수 은혜 찬양 제 목 가 수 <table BORDER="1" CELLPADDING="10"> <tr> <td>은혜 찬양</td> <td>제 목</td> <td>가 수</td> </tr> <tr> <td>은혜 찬양</td> <td>제 목</td> <td>가 수</td> </tr> <tr> <td>은혜 찬양</td> <td>제 목</td> <td>가 수</td> </tr> </table> 영화 제목 감독 주연 Robocop (1987) 풀 버흐벤 피터 웰 러... Batman (1989) 팀 버튼 마이클 키 튼... <table BORDER="1" CELLSPACING="15"> <tr> <td>영화 제목</td> <td>감독</td> <td>주연</td> </tr> <tr> <td>Robocop (1987)</td> <td>풀 버흐벤</td> <td>피터 웰러...</td> </tr> <tr> <td>Batman (1989)</td> <td>팀 버튼</td> <td>마이클 키튼...</td> </tr> </table> 많이 쓰이고 있는 웹 브라우저 회사 내용 Netscape 종류 Navigator 2.0 Navigator 3.0 Navigator 4.0 Microsoft 종류 Internet Explorer 3.0 Internet Explorer 4.0 <table BORDER="1" WIDTH="60%"> <caption>많이 쓰이고 있는 웹 브라우저 </caption> <tr> <th WIDTH="40%">회사 </th> <th WIDTH="62%" COLSPAN="2">내용</th> </tr> <tr> <td WIDTH="40%" ROWSPAN="3">Netscape</td> <td ALIGN="CENTER" WIDTH="25%" ROWSPAN="3">종류</td> <td WIDTH="37%">Navigator 2.0</td> </tr> <tr> <td WIDTH="37%">Navigator 3.0</td> </tr> <tr> <td WIDTH="37%">Navigator 4.0</td> </tr> <tr> <td WIDTH="40%" ROWSPAN="2">Microsoft</td> <td ALIGN="CENTER" WIDTH="25%" ROWSPAN="2">종류</td> <td WIDTH="37%">Internet Explorer 3.0</td> </tr> <tr> <td WIDTH="37%">Internet Explorer 4.0</td> </tr> </table> 표 작성하기 정 리 　 표를 만드는 태그는 <table>로 시작해서 </table>로 끝나게 됩니다. <table>태그 안에 많은 태그들이 또, 들어가게 됩니다. 표를 이용하면 이미지나 테스트의 정리 뿐만  아니라, 깔끔한 홈페이지를 만들수 있습니다. 표를 사용하지 않으면, 정렬에 많은 어려움이 있습니다. -<TABLE>태그의 속성 <table border=n> 표 테두리의 두께를 설정합니다. 0은 테두리가 없고, 1부터 커질수록 두꺼워 집니다. <table cellspacing=n> 셀과 셀 사이의 간격입니다. 0은 간격이 없고, 1부터 커질수록 넓어집니다. <table cellpadding=n> 셀의 크기를 조절합니다. 0은 글자크기에 따라 조절되고, 1부터 커질수록 커집니다. <table width=n> 표의 가로크기 입니다. <table height=n> 표의 세로크기 입니다. <table bgcolor="색상명 "> 표의 색깔을 RGB 컬러나, 색상명으로 나타냅니다. <table background="파일명 "> 표의 배경을 그림파일로 합니 다. <table align="정렬 "> 표를 정렬합니다. (left,center,right) 가장 기본적인 표의 양식은 <table>태그안에 <tr>태그가 들어가고, <tr>태그안에 <td> 태그가 들어가게 됩니다. 그리고 </table>로 마치게 되는 것입니다. 여기서 <tr>태그는 하나의 열이 시작하는 것이고, <tr>태그안에 <td>태그가 들어가서  셀을 만들어 내는 것입니다. 그러므로 하나의 셀의 끝에는 </td>태그를 넣어주고,  하나의 열을 마칠 때에는 </tr>를 반드시 넣어주어야 합니다. 그 다음에 </table>태그 입니다. 그러면 가장 기본적인 표 태그의 예제를 보겠습니다. 셀은 3*2입니다. <table border=0> <tr> <td>첫번째 셀</td> <td>두번째 셀</td> <td>세번째 셀</td> </tr> <tr> <td>두째열 첫번째 셀</td> <td>두째열 두번째 셀</td> <td>두째열 세 번째 셀</td> </tr> </table> 그러면 이번에는 <table>태그의 속성을 사용해 보겠습니다. 셀은2*2입니다. <table border=2 cellspacing=2 cellpadding=2 width=200 height=50 bgcolor="#FF9B04" align=center> <tr> <td>인터넷</td> <td>internet</td> </tr> <tr> <td>컴퓨터</td> <td>computer</td> </tr> </table>