[table] HTML - <th> 태그 ★ - 테이블셀제목 (= th태그 = 티에이치태그) + th고정 (= 테이블헤드고정, 테이블헤더고정, 테이블상단고정) (HTML5수정)

1. <th> 예제 - 테이블셀 제목
2. <th> 정의
3. <th> 구문
4. <th> 속성 (HTML5에서 지원 중단된 속성은 CSS 이용)
5. <th> 예제 - <th> 고정

<th> 예제 - 테이블셀 제목 

<style> 

table,th,td {border:1px solid red;border-collapse:collapse;}

</style>

 

<table>
  <tr>
    <th>HTML - 홈짱닷컴 (homzzang.com)</th>
    <th>CSS - 홈짱닷컴 (homzzang.com) </th>
  </tr>
  <tr>
    <td>무료</td>
    <td>무료</td>
  </tr>
</table>

 

결과보기

<th> 정의

 
테이블(표) 내용의 각 열이나 행의 머리 제목 (=헤더 셀 Header Cell) 지정.

 

---

 

1. 
HTML <table> 태그엔 2종류의 셀 존재.
※ Cell (셀): 테이블 내 각각의 칸 의미.

<th> 

• (테이블 헤더 셀 Table Header cells)의 약자
• 각 열이나 행의 머리 제목   (예) 위 테이블 예제에서 "html"이나 "css"가 이에 해당
• 굵은 글씨체로 나타나며 중앙 정렬됨.

<td> 

• (테이블 표준 셀 Table Standard cells)의 약자
• 각 열의 내용   (예) 위 테이블 예제에서 "무료"가 이에 해당
• 일반 글씨체로 나타나며 왼쪽 정렬됨.

               

 

2. 
셀 병합은 아래 속성 이용.

• 가로 병합:   colspan="병합할 셀 숫자" 
• 세로 병합:   rowspan="병합할 셀 숫자"

 

3. 
HTML5에서 모든 레이아웃 (=정렬) 관련한 속성이 더 이상 지원 안 됨.

 

4. 
시작 태그와 종료 태그로 구성

5.
종료 태그 (= 닫는 태그)는 선택사항.
안 적어도 HTML 태그 상 유효한 코드임.
다만, XHTML에선 유효하지 않은 코드임.
따라서, 되도록이면 적어주는 게 좋음.

<table>

  <tr>

    <th>이 사이트 이름은?

    <td>홈짱닷컴 (Homzzang.com)

</table>

결과 보기 

<th> 구문

 
<table 속성="속성값">
  <tr>
    <th>머리 제목</th>
    <th>머리 제목</th>
  </tr>
  <tr>
    <td>내용</td>
    <td>내용</td>
  </tr>
</table>

 

<th> 속성 (HTML5에서 지원 중단된 속성은 CSS 이용)

<th> 예제 - <th> 고정

 

<style>

body { margin:0;}

table {

  margin: 32px 0 0;

  border-collapse:collapse;

}  

thead {

  position: fixed;

  top: 0;

  background:tomato;

}

th {

  border:1px solid silver;

  height: 30px;

}

td { border:1px solid silver; }

th:nth-of-type(1), td:nth-of-type(1) { width:50px; }

th:nth-of-type(2), td:nth-of-type(2) { width:150px; }

tr:nth-child(even) { background: #fee; }

</style>

<table>

  <thead>

    <tr><th>번호</th><th>가나다순</th></tr>

  </thead>

  <tbody>

    <tr><td>1</td><td>가</td></tr>

    <tr><td>2</td><td>나</td></tr>

    <tr><td>3</td><td>다</td></tr>

    <tr><td>4</td><td>라</td></tr>

    <tr><td>5</td><td>마</td></tr>

    <tr><td>6</td><td>바</td></tr>

    <tr><td>7</td><td>사</td></tr>

    <tr><td>8</td><td>아</td></tr>

    <tr><td>9</td><td>자</td></tr>

    <tr><td>10</td><td>차</td></tr>

    <tr><td>11</td><td>카</td></tr>

    <tr><td>12</td><td>타</td></tr>

    <tr><td>13</td><td>파</td></tr>

    <tr><td>14</td><td>하</td></tr>

    <tr><td>15</td><td>까</td></tr>

    <tr><td>16</td><td>따</td></tr>

    <tr><td>17</td><td>빠</td></tr>

    <tr><td>18</td><td>싸</td></tr>

    <tr><td>19</td><td>짜</td></tr>

    <tr><td>20</td><td>끝</td></tr>

  </tbody>

</table>

 

결과보기