HTML 테이블 헤더

소개

HTML 에서 테이블은 데이터를 행과 열로 표시하는 데 사용됩니다. <thead> 태그는 테이블의 헤더 행을 정의하는 데 사용됩니다. 헤더 행은 일반적으로 아래 열의 내용을 레이블링하고 설명 레이블을 담는 데 사용됩니다.

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

테이블 생성하기

index.html 파일을 생성하고 텍스트 편집기에서 엽니다. 여기에 HTML 코드를 작성합니다.

<table> 태그를 사용하여 테이블을 생성합니다.

<table>
  <!-- content goes here -->
</table>

테이블 헤더 추가하기

<thead> 태그를 추가하여 테이블의 헤더 행을 정의합니다. <thead> 태그 내부에 <th> 태그를 사용하여 테이블 헤더 행을 추가합니다.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- table content goes here -->
  </tbody>
</table>

테이블에 내용 삽입하기

<tbody> 태그와 중첩된 <tr> 및 <td> 태그를 사용하여 테이블에 내용을 추가합니다.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
    </tr>
    <tr>
      <td>Content 4</td>
      <td>Content 5</td>
      <td>Content 6</td>
    </tr>
  </tbody>
</table>

테이블 헤더 스타일 지정하기

CSS 를 사용하여 <thead> 태그의 스타일을 지정합니다. 아래는 헤더의 배경색을 회색으로 변경하는 예시입니다.

<style>
  thead {
    background-color: gray;
  }
</style>

요약

<thead> 태그는 테이블의 헤더 행을 정의하는 데 사용됩니다. 이는 <table> 태그의 또 다른 자식 요소이며, <tbody> 및 <tfoot> 태그 앞에 위치합니다. CSS 를 사용하여 테이블 헤더의 스타일을 지정하여 시각적으로 더 매력적으로 만들 수 있습니다.