찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >HTML의 THead 태그

HTML의 THead 태그

WBOY
WBOY원래의
2024-09-04 16:30:211249검색

<머리> 요소 또는 태그는 태그 및 태그는 테이블 머리글, 테이블 바닥글, 테이블 본문을 각각 정의합니다. <머리> 요소는 HTML 테이블의 헤더를 정의합니다. 테이블의 열 머리글을 생성하는 행 또는 행 집합을 정의하려면 요소. 즉, 이 요소는 HTML 테이블의 헤더 내용을 그룹화합니다. 행 전체를 묶어서 테이블 헤더로 분류합니다. 이번 주제에서는 HTML의 THead 태그에 대해 알아 보겠습니다.

테이블 헤더는 열 또는 테이블 본문 데이터에 대한 정보가 포함된 행으로 구성됩니다.

사용 방법 HTML의 요소?

<머리> 요소는 HTML 테이블의 헤더 부분을 지정합니다. 이 <머리> 따라서 테이블 요소

의 직계 자식으로서의 위치를 ​​확보합니다. , 또는 요소. <머리> 요소는 뒤에 나타날 수 있습니다. 요소가 있는 경우 로 묶인 데이터 행이 하나 이상 포함됩니다. 요소.

구문

<thead>
<tr>
</tr>
</thead>

물론 위에 표시된 대로 다른 HTML 요소와 마찬가지로

요소도 쌍으로 작동합니다. 즉, 여는 태그, 파트너, 닫는 태그, .

HTML의 THead 태그 예

다음 예를 고려해보세요.

예시 #1

코드:

<html>
<head>
<title>HTML thead Tag</title>
</head>
<table style = "width:100%" border = "1">
<thead>
<tr>
<td colspan = "4" align="center">This is the <b>header</b> section of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4" align="center">This is the <b>footer</b> section of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tbody>
<tbody>
<tr>
<td colspan="4">...</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
<html>

출력:

HTML의 THead 태그

표 헤더에 두 개의 행이 필요한 경우

요소 데이터는 하나의 단일 요소. 두 개의 를 추가하지 마세요. 하나의 테이블에 대한 요소 섹션. 아래에서 헤더 섹션 아래에 두 개의 행이 있는 예를 살펴보세요.

예시 #2

코드:

<table style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
</thead>
<thead>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

출력:

HTML의 THead 태그

예시 #3

코드:

<table  style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

출력:

HTML의 THead 태그

위 코드는 모두 동일한 출력을 생성하고 별도의

두 헤더의 요소는 일부 브라우저에서 처리됩니다. 그러나 이는 여전히 올바른 프로그래밍에서 사용해서는 안 되는 의미상의 오류이며 HTML 유효성 검사 서비스에서 위험 신호로 제기됩니다.

예시 #4

아래에서 또 다른 예를 살펴보겠습니다. 다음 예에서는 4개의 데이터 행으로 구성된 테이블 본문이 있는 테이블을 생성했습니다. 헤더는 CSS를 사용하여 배경색으로 설정된 한 행의 데이터로 구성됩니다. <머리> , <본문> 또는

HTML 테이블의 기본 모양에 영향을 주지 않습니다. 따라서 CSS에 대한 약간의 도움이면 충분합니다.

코드:

<body>
<table border="3">
<caption>Time Table</caption>
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
</thead>
<tbody>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Hindi</td>
<td>Hindi</td>
<td>English</td>
</tr>
<tr>
<td>English</td>
<td>Hindi</td>
<td>Maths</td>
<td>Social</td>
<td>Science</td>
</tr>
<tr>
<td colspan="10" align="center">Lunch</td>
</tr>
<tr>
<td>Science</td>
<td>English</td>
<td>Maths</td>
<td>Hindi</td>
<td>Social</td>
</tr>
</tbody>
</table>
</body>

출력: 

HTML의 THead 태그

HTML의 THead 태그 속성

<머리> HTML 요소는 다음과 같은 추가 속성을 지원합니다.

  • align: 이 속성은
요소와 그 안에 있는 모든 것. 왼쪽, 오른쪽, 가운데, 양쪽 정렬 및 문자를 값으로 사용합니다.
  • char: 이 속성은
    • 정렬 속성이 char로 설정된 경우의 요소 콘텐츠
  • valign:
    • 내부 콘텐츠의 수직 정렬을 지정합니다. 요소. 상단, 중간, 하단 또는 기준선을 값으로 사용합니다.
  • charoff: 이 속성은 char 속성으로 지정된 첫 번째번째 문자에 대한 오프셋을 지정합니다. 즉, 정렬 시기가 char로 설정됩니다.
  • bgcolor:
    • 내부 각 셀의 배경색을 설정하는 데 도움이 됩니다. 요소.

    결론

    우리는 <머리> 요소는 테이블 데이터가 아닌 열 레이블을 식별하고 헤더에 대한 정보를 보유하고 이를 브라우저에 제공하여 기술에 콘텐츠와 의미를 지원합니다.

    위 내용은 HTML의 THead 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    css html define if for try Error char using Attribute default this position background column table tbody td tr everything
    성명：
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    이전 기사：HTML 시간 태그다음 기사：HTML 시간 태그

    관련 기사

    더보기
    를 사용하기 전에 요소를 사용하려면
    요소. <머리> 요소에는