thead 태그

thead 태그는 표의 상단 부분을 정의합니다. 일부 그룹에 즉시 CSS 스타일을 적용할 수 있도록 행을 그룹화하는 데 사용됩니다. 하나의 표에는 하나의 thead 태그만 존재할 수 있습니다.

thead 태그는 종종 tbody 및 tfoot 태그와 함께 사용되어 HTML 표의 상단, 본문, 하단 부분을 정의합니다.

예제

thead 태그로 그룹화된 행에 color 속성을 사용하여 빨간색 텍스트 색상을 적용해 보겠습니다:

html<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>성</th>
      <th>급여</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>name1</td>
      <td>surn1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>name2</td>
      <td>surn2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>개수: 2</td>
      <td>-</td>
      <td>총계: 1200$</td>
    </tr>
  </tfoot>
</table>

cssthead {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

예제

여기서는 thead가 상단에, tfoot가 하단에 있지 않지만, 브라우저가 이를 올바른 위치에 배치합니다:

html<table>
  <tfoot>
    <tr>
      <td>개수: 2</td>
      <td>-</td>
      <td>총계: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>name1</td>
      <td>surn1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>name2</td>
      <td>surn2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>이름</th>
      <th>성</th>
      <th>급여</th>
    </tr>
  </thead>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

관련 항목