08 테이블요소

정보

🗃️ 예제파일 :

01. table, tr, td 요소로 테이블 삽입하기

정보

👁️‍🗨️ table

표를 만들때 사용하는 태그

문법 table>tr>td

1
<table>
2

3
  <tr>
4

5
    <td></td>
6

7
    <td></td>
8
  </tr>
9
</table>

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>표</title>
6
    <style>
7
        table {
8
            width: 100%;
9
            border-collapse: collapse;
10
        }
11
        td {
12
            border: 1px solid #000;
13
        }
14
    </style>
15
</head>
16
<body>
17
    <table>
18
        <tr>
19
            <td>교과목</td>
20
            <td>점수</td>
21
        </tr>
22
        <tr>
23
            <td>HTML</td>
24
            <td>93</td>
25
        </tr>
26
        <tr>
27
            <td>CSS</td>
28
            <td>92</td>
29
        </tr>
30
        <tr>
31
            <td>평균</td>
32
            <td>92.5</td>
33
        </tr>
34
    </table>
35
</body>
36
</html>

02. 테이블 구조화 하기

정보

👁️‍🗨️ 테이블을 구조적으로 작성하는 요소

작성하지 않아도 웹브라우저에서 교정해줍니다.
thead와 tfoot의 마크업 순서가 바뀌어도 화면출력 위치는 변하지 않습니다.

| thead | 테이블의 헤더영역을 의미하는 요소 | td 가 올수없음 th 사용 | | --- | --- | --- | | tbody | 테이블의 바디영역을 의미하는 요소 | | | tfoot | 테이블의 푸터영역을 의미하는 요소 | |

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>표</title>
6
    <style>
7
        table{
8
            width: 100%;
9
            border-collapse: collapse;
10
        }
11
        td,th{
12
            border: 1px solid #000;
13
        }
14
    </style>
15
</head>
16
<body>
17
    <table>
18
       <thead>
19
             <tr>
20
                <th>교과목</th>
21
                <th>점수</th>
22
            </tr>
23
        </thead>
24
        <tbody>
25
            <tr>
26
                <th>HTML</th>
27
                <td>93</td>
28
            </tr>
29
            <tr>
30
                <th>CSS</th>
31
                <td>92</td>
32
            </tr>
33
        </tbody>
34
        <tfoot>
35
            <tr>
36
                <th>평균</th>
37
                <td>92.5</td>
38
            </tr>
39
        </tfoot>
40
    </table>
41
</body>
42
</html>

03. colgroup

정보

👁️‍🗨️ span 속성으로 영역확장

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>표</title>
6
    <style>
7
        table{
8
            width: 100%;
9
            border-collapse: collapse;
10
        }
11
        td,th{
12
            border: 1px solid #000;
13
        }
14
        .c1{
15
            background: #ff0; /*노락색*/
16
        }
17
        .c2{
18
            background: #0ff; /*하늘색*/
19
        }
20
    </style>
21
</head>
22
<body>
23
    <table>
24
        <caption>망고의 기말고사 점수</caption>
25
        <colgroup>
26
            <col class="c1">
27
            <col class="c2">
28
        </colgroup>
29
        <thead>
30
            <tr>
31
                <th>교과목</th>
32
                <th>점수</th>
33
            </tr>
34
        </thead>
35
        <tbody>
36
            <tr>
37
                <th>HTML</th>
38
                <td>93</td>
39
            </tr>
40
            <tr>
41
                <th>CSS</th>
42
                <td>92</td>
43
            </tr>
44
        </tbody>
45
        <tfoot>
46
            <tr>
47
                <th>평균</th>
48
                <td>92.5</td>
49
            </tr>
50
        </tfoot>
51
    </table>
52
</body>
53
</html>

04. 셀병합하기

속성	설명
colspan	열(가로)병합
rowspan	행(세로)병합

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>셀 합치기</title>
6
    <style>
7
        table{
8
            width: 100%;
9
            border-collapse: collapse;
10
            margin-bottom: 20px;
11
        }
12
        td{
13
            border: 1px solid #000;
14
        }
15
    </style>
16
</head>
17
<body>
18
    <table>
19
        <tr>
20
            <td colspan="3">1</td>
21
        </tr>
22
        <tr>
23
            <td>2</td>
24
            <td>3</td>
25
            <td>4</td>
26
        </tr>
27
    </table>
28
    <table>
29
        <tr>
30
            <td rowspan="2">1</td>
31
            <td>2</td>
32
            <td>3</td>
33
        </tr>
34
        <tr>
35
            <td>4</td>
36
            <td>5</td>
37
        </tr>
38
    </table>
39
</body>
40
</html>

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>컴퓨터 그래픽스 기능사</title>
8
    <style>
9
        table{
10
            border:1px solid #333333;
11
        }
12
        td{
13
            border:1px solid #333333;
14
            width:200px;
15
            height:30px;
16
            text-align: center;
17
        }
18
    </style>
19
</head>
20
<body>
21

22
    <table>
23
        <tr>
24
            <td colspan="2">컴퓨터 그래픽스 기능사</td>
25
        </tr>
26
        <tr>
27
            <td rowspan="3">프로그램</td>
28
            <td>일러스트</td>
29
        </tr>
30
        <tr>
31
            <td>포토샵</td>
32
        </tr>
33
        <tr>
34
            <td>인디자인</td>
35
        </tr>
36
    </table>
37
</body>
38
</html>

05. 표접근성

정보

👁️‍🗨️ 스크린리더기에게 표의 방향을 알려줌

🔗잘 설명된 블로그

속성	설명
caption	표의 제목을 의미
scope	스크린리더기 에게 데이터의 방향을 알려줌

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>caption태그와 scope 속성</title>
6
    <style>
7
        table{
8
            width: 100%;
9
            border-collapse: collapse;
10
        }
11
        td,th{
12
            border: 1px solid #000;
13
        }
14
    </style>
15
</head>
16
<body>
17
    <table>
18
        <caption>상품에 따른 상하반기 판매랑</caption>
19
        <colgroup>
20
            <col>
21
            <col>
22
            <col>
23
        </colgroup>
24
        <thead>
25
            <tr>
26
                <th scope="col">구분</th>
27
                <th scope="col">데스크탑 PC</th>
28
                <th scope="col">스마트폰</th>
29
            </tr>
30
        </thead>
31
        <tbody>
32
            <tr>
33
                <th scope="row">상반기 판매수</th>
34
                <td>2만대</td>
35
                <td>5만대</td>
36
            </tr>
37
            <tr>
38
                <th scope="row">하반기 판매수</th>
39
                <td>3만대</td>
40
                <td>7만대</td>
41
            </tr>
42
        </tbody>
43
    </table>
44
</body>
45
</html>