교육 자료

자원봉사로 시작한 HTML 에 대한 교육 자료 및 계획을 정리했다. 교육자료는 http://www.homejjang.com/ 라는 곳에서 발췌했다.
매주 일정 분량의 내용을 텍스트파일(.txt)로 만들어 메일(congmi@hanmail.net)로 전송한다.

전체적인 홈페이지에 대한 설명 - 1.doc
기본적인 태그 설명 - 2.doc
기본적인 태그 설명(2) - 3.zip
기본적인 태그 설명(3) - 4.zip
고급 태그 설명 - 5.zip
고급 태그 설명(2) - 6.zip
고급 태그 설명(3) - 7.zip

TH 는 테이블 헤더 태그(Table Header)라고 불리며, 테이블에서 헤더 셀 또는 테이블 헤더를 지정하는 데 사용됩니다.

헤더 셀 <th> - 테이블의 헤더 (굵은 텍스트로 기본적으로 가운데 정렬됩니다.)
표준 셀 <td> - 테이블의 데이터 (일반 텍스트로 기본적으로 왼쪽 정렬됩니다.)

<html>
 <head>
    <title>html th 태그 예제샘플</title>
 </head>
 <body>
   <h1>th 태그의 예제샘플입니다</h1>
   <p>
 
      <TABLE border=1>
          <CAPTION>Cups of coffee consumed by each senator</CAPTION>
          <TR>
             <TH>Name</TH>
             <TH>Cups</TH>
             <TH>Type of Coffee</TH>
             <TH>Sugar?</TH>
          <TR>
             <TD>AAAAA</TD>
             <TD>10</TD>
             <TD>BBBBBB</TD>
             <TD>No</TD>
          <TR>
             <TD>XXXXXX</TD>
             <TD>5</TD>
             <TD>PPPPPPP</TD>
             <TD>Yes</TD>
      </TABLE>
 
</body>
</html>

HTML <th> 태그의 scope 속성으로서, 테이블의 헤더 셀의 범위를 지정하는 데, 사용됩니다.
기본 구문은 다음과 같습니다.

<th scope="col | colgroup | row | rowgroup"></th>

<table>
<caption>cups of coffee consumed by each senator</caption>
<tr>
   <th scope="col | colgroup | row | rowgroup">name</th>
   <th scope="col | colgroup | row | rowgroup">cups</th>
   <th scope="col | colgroup | row | rowgroup">type of coffee</th>
   <th scope="col | colgroup | row | rowgroup">sugar?</th>
<tr>
   <td>aaaaa</td>
   <td>10</td>
   <td>bbbbbb</td>
   <td>no</td>
<tr>
   <td>xxxxxx</td>
   <td>5</td>
   <td>ppppppp</td>
   <td>yes</td>
</table>

<table border=1 cellpadding="0" cellspacing="0">
<tr>
<th>/</th><th width=100 height=30 scope="col">봄</th><th width=100 height=30 scope="col">여름</th>
</tr>
<tr>
<th width=100 height=30 scope="row">서울</th><td> 1 </td><td> 2 </td>
</tr>
<tr>
<th width=100 height=30 scope="row">뉴욕</th><td> 3 </td><td> 4 </td>
</tr>
</table>

위와같이 표(table)를 구성할때 각 행과 각 열에 제목을 넣을 경우 header 제목용 셀 th 태그를 적용하면 글자가 bold 체로 굵게 표시되고 가운데로 정렬을 하게 됩니다.

scope 태그는 th 태그의 속성으로 해당 열과 행의 각 셀(td)의 제목이라는 정보를 소스상에서 제공을 하면서 col 은 해당 열의 제목을 row 는 해당 행의 제목이라는 정보를 제공하는 것으로 페이지상에는 표시되지 않습니다.

<html>
<body>
<table border="1">
 
<caption>문숙의 자녀</caption>
 
<tr>
 
<td>&nbsp;</td>
 
<th id="이름">이름</th>
 
<th id="나이">나이</th>
 
<th id="생일">생일</th>
 
</tr>
 
<tr>
 
<th rowspan="2" id="친자">친자</th>
 
<th id="철수">철수</th>
 
<td headers="친자 철수 나이">5</td>
 
<td headers="친자 철수 생일">4월 5일</td>
 
</tr>
 
<tr>
 
<th id="미라">미라</th>
 
<td headers="친자 미라 나이">8</td>
 
<td headers="친자 미라 생일">1월 14일</td>
 
</tr>
 
<tr>
 
<th id="양자">양자</th>
 
<th id="희진">희진</th>
 
<td headers ="양자 희진 나이">12</td>
 
<td headers="양자 희진 생일">11월 12일</td>
 
</tr>
 
</table>
</body>
</html>

caption	table 태그 안에 선언이 되었음에도, 표 바로위에 가운데 정렬이 되면서 출력한다
th id	요소를 식별하기 위해 부여한다
td headers	테이블 헤더 셀에 대한 식별자의 공백으로 구분 된 목록을 지정하는 것이다

교육 자료

보충자료

TH 태그는 무엇인가요?

TH 태그 사용예

scope 태그는 무엇인가요?

scope 태그 사용예

추가 설명

HTML 코드 분석