본문 바로가기
웹언어/HTML5

[HTML기초문법] 6강 테이블(table)태그

OSSAM 2020. 5. 15. 16:23
728x90
반응형

 

 

 

 

 

 

 

 

 

** 영상으로 공부하고 싶은 분은 아래 주소를 클릭해주세요.

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) 코드 완성 뷰

 

border="1"을 줘서 테두리가 보임

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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) 코드 완성 뷰

제목셀1은 오른쪽, 제목셀2는 아래쪽에 있는 것을 확인

 

 

 

 

 

 

 

 

 

 

 

4. 셀 병합 속성

1) 속성 정리

속성 기능
colspan 같은 행의 칸들을 병합할 때 사용. ex) <td colspan="칸수">
rowspan 다른 행의 칸들을 병합할 때 사용. ex)<td rowspan="칸수">

- xhtml1.0과 html5에서 모두 웹 표준인 속성

 

 

 

 

 

 

 

 

2) 예시

colspan="3"을 준 병합

 

 

rowspan="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 예제 코드 완성 뷰

윗줄의 3칸이 병합된 것을 확인

 

 

 

 

 

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) 코드 완성 뷰

행간 그룹 별로 CSS를 바로 처리할 수 있는 것을 확인할 수 있다.

 

 

 

 

 

 

4) thead, tbody, tfoot을 사용하지 않아도 웹 표준에 오류 없음

테이블의 기본 구조 태그
웹표준 검사기에 돌려도 오류 없음

 

 

 

 

 

대신 크롬 개발자 모드에서 테이블 안에 자동으로 tbody가 생성(CSS선택자 작성시 주의)

 

 

 

 

 

 

 

 

 

 

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) 코드 완성 뷰

 

 

- 결과를 보면 첫 번째 열에 노란색, 두 번째 색이 아쿠아 마린 색, 세 번째 색에 오렌지 컬러가 들어가 있는 것이 확인됨

 

 

 

 

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

'웹언어 > 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

'웹언어/HTML5' Related Articles

티스토리툴바