본문 바로가기
IT/HTML

HTML5 - 테이블 태그

by EEYEA 2020. 11. 26.
728x90

표를 만들 때 사용하는 테이블(표) 태그에 대해 알아보겠습니다.


#1 <table>태그의 기본 요소들

- <caption> : 표 제목

- <tr>태그 : 행

- <td>태그 : 열


표시방법

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
<body>
   <h4>제목</h4>
   <table>
         <caption>표의 제목</caption>
         <tbody>
             <tr>
                 <td>cell-1-1</td>
                 <td>cell-1-2</td>
                 <td>cell-1-3</td>
                 <td>cell-1-4</td>
             </tr>
             <tr>
                 <td>cell-2-1</td>
                 <td>cell-2-2</td>
                 <td>cell-2-3</td>
                 <td>cell-2-4</td>
             </tr>
             <tr>
                 <td>cell-3-1</td>
                 <td>cell-3-2</td>
                 <td>cell-3-3</td>
                 <td>cell-3-4</td>
             </tr>
             <tr>
                 <td>cell-4-1</td>
                 <td>cell-4-2</td>
                 <td>cell-4-3</td>
                 <td>cell-4-4</td>
             </tr>
         </tbody>
    </table>
</body>
cs

<tr>태그 안에 <td>태그가 들어가야 합니다.


실제 웹페이지



CSS로 표를 꾸며보겠습니다.

- border-collapse : 단일선, 중복선 설정

예) 

1
2
3
table, tr,td{
    border-collapse: collapse;
}
cs


- border : 테두리 두께, 스타일, 색상(순서대로 입력)

예) 

1
2
3
4
table, tr,td{
    border-collapse: collapse;
    border: 1px solid orange;
}
cs


- padding: 안쪽 여백 크기

- margin: 바깥쪽 여백 크기

- text-align: 글자 정렬

예)

1
2
3
4
5
6
7
8
9
10
11
table, tr,td{
    border-collapse: collapse;
    border: 1px solid orange;
}
table{
    margin-bottom: 20px;
}
tr, td{
    padding: 20px 20px;
    text-align: center;
}
cs


- border-spacing: 셀과 셀 사이의 간격

border-collapse가 separate나 기본값인 경우 적용됩니다. collapse(단일선)인 경우 적용 안됩니다.

예)

1
2
3
4
5
6
7
8
9
10
11
12
table, tr,td{
    border: 1px solid orange;
    border-collapse: separate;
}
table{
    margin-bottom: 20px;
    border-spacing: 30px;
}
tr, td{
    padding: 20px 20px;
    text-align: center;
}
cs



그렇다면 셀들을 합치려면 어떻게 해야 할까요?

테이블 태그 요소들의 속성을 이용하면 됩니다.

- rowspan : 행 합치기

- colspan: 열 합치기


colspan 속성을 이용해 셀1-1과 셀1-2를 합쳐보겠습니다.

예)

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
<!DOCTYPE html>
 <html lang="ko">
     <head>
         <title>테이블</title>
         <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
     <body>
         <h4>제목</h4>
         <table>
             <caption>표의 제목</caption>
             <tbody>
                 <tr>
                     <td colspan="2">cell-1-1</td>
                     <td>cell-1-2</td>
                     <td>cell-1-3</td>
                     <td>cell-1-4</td>
                 </tr>
                 <tr>
                     <td>cell-2-1</td>
                     <td>cell-2-2</td>
                     <td>cell-2-3</td>
                     <td>cell-2-4</td>
                 </tr>
                 <tr>
                     <td>cell-3-1</td>
                     <td>cell-3-2</td>
                     <td>cell-3-3</td>
                     <td>cell-3-4</td>
                 </tr>
                 <tr>
                     <td>cell-4-1</td>
                     <td>cell-4-2</td>
                     <td>cell-4-3</td>
                     <td>cell-4-4</td>
                 </tr>
             </tbody>
        </table>
    </body>
 </html>
cs

ㅎ

