<caption> : table 태그 다음에 사용하고 이 태그를 이용하면 자동으로 표의 위,중앙에 표시됨
<figcaption> : figure 태그 안에 table 태그와 함께 사용됨
table 태그 위에 쓰면 표 위에 제목이 표시되고 /table 아래에 쓰면 표 밑에 제목이 표시됨
caption 과 다르게 중앙 정렬은 되지 않음
티스토리 뷰
1. 개념
<caption>,<figcaption> - 표에다가 제목 만들기2. 태그
<caption>,<figcaption>html5 코드
|
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
<table style =' border : 1px solid #000 ; width : 100% ' >
1
<caption>
<b> 기숙사 사용자 명단 </b>
</caption>
<tr>
<th> 이름 </th>
<th> 동 </th>
<th> 호 </th>
</tr>
<tr>
<th> 테스트1 </th>
<td> 101동 </td>
<td> 1호 </td>
</tr>
<tr>
<th> 테스트2 </th>
<td> 102동 </td>
<td> 2호 </td>
</tr>
</table>
2
<figure>
<figcaption>
<b> 기숙사 사용자 명단 - 위에 제목 </b>
</figcaption>
<table style =' border : 1px solid #000 ; width : 100% ' >
<tr>
<th> 이름 </th>
<th> 동 </th>
<th> 호 </th>
</tr>
<tr>
<th> 테스트1 </th>
<td> 101동 </td>
<td> 1호 </td>
</tr>
<tr>
<th> 테스트2 </th>
<td> 102동 </td>
<td> 2호 </td>
</tr>
</table>
3
<figcaption>
<b> 기숙사 사용자 명단 - 아래에 제목 </b>
</figcaption>
</figure>
</body>
</html>
|
결과 화면
코드 설명
1
<caption> ...... </caption>
caption 태그를 사용하면 표 위에서 중앙으로 표시됩니다.
굵게는 b 태그가 적용되었기 때문에 굵게 나오는 것이고 caption 태그는 중앙 배치만 가능하고 굵게까지는 적용되지 않습니다.
굵게는 b 태그가 적용되었기 때문에 굵게 나오는 것이고 caption 태그는 중앙 배치만 가능하고 굵게까지는 적용되지 않습니다.
2
<figcaption> ...... </figcaption>
table 태그 위에 쓰이는 figcaption는 표 위에 제목이 나옵니다.
caption 태그와 다른 점은 중앙 배치가 되지 않는 점이 다릅니다.
caption 태그와 다른 점은 중앙 배치가 되지 않는 점이 다릅니다.
3
<figcaption> ...... </figcaption>
table 태그 아래에 쓰이는 figcaption는 표 아래에 제목이 나옵니다.
'[개발]프로그래밍 > html5' 카테고리의 다른 글
| [html5] <colgroup>,<col> - 표에서 열(col) 스타일 적용 (0) | 2021.01.21 |
|---|---|
| [html5] <thead>,<tbody>,<tfoot> - 표에서 제목,본문,요약 구분 (0) | 2021.01.20 |
| [html5] <table>,<tr>,<td>,<th> - 일반적인 표 만들기 (0) | 2021.01.14 |
| [html5] - <dl> - 제목과 설명을 구분하여 하나의 목록으로 만들기 (1) | 2021.01.13 |
| [html5] <ol> - 순서 있는 목록 (0) | 2021.01.12 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday