1. <caption>태그, <figcaption>태그 - 표에 제목 붙이기
기본형 : <caption> 표 제목 </caption>
<figcaption> 표 제목 </figcaption>
- 표에 제목을 붙일 때 보통 <caption>태그를 사용하지만 <figcaption>태그를 사용할 때도 있습니다. 두 태그의 사용 방법을 알아보겠습니다.
1) <caption>태그
1. <caption>태그는 <table>태그 바로 다음에 사용합니다.
2. <caption>태그를 사용한 표 제목은 표의 위쪽 중앙에 표시됩니다.
다음은 <caption>태그를 사용한 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><catption>태그 사용 방법</title>
</head>
<body>
<table border="1">
<caption>컴퓨터 프로그래밍</caption>
<tr>
<td>Java</td>
<td>Python</td>
<td>Ruby</td>
</tr>
<tr>
<td>Jsp</td>
<td>Php</td>
<td>Node js</td>
</tr>
<tr>
<td>HTML5</td>
<td>CSS3</td>
<td>JavaScript</td>
</tr>
</table>
</body>
</html> |
cs |
<사진 1.1>
<사진 1.1> 코드는 1행에는 컴퓨터 프로그래밍 언어를 작성하였고, 2행은 서버 단 언어를 작성하였으며 3행은 웹 베이직 3개를 작성했습니다.
<caption>태그는 <table>태그 다음에 위치하고 있습니다. 다음은 결과 화면입니다.
<사진 1.1 결과 화면>
<caption>태그를 사용한 결과 화면입니다. <caption>태그로 작성한 테이블 제목은 표의 중앙에 표시되었습니다.
2) <figcaption>태그
1. <figcaption>태그는 figure와 caption의 합성어로 설명 글을 붙이고 싶은 대상을 <figure>태그로 감싼 후 <figcaption>태그를 이용해 제목을
입력합니다.
2. <caption>태그와 달리 <figcaption>태그는 중앙에 정렬되지 않습니다.
3. <figcaption>태그를 <table>태그보다 앞에 사용하면 표 위에 제목이 표시됩니다.
4. <figcaption>태그를 </table>태그보다 뒤에 사용하면 표 아래에 제목이 표시됩니다.
다음은 <figcaption>태그를 <table>태그 앞에 사용한 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><catption>태그 사용 방법</title>
</head>
<body>
<figure>
<table border="1">
<figcaption>컴퓨터 프로그래밍</figcaption>
<tr>
<td>Java</td>
<td>Python</td>
<td>Ruby</td>
</tr>
<tr>
<td>Jsp</td>
<td>Php</td>
<td>Node js</td>
</tr>
<tr>
<td>HTML5</td>
<td>CSS3</td>
<td>JavaScript</td>
</tr>
</table>
</figure>
</body>
</html> |
cs |
<사진 1.2>
다음은 결과 화면입니다.
<사진 1.2 결과 화면>
'Web Basic > HTML5' 카테고리의 다른 글
| [HTML5] <abbr>태그 사용 방법 (0) | 2019.12.05 |
|---|---|
| [HTML5] <button> 태그 이해하기 (0) | 2019.12.03 |
| [HTML5] colspan, rowspan 속성 사용 방법 (2) | 2018.03.19 |
| [HTML5] <table>, <tr>, <td>, <th>태그 사용 방법 (0) | 2018.03.14 |
| [HTML5] <dl>, <dt>, <dd>태그 사용 방법 (0) | 2018.03.14 |