1. 테이블의 기본구조
많은 웹사이트가 테이블로 구성되어 있을 정도로 테이블은 홈페이지를 작성하는데 중요하다.
|
<table border="숫자"> <caption>테이블 제목</caption> <tr>테이블 행 <th>테이블 셀의 제목</th> <td> 테이블 셀의 내용</td> <tr> 테이블의 행 </caption> </table> |
1.1. 속성
1.1.1. <TABLE>....</TABLE>
|
BORDER="숫자" |
표의 테두리의 굵기를 지정한다 |
|
CELLPADDING="숫자" |
셀 경계와 셀 안에 들어있는 데이터 사이의 여백이다. |
|
CELLSPACING="숫자" |
각 셀사이의 간격을 픽셀값으로 설정한다. |
|
WIDTH, HEIGHT="숫자" |
테이블의 너비와 높이를 지정한다. %로도 가능하다. |
|
FRAME |
테이블의 외곽선의 모양을 설정한다. |
|
RULES |
셀 구분선의 모양을 설정한다. |
|
BGCOLOR=색상명 |
테이블의 배경색을 지정한다. |
|
BORDERCOLOR=색상명 |
테이블 외곽선 전체의 색을 지정한다. |
|
BACKGROUND="이미지 이름" |
배경 이미지를 지정한다. |
|
ALIGN=left/center/right |
테이블의 정렬을 지정한다. |
1.1.2. <CAPTION>...</CAPTION>
CAPTION은 테이블의 제목을 붙이는 태그로 시작과 끝내는 태그로 이루어진다.
|
align=top/bottom/left/right |
테이블의 제목의 정렬상태를 지정한다. |
<TR>...</TR>
테이블을 만들 때 행(가로 선)을 만든다.
테이블을 만들때는 행이 몇 개인가 먼저 생각한다. 그 수만큼 <TR>을 넣는다.
|
align=left/center/right |
해당되는 행에 있는 모든 셀안에 들어있는 데이터의 수평정렬 방식을 나타낸다. |
|
valign=top/middle/bottom |
해당되는 행안에 있는 데이터의 수직정렬 방식을 나타낸다. |
1.1.3. <th>...</th>와 <td>...</td>
<table>로 테이블의 시작을 알리고 <tr>로 행을 결정한 다음 각 행에 들어갈 셀의 데이터를 만들어 준다.
<td>(table data)는 셀의 내용을 입력한다.
<th>(table header)는 열의 제목을 입력할 때 사용한다. 내용은 <td>와 동일 하지만 <th>는 굵은 글꼴을 사용하고 가운데 정열로 표시한다.
<td>와 <th>는 해당 셀에 있는 데이터에만 적용된다.
|
align=left(<td>의 기본값) center(<th>의 기본값) right |
그 행에 들어 있는 데이터의 수평정렬방식을 나타낸다. |
|
valign=top middle bottom |
그 행안에 있는 데이터의 수직정렬을 설정 |
|
colspan=숫자 rowspan=숫자 |
테이블에서 셀 합치기를 한다. colspan: 셀을 세로방향으로 병합(열 병합) rowspan: 셀을 가로방향으로 병합(행 병합) |
1.2. 테이블 태그예제
1.2.1. <table border="숫자">
border="숫자"값으로 숫자를 쓰면 테이블의 가장자리 선 굵기가 지정된다. <border>만 지정하면 기본값1이 적용된다.
|
<HTML> <HEAD> <TITLE>border 속성예제</TITLE> </HEAD> <BODY> 테두리선 굵기 <table> <tr> <th>남자</th> <th>여자</th> <tr> <td>45명</td> <td>26명</td> </table><p> 테두리선 굵기 BORDER <table border> <tr> <th>남자</th> <th>여자</th> <tr> <td>45명</td> <td>26명</td> </table><p> 테두리 선 굵기 border=10 <TABLE BORDER=10> <tr> <th>남자</th> <th>여자</th> <tr> <td>45명</td> <td>26명</td> </table><p> </body> </html> |
1.2.2. 브라우저 화면
1.3. <CAPTION> 태그 예제
caption을 이용하여 테이블의 제목을 붙인다.
1.3.1. HTML 문서
|
<HTML> <HEAD> <TITLE>border 속성예제</TITLE> </HEAD> <BODY> <table border> <caption>CAPTION 예제</caption> <tr> <th>여학생</th> <th>남학생</th> <tr> <td>30명</td> <td>10명</td> </table> </body> </html> |
1.3.2. 브라우저 화면
1.4. <TABLE height="200" width="200"> 예제
테이블의 크기를 설정한다.
1.4.1. HTML 문서
|
<HTML> <HEAD> <TITLE>너비와 높이가 200픽셀인 표</TITLE> </HEAD> <BODY> <h4>너비와 높이가 200픽셀인 표</h> <table border height=200 width=200> <tr> <td>하회마을</td> <td>도산서원</td> <tr> <td>병산서원</td> <td>봉정사</td> </table> </body> </html> |
1.4.2. 브라우저 화면
1.5. <TD height="숫자" width="숫자">
표에서 각 셀의 크기를 설정한다.
1.5.1. HTML 문서
|
<HTML> <HEAD> <TITLE>셀의 크기</TITLE> </HEAD> <BODY> 첫번재 행의 높이가 50픽셀인표 <table border> <tr height=50> <td>A11</td> <td>A12</td> <td>A13</td> <tr> <td>A21</td> <td>A22</td> <td>A23</td> </table><p> 첫번째 행과 두번째 행의 높이가 각각 50픽셀과 100픽셀인 표 <table border> <tr height=50> <td>A11</td> <td>A12</td> <td>A13</td> <tr height=100> <td>A21</td> <td>A22</td> <td>A23</td> </table><p> 첫번째 행과 두번째 열의 너비가 30픽셀인 표 <table border height=200 width=150> <tr> <td width=30>A11</td> <td>A12</td> <td>A13</td> <tr> <td>A21</td> <td>A22</td> <td>A23</td> </table><p> </body> </html> |
1.5.2. 브라우저 화면
1.6. <TABLE cellpadding="숫자" cellspacing="숫자">
1.6.1. HTML 문서
|
<HTML> <HEAD> <TITLE>셀의 크기</TITLE> </HEAD> <BODY> <table border> <tr> <td>A11</td> <td>A12</td> <td>A13</td> <tr> <td>A21</td> <td>A22</td> <td>A23</td> </table><p> cellpadding=10 <table border cellpadding=10> <tr> <td>A11</td> <td>A12</td> <td>A13</td> <tr height=100> <td>A21</td> <td>A22</td> <td>A23</td> </table><p> cellspacing=10 <table border cellspacing=10> <tr> <td>A11</td> <td>A12</td> <td>A13</td> <tr> |
1.6.2. 브라우저 화면
1.7. 셀 병합하기
colspan(가로 합치기)과 rowspan(세로 합치기)을 이용하여 두 개이상의 셀을 병합한다.
1.7.1. HTML 문서
|
<HTML> <HEAD> <TITLE>셀 병합하기</TITLE> </HEAD> <BODY> <table border=10> <caption><B>A 대학 재학생 현황</b></caption> <tr> <th> 단과대학</th> <th colspan=2>자연대</th> <th colspan=2>인문대</th> <th colspan=2>사회대</th> <tr> <th rowspan=2>재학생<br>현화</th> <th>남</th> <th>여</th> <th>남</th> <th>여</th> <th>남</th> <th>여</th> <tr> <td>230</td> <td>450</td> <td>150</td> <td>135</td> <td>235</td> <td>204</td> </table> </body> </html> |
1.7.2. 브라우저 화면
1.8. 테이블의 배경색 지정하기
1.8.1. HTML 문서
|
<HTML> <HEAD> <TITLE>셀 병합하기</TITLE> </HEAD> <BODY> <h4>첫번째 행의 배경색이 노란색<br> 테두리선의 색은 빨간색</h4> <table border bordercolor=red> <tr bgcolor=yellow> <td>하회마을</td> <td>도산서원</td> <tr> <td>병산서월</td> <td>봉정사</td> </table><p>
</body> </html> |
1.8.2. 브라우저 화면
1.9. 시간표 만들기 예제
1.9.1. HTML 문서
|
<HTML> <HEAD> <TITLE>시간표 </TITLE> </HEAD> <BODY> <table border="5" height=550 bordercolor="#78B0D0"> <caption> 시간표 예제</caption> <tr> <th ><p> </th> <th width=100 >MONDAY</th> <th width=100>TUESDAY</th> <th width=100>WEDNESDAY</th> <th width=100>THURDAY</Th> <th width=100>FRIDAY</TH> </tr> <tr> <td height=50>1</td> <td>컴퓨터<br> 공학총론</TD> <td rowspan=2>인터넷과 <br>데이터 정보</td> <td><p> </td> <td rowspan=2> 통계<br>그래픽스</td> <td> <p> </td> </tr> <tr> <td>2</td> <td rowspan=2>표본조사 입문</td> <td>표본조사 입문</td> <td> 통계수학 </td> </tr> <tr> <td>3</td> <td>통계그래픽스</td> <td><p> </td> <td>인터넷과<br> 데이터정보</td> <td><p> </td> </tr> <tr> <td>4</td> <td><p> </td> <td><p> </td><td><p> </td> <td><p> </td><td><p> </td> </tr> <tr> <td>5</td> <td><p> </td><td><p> </td><td><p> </td> <td><p> </td><td><p> </td> </tr> <tr> <td>6</td> <td><p> </td><td><p> </td><td><p> </td> <td rowspan=2>통계수학</td><td><p> </td> </tr> <tr> <td>7</td> <td>영어회화</td><td><p> </td><td><p> </td><td><p> </td> </tr> <tr> <td>8</td> <td><p> </td><td><p> </td><td>영어회화</td><td><p> </td><td rowspan=3>컴퓨터응용</td></tr> <tr> <td>9</td><td rowspan=2>통계<br>데이터베이스</td> <td rowspan=2>컴퓨터<br>공학총론</td><td><p> </td><td><p> </td></tr> <tr> <td>10</td><td><p> </td><td><p> </td></tr> </table> </body> </html> |
1.9.2. 브라우저 화면
