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

HTML의 캡션 태그는 테이블과 함께 사용됩니다. 테이블의 제목을 나타내는 데 사용됩니다. <캡션> 태그는

태그 바로 뒤에 사용됩니다. 한 번에 하나의 캡션 태그만 사용할 수 있습니다. CSS의 도움으로

반응형 웹 디자인 형식의 테이블이 있습니다.

<캡션> 태그는 테이블 본문 내에서 사용됩니다.

다음의 첫 번째 태그로 사용됩니다. 꼬리표. <테이블>

테이블 행을 생성하고

와 같은 다양한 태그의 조합입니다. 이 태그 중

태그는 테이블 헤드를 생성하는 데 사용되는 테이블을 생성하는 동안 중요합니다.

테이블 컬럼을 생성하기 위한 것입니다.

구문:

HTML 코드에서 Caption 태그를 정의하는 실제 구문을 살펴보겠습니다.

<caption>title text</caption>

로그인 후 복사

위에서 볼 수 있듯이 안에

태그가 포함되어 있습니다. 꼬리표. 테이블에 제목이 부여됩니다. 그 이후에는 이 캡션 아래에 전체 테이블 데이터가 표시됩니다.

HTML의 캡션 태그 목록

<캡션> : 테이블에 캡션 추가

<테이블>: <캡션> 로 묶인 태그 태그

: 표 머리글, 열, 행을 생성합니다

: 캡션 정렬을 설정합니다.

HTML에서 캡션 태그를 사용하는 이유는 무엇인가요?

테이블을 사용하여 일부 데이터를 테이블 형식으로 정의할 때마다.
그래서 이 데이터를 고유한 제목을 가진 테이블에 표시하는 것이 사용자의 주요 모토입니다. 이러한 종류의 제목은

HTML에 태그를 추가하세요.

태그 뒤에 있는

의 시작 태그와 끝 태그 사이에 포함됩니다. 하나의 테이블에는 테이블 본문에 캡션 태그가 1개 있어야 합니다.

HTML에서 캡션 태그 작업

앞서와 마찬가지로 Table 태그와 함께 caption 태그가 사용된다는 점을 살펴보았습니다. 공통 속성, 글로벌 속성, 이벤트 속성 등 다양한 속성과 함께 사용됩니다.

이제 이러한 속성이 캡션 태그 작업에 어떻게 도움이 되는지 살펴보겠습니다.

1. Align: 이 속성은 테이블을 참조하여 캡션을 정렬하기 위해 일부 값과 함께 사용됩니다. 여기에 포함된 값은 왼쪽, 오른쪽, 위쪽, 아래쪽입니다.

2. 전역 속성: HTML의 전역 속성은

에서 지원됩니다. 태그.

액세스 키: 이 요소는 일부 특정 요소를 활성화하거나 이에 집중하기 위한 단축키로 작동합니다.
dir: 요소 내용의 텍스트에 적절한 방향을 지정하는 데 사용됩니다.
class: 클래스 이름은 CSS를 HTML의 특정 요소에 정의하는 데 사용됩니다. 특정 요소에 대해 하나 또는 두 개의 클래스 이름을 사용하고 CSS 속성을 부여할 수 있습니다.
contenteditable: 이 속성은 특정 콘텐츠 요소를 편집할 수 있는지 여부를 정의하는 데 사용됩니다.
draggable: 사용자가 해당 요소를 드래그할 수 있는지 여부를 정의하는 데 사용됩니다.
dropzone: 이 속성은 draggable 속성과 관련이 있습니다. 특정 위치에 요소를 놓을 때 요소를 복사하거나 이동하는 데 사용됩니다.
id: 요소에 대한 ID는 특정 요소에 대한 고유 식별 이름을 정의하는 데 사용됩니다.
lang:

콘텐츠가 작성되는 언어를 정의하는 데 사용되는 태그입니다. 문법적으로 철자를 사용하거나

맞춤법 검사: 이 속성은 요소의 철자와 문법을 검사함을 나타냅니다.

스타일: 요소에 인라인 CSS 속성을 제공하기 위해 캡션 태그에 사용되는 매우 중요한 속성입니다.

translate: 번역 가능 여부와 같은 요소의 세부정보를 제공하는 가장 중요한 속성입니다.

3. 이벤트 속성: HTML

태그는 다양한 이벤트 속성도 처리하며 다음과 같습니다.

onafterprint: This event triggered successfully once the document gets printed.
onbeforeprint: This kind of script gets executed before the actual printing of the document.
onbeforeunload: This script get executed when our document is getting to be unloaded.
onerror: this event attribute is executed when an error occurs in the document.
onload: this script generated when the actual loading of the page gets completed.
onmessage: whenever a message is triggered, this event occurs.

Examples of Caption Tag in HTML

Below given are some examples:

Example #1

Here is an example showing how exactly

tag is going to be used in HTML:

Code:

<head>
<style>
table,
th,
td {
border: 1px solid blue;
}
#emp_details {
font-size:20px;
color:crimson;
font-style:italic;
}
</style>
</head>
<body>
<table>
<caption id="emp_details">Employee Details</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>EmpId</th>
<th>Age</th>
<th>Designation</th>
</tr>
<tr>
<td>Roota</td>
<td>Mittal</td>
<td>9110</td>
<td>32</td>
<td>Marketing Head</td>
</tr>
<tr>
<td>John</td>
<td>Roy</td>
<td>9111</td>
<td>28</td>
<td>Sales Head</td>
</tr>
<tr>
<td>Dinesh</td>
<td>Shetty</td>
<td>9112</td>
<td>43</td>
<td>Developer</td>
</tr>
<tr>
<td>Rucha</td>
<td>Dev</td>
<td>9113</td>
<td>24</td>
<td>Web Developer</td>
</tr>
<tr>
<td>Niks</td>
<td>Raw</td>
<td>9114</td>
<td>45</td>
<td>Tester</td>
</tr>
</table>
</body>

로그인 후 복사

Output:

HTML의 캡션 태그

Example #2

Here is another example showing how exactly

tag is going to be used with align attribute with inline CSS, aligning caption to the left :

Code:

<head>
<style>
table, th, td {
border: 2px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<caption style="text-align: left; color:dodgerblue;" >
Maharashtra Elections Results</caption>
<tr>
<th>Sr No.</th>
<th>Parties</th>
<th>No of seats</th>
</tr>
<tr>
<td>1</td>
<td>BJP</td>
<td>104</td>
</tr>
<tr>
<td>2</td>
<td>Shiv Sena</td>
<td>56</td>
</tr>
<tr>
<td>3</td>
<td>Nationalist Congress Party</td>
<td>54</td>
</tr>
<tr>
<td>4</td>
<td>Congress</td>
<td>44</td>
</tr>
<tr>
<td>5</td>
<td>Bahujan Vikas Aaghadi</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>Muslimeen Prahar Janshkti party</td>
<td>2</td>
</tr>
</table>
</body>

로그인 후 복사

Output:

HTML의 캡션 태그

Example #3

This is using an example

tag to align the title at the right of the table with internal CSS code:

Code:

<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
.india{
text-align: right;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption class="india" >State & Capitals</caption>
<tr>
<th>State</th>
<th>Capital</th>
</tr>
<tr>
<td>Maharashtra</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Goa</td>
<td>Panaji</td>
</tr>
<tr>
<td>Assam</td>
<td>Dispur</td>
</tr>
<tr>
<td>Haryana</td>
<td>Chandigarh</td>
</tr>
<tr>
<td>Kerala</td>
<td>Thriuvanthaouram</td>
</tr>
</table>
</body>

로그인 후 복사

Output:

HTML의 캡션 태그

Conclusion- Caption Tag in HTML

From all the above details regarding the caption, the tag explains terms; this is used to give title for the table. The caption is enclosed in between

tag into the table body. It works on different attributes like align attributes, global attributes, as well as some event, attributes to trigger the event on the caption tag.

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