HTML 테이블 헤더 셀

소개

HTML 에서 <th> 태그는 셀 그룹의 헤더로 하나의 셀을 정의하는 데 사용됩니다. HTML 테이블 셀에는 헤더 셀과 표준 셀의 두 가지 유형이 있습니다. 헤더 셀은 셀 그룹의 헤더로 사용되며, 표준 셀은 테이블의 데이터를 포함합니다.

이 단계별 랩은 <th> 태그를 사용하여 HTML 테이블에서 헤더 셀을 만드는 방법을 간략한 설명과 코드 조각과 함께 안내합니다.

참고: index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

기본 HTML 테이블 생성하기

먼저, HTML 을 사용하여 테이블을 생성해야 합니다.

테이블을 생성하려면 <table> 태그를 사용해야 하며, 각 행은 <tr> 태그로, 각 셀은 <td> 태그로 나타냅니다.

예를 들어, 다음 코드는 두 개의 행과 두 개의 열이 있는 간단한 HTML 테이블을 생성합니다.

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

헤더 셀 생성하기

헤더 셀을 생성하려면 헤더 셀을 추가하려는 테이블 행에서 <td> 태그를 <th> 태그로 바꿔야 합니다.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

태그에 속성 추가하기

<th> 태그는 헤더 셀의 서식과 구조를 지정하는 데 도움이 되는 다양한 속성을 지원합니다.

• Abbr (약어): 셀 내용의 짧은 약어를 정의하는 데 사용됩니다.
• Colspan (열 병합): 셀이 병합할 열의 수를 지정합니다.
• Rowspan (행 병합): 셀이 병합할 행의 수를 지정합니다.
• Scope (범위): 헤더 태그가 관련되는 셀을 지정합니다.
• Header (헤더): 셀과 관련된 하나 이상의 헤더 셀을 지정하는 데 사용됩니다.

예를 들어, 다음 코드는 "abbr" 및 "colspan" 속성을 가진 헤더 셀을 생성합니다.

<table>
  <tr>
    <th abbr="Header 1" colspan="2">Header 1 &amp; Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

요약

이 단계별 랩 (lab) 에서 <th> 태그를 사용하여 HTML 테이블에서 헤더 셀을 생성하는 방법을 배웠습니다. HTML 테이블 헤더는 데이터를 구조화된 방식으로 구성하는 데 중요합니다. th 태그를 사용하여 헤더 셀을 생성하고 서식 및 속성을 관리할 수 있습니다.