** 영상으로 공부하고 싶은 분은 아래 주소를 클릭해주세요.
https://www.youtube.com/watch?v=SMjXH6Qnd_o
- 테이블 태그란? 홈페이지에서 정보를 행과 열의 표로 보여주는 태그
1. 기본구조
1) 기본구조 관련 태그
| 태그 | 정리 |
| table | table전체를 감싸는 태그 |
| caption | table의 제목이나 설명을 작성하는 태그. 테이블 가로폭의 가운데 오는 것이 기본 |
| tr | 테이블의 행을 의미하는 태그. 자손으로 th나 td가 반드시 있어야 한다. |
| th | 테이블의 제목 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다. css기본값은 글자가 굵게 처리되고 셀에서 가로 가운데 정렬. |
| td | 테이블의 일반 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다. css기본값: 왼쪽정렬 |
2) 기본구조 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블 태그</title>
</head>
<body>
<table border="1">
<caption>표제목</caption>
<tr>
<th>제목셀1</th>
<th>제목셀2</th>
</tr>
<tr>
<td>일반칸1</td>
<td>일반칸2</td>
</tr>
</table>
</body>
</html>- 2행 2열짜리 테이블 작성
3) 코드 완성 뷰
2. table태그에 속성 주기
1) 테이블 태그 속성 정리
| 속성 | 정리 |
| border | 테이블이 갖고 있는 테이블과 셀 모두에 선처리 |
| width | 테이블의 가로폭을 설정하는 속성 |
| cellpadding | 셀(칸)과 컨텐츠(텍스트, 이미지등)와의 간격 조절(셀의 안쪽 여백) |
| cellspacing | 셀(칸)과 셀(칸)간의 간격 조절(셀의 바깥쪽 여백) |
- xhtml1.0에서는 웹 표준이지만, html5에서는 웹표준이 아님
- html5에서는 CSS로 위의 속성들을 대체해야 함
2) 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블 태그</title>
</head>
<body>
<table border="1" width="500" cellpadding="20" cellspacing="10">
<caption>표제목</caption>
<tr>
<th>제목셀1</th>
<th>제목셀2</th>
</tr>
<tr>
<td>일반칸1</td>
<td>일반칸2</td>
</tr>
</table>
</body>
</html>- 추가된 코드 : <table border="1" width="500" cellpadding="20" cellspacing="10">
3) 코드 완성 뷰
3. 열(셀-th, td) 태그에 속성 주기
1) 속성 정리
| 속성 | 정리 |
| width | 셀의 가로폭을 설정하는 속성 |
| height | 셀의 세로폭을 설정하는 속성 |
| align | 셀의 컨텐츠(텍스트, 이미지등)를 가로 정렬 시켜주는 속성 : left, right, center |
| vlign | 셀의 컨텐츠(텍스트, 이미지등)를 세로 정렬 시켜주는 속성 : top, middle, bottom |
- xhtml1.0에서는 웹 표준이지만, html5에서는 웹표준이 아님
- html5에서는 CSS로 위의 속성들을 대체해야 함
2) 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블 태그</title>
</head>
<body>
<table border="1">
<caption>표제목</caption>
<tr>
<th width="200" height="50" align="right">제목셀1</th>
<th width="300" height="50" valign="bottom">제목셀2</th>
</tr>
<tr>
<td width="200">일반칸1</td>
<td width="300">일반칸2</td>
</tr>
</table>
</body>
</html>- 제목 셀 1은 가로세로 크기 설정과 가로 정렬을 오른쪽으로 처리
- 제목 셀 2는 가로세로 크기 설정과 세로 정렬을 아래쪽으로 처리
3) 코드 완성 뷰
4. 셀 병합 속성
1) 속성 정리
| 속성 | 기능 |
| colspan | 같은 행의 칸들을 병합할 때 사용. ex) <td colspan="칸수"> |
| rowspan | 다른 행의 칸들을 병합할 때 사용. ex)<td rowspan="칸수"> |
- xhtml1.0과 html5에서 모두 웹 표준인 속성
2) 예시
3) colspan 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블 태그</title>
</head>
<body>
<table border="1">
<caption>표제목</caption>
<tr>
<th colspan="3">제목셀1</th>
</tr>
<tr>
<td>일반칸1</td>
<td>일반칸2</td>
<td>일반칸3</td>
</tr>
</table>
</body>
</html>
4) colspan 예제 코드 완성 뷰
5) rowspan 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블 태그</title>
</head>
<body>
<table border="1">
<caption>표제목</caption>
<tr>
<th rowspan="2">제목셀1</th>
<th>제목셀2</th>
<th>제목셀3</th>
</tr>
<tr>
<td>일반칸2</td>
<td>일반칸3</td>
</tr>
</table>
</body>
</html>
6) rowspan 예제 코드 완성 뷰
5. HTML5에 새로 나온 테이블 행 그룹 태그
- 이러한 표가 있는 경우
위와 같은 행 구조를 나눌 수 있다.
1) 행그룹 태그의 종류
| 태그 | 정리 |
| thead | 테이블의 제목들을 묶는 그룹 태그 |
| tbody | 테이블의 일반적 데이터들을 묶는 그룹태그 기본적으로 행그룹태그를 사용하지 않으면 크롬브라우저가 자동으로 tbody태그로 묶어준다. |
| tfoot | 테이블의 마지막 아래 부분을 묶는 그룹태그 |
- 위의 태그를 사용하는 이유는 CSS에서 사용하기 편리하게 되기 때문이다.
2) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>테이블 태그</title>
<style type="text/css">
thead{ background-color: yellow; }
tbody{ background-color: aquamarine; }
tfoot{ background-color: coral; }
</style>
</head>
<body>
<table border="1">
<caption>방한 횟수별 한국 여행 시 좋았던 점(단위 : 명)</caption>
<thead>
<tr>
<th>방한 횟수</th>
<th>편리한 교통</th>
<th>친절한 사람들</th>
<th>독특한 문화유산</th>
<th>맛있는 음식</th>
<th>다양한 쇼핑</th>
</tr>
</thead>
<tbody>
<tr>
<td>1회</td>
<td>3,700</td>
<td>4,200</td>
<td>3,700</td>
<td>4,100</td>
<td>4,900</td>
</tr>
<tr>
<td>2회</td>
<td>3,100</td>
<td>4,000</td>
<td>3,500</td>
<td>4,700</td>
<td>4,200</td>
</tr>
<tr>
<td>3회 이상</td>
<td>3,500</td>
<td>4,500</td>
<td>3,200</td>
<td>5,000</td>
<td>3,900</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>합계</td>
<td>10,300</td>
<td>12,700</td>
<td>10,400</td>
<td>13,800</td>
<td>13,000</td>
</tr>
</tfoot>
</table>
</body>
</html>
3) 코드 완성 뷰
4) thead, tbody, tfoot을 사용하지 않아도 웹 표준에 오류 없음
6. HTML5에 새로 나온 테이블 열 그룹 태그
1) 태그 정리
| 태그 | 정리 |
| colgroup | 열을 그룹으로 묶을 수 있도록 해주는 태그 |
| col | colgroup의 자손으로 열단위를 나눌 수 있다. span속성을 사용하여 몇 열을 그룹으로 묶을지 설정 ex) <col span="3"> => 3열을 그룹으로 묶음 |
2) 코드 - 기존 위의 행 그룹에 열 그룹을 추가
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>테이블 태그</title>
<style type="text/css">
.col1{ background-color: yellow; }
.col2{ background-color: aquamarine; }
.col3{ background-color: orange; }
</style>
</head>
<body>
<table border="1">
<caption>방한 횟수별 한국 여행 시 좋았던 점(단위 : 명)</caption>
<colgroup>
<col span="1" class="col1" /><!--한열묶기-->
<col span="2" class="col2" /><!--두열묶기-->
<col span="3" class="col3" /><!--세열묶기-->
</colgroup>
<thead>
<tr>
<th>방한 횟수</th>
<th>편리한 교통</th>
<th>친절한 사람들</th>
<th>독특한 문화유산</th>
<th>맛있는 음식</th>
<th>다양한 쇼핑</th>
</tr>
</thead>
<tbody>
<tr>
<td>1회</td>
<td>3,700</td>
<td>4,200</td>
<td>3,700</td>
<td>4,100</td>
<td>4,900</td>
</tr>
<tr>
<td>2회</td>
<td>3,100</td>
<td>4,000</td>
<td>3,500</td>
<td>4,700</td>
<td>4,200</td>
</tr>
<tr>
<td>3회 이상</td>
<td>3,500</td>
<td>4,500</td>
<td>3,200</td>
<td>5,000</td>
<td>3,900</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>합계</td>
<td>10,300</td>
<td>12,700</td>
<td>10,400</td>
<td>13,800</td>
<td>13,000</td>
</tr>
</tfoot>
</table>
</body>
</html>
3) 코드 완성 뷰
- 결과를 보면 첫 번째 열에 노란색, 두 번째 색이 아쿠아 마린 색, 세 번째 색에 오렌지 컬러가 들어가 있는 것이 확인됨
'웹언어 > HTML5' 카테고리의 다른 글
| [HTML기초문법] 8강 iframe태그와 youtube영상 넣기 및 옵션 설정 (14) | 2020.05.18 |
|---|---|
| [HTML기초문법] 7강 멀티미디어 태그 - audio, video태그 (0) | 2020.05.18 |
| [HTML기본문법] 5강 <div>태그와 <span>태그 (0) | 2020.04.23 |
| [HTML기초문법] 4강 이미지 태그 (0) | 2020.04.21 |
| [HTML기초문법] 3강 a(앵커)태그와 하이퍼링크 (0) | 2020.04.20 |
