표 태그
아래 태그는 body내 위치합니다.
태그 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>기본 포멧 설명</title>
<meta name="author" content="rosa.kim">
<meta name="description" content="rosa.kim's test">
<meta name="viewport" content="width=device-width, initial-scal=1.0">
<link rel="stylesheet" href="./main.css">
<script src="./main.js"></script>
</script>
</head>
<body>
<table>
<caption>과일과 색 설명</caption>
<colgroup>
<col>
<col style="background-color: lightpink;" span="2">
</colgroup>
<thead>
<tr>
<th colspan="3" id="th-data">과일과 색</th>
</tr>
</thead>
<tbody>
<tr>
<th abbr="fruit" headers="th-data"></th>
<th abbr="fruit" headers="th-data">과일</th>
<th abbr="color" headers="th-data">색</th>
</tr>
<tr>
<td>1</td>
<td>바나나</td>
<td>노랑</td>
</tr><tr>
<td>2</td>
<td>사과</td>
<td>빨강</td>
</tr>
</tbody>
</table>
</body>
</html>태그 설명
| 태그 | 속성 | 의미 | 값 |
| table | 테이블을 만들기위해 영역을 묶어주는 태그. tr, th, td태그를 사용하여 완전한 테이블을 만들 수 있다. 테이블 예시 보기 |
||
| thead | 머리글 명시. 레이아웃에는 지장이 없음 | ||
| tr | table row의 약자. 표의 가로 한 줄을 의미 | ||
| th |
table header의 약자. 테이블 헤더를 지칭 |
||
| abbr |
열에 대한 설명 | ||
| headers | th가 여러 row로 이루어져 있으며,1:1 매칭이 안되는 경우 id를 이용하여 헤더를 연결 |
id 이름 | |
| colspan | 합치려고 하는 컬럼의 수 | 숫자 | |
| rowspan | 합치려고 하는 row의 수 | 숫자 | |
| scope | 어떤 열의 헤더인지 명시 col: 자신의 열 colgroup: 모든 열 row: 자신의 행 rowgroup: 모든 행 auto |
col colgroup row rowgroup auto |
|
| tbody | 본문 명시. 레이아웃에는 지장이 없음 | ||
| td |
table data의 약자. | ||
| headers | th와 td가 여러 row로 이루어져 있으며,1:1 매칭이 안되는 경우 id를 이용하여 헤더를 연결. th의 headers 참고 |
id 이름 | |
| colspan | 합치려고 하는 컬럼의 수 | 숫자 | |
| rowspan | 합치려고 하는 row의 수 | 숫자 | |
| caption | 테이블의 이름 설정. 테이블 1개에 하나의 caption을 사용해야 함. 테이블 태그 내부, 최상단에 입력 |
||
| colgroup | col을 묶어줌 | ||
| col | 표의 열을 공통적으로 정의 | ||
| span | col에 적용된 정의를 연속적으로 몇개 컬럼까지 적용할지 설정 | 숫자 | |
| tfoot | 바닥글을 명시. 레이아웃에는 지장이 없음 | ||
'달밤에 코딩하기 > HTML CSS 공부하기' 카테고리의 다른 글
| #13 - 속성 / 특수기호 (0) | 2021.05.13 |
|---|---|
| #12 - HTML 태그 - form (0) | 2021.04.21 |
| #10 - HTML 태그 - 내장 컨텐츠/스크립트 (0) | 2021.04.18 |
| #9 - HTML 태그 - 이미지/동영상/오디오 (0) | 2021.04.18 |
| #8 - HTML 태그 - 텍스트 (0) | 2021.04.09 |