셀이 한 칸씩 옆으로 밀려난 것을 확인할 수 있습니다.


혼자 빠져나온 셀1-4를 삭제해주면 다시 반듯한 표를 만들 수 있습니다.

예)

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
<!DOCTYPE html>
 <html lang="ko">
     <head>
         <title>테이블</title>
         <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
     <body>
         <h4>제목</h4>
         <table>
             <caption>표의 제목</caption>
             <tbody>
                 <tr>
                     <td colspan="2">cell-1-1</td>
                     <td>cell-1-2</td>
                     <td>cell-1-3</td>
                 </tr>
                 <tr>
                     <td>cell-2-1</td>
                     <td>cell-2-2</td>
                     <td>cell-2-3</td>
                     <td>cell-2-4</td>
                 </tr>
                 <tr>
                     <td>cell-3-1</td>
                     <td>cell-3-2</td>
                     <td>cell-3-3</td>
                     <td>cell-3-4</td>
                 </tr>
                 <tr>
                     <td>cell-4-1</td>
                     <td>cell-4-2</td>
                     <td>cell-4-3</td>
                     <td>cell-4-4</td>
                 </tr>
             </tbody>
        </table>
    </body>
 </html>
cs



이번엔 rowsapn 속성을 활용해 셀2-1과 셀3-1을 합쳐보도록 하겠습니다.

예)

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
<!DOCTYPE html>
 <html lang="ko">
     <head>
         <title>테이블</title>
         <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
     <body>
         <h4>제목</h4>
         <table>
             <caption>표의 제목</caption>
             <tbody>
                 <tr>
                     <td colspan="2">cell-1-1</td>
                     <td>cell-1-2</td>
                     <td>cell-1-3</td>
                 </tr>
                 <tr>
                     <td rowspan="2">cell-2-1</td>
                     <td>cell-2-2</td>
                     <td>cell-2-3</td>
                     <td>cell-2-4</td>
                 </tr>
                 <tr>
                     <td>cell-3-1</td>
                     <td>cell-3-2</td>
                     <td>cell-3-3</td>
                     <td>cell-3-4</td>
                 </tr>
                 <tr>
                     <td>cell-4-1</td>
                     <td>cell-4-2</td>
                     <td>cell-4-3</td>
                     <td>cell-4-4</td>
                 </tr>
             </tbody>
        </table>
    </body>
 </html>
cs

셀2-1과 셀3-1이 합쳐지고 셀3-4가 옆으로 밀려난 것을 확인할 수 있습니다.


삐져나온 셀3-4는 삭제해주시면 됩니다.

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
<!DOCTYPE html>
 <html lang="ko">
     <head>
         <title>테이블</title>
         <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
     <body>
         <h4>제목</h4>
         <table>
             <caption>표의 제목</caption>
             <tbody>
                 <tr>
                     <td colspan="2">cell-1-1</td>
                     <td>cell-1-2</td>
                     <td>cell-1-3</td>
                 </tr>
                 <tr>
                     <td rowspan="2">cell-2-1</td>
                     <td>cell-2-2</td>
                     <td>cell-2-3</td>
                     <td>cell-2-4</td>
                 </tr>
                 <tr>
                     <td>cell-3-1</td>
                     <td>cell-3-2</td>
                     <td>cell-3-3</td>
                 </tr>
                 <tr>
                     <td>cell-4-1</td>
                     <td>cell-4-2</td>
                     <td>cell-4-3</td>
                     <td>cell-4-4</td>
                 </tr>
             </tbody>
        </table>
    </body>
 </html>
cs


'IT > HTML' 카테고리의 다른 글

HTML-input태그 #1  (0) 2020.12.09
HTML - form태그  (0) 2020.11.26
HTML5 - 리스트(목록) 태그  (0) 2020.11.26
HTML&CSS-위치 변경하기  (0) 2020.11.25
HTML-<a>태그  (0) 2020.11.25

관련글

댓글

오뚜기 맛있는 오뚜기밥, 200g, 24개
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

티스토리툴바