HTML의 THead 태그-HTML 튜토리얼-php.cn

<머리> 요소 또는 태그는 태그 및 태그는 테이블 머리글, 테이블 바닥글, 테이블 본문을 각각 정의합니다. <머리> 요소는 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 태그