수학과의 좌충우돌 프로그래밍

[html] 2.텍스트 관련 태그들 (3) 표를 만드는 태그 본문

웹프로그래밍/html,css

[html] 2.텍스트 관련 태그들 (3) 표를 만드는 태그

ssung.k 2019. 1. 19. 01:29



그리고 안녕하세요 강민성입니다.


오늘은 텍스트 관련 태그 마지막 시간으로 


표를 만드는 태그에 대해서 알아보겠습니다 !!




표를 만드는 태그


표의 뼈대를 이루는 요소들, <table>, <tr>, <td>, <th> 태그



table 태그는 내가 표를 만들겠다는 걸 브라우저에게  알려주는 작업입니다.


나머지 태그들은 모두 table 태그 안에 쓰시면 됩니다.


tr 태그는 행을 만드는 역할을 합니다.


td 태그는 각 행에 들어가는 태그로서 행마다 몇 개의 셀을 만들지 결정하는 역할을 합니다.


그리고 td 태그 안에는 표 각 셀의 들어갈 내용을 넣어주시면 됩니다.


이 때 td 대신 쓸 수 있는 th 태그가 있는데 표에 제목 셀을 만드는 역할을 합니다.


보통 표의 첫 번째 행과 첫 번째 열에 사용을 하게 됩니다. 


th 태그를 통해서 셀의 내용을 가운데 정렬하고 굵게 표시할 수 있습니다. 



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
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>설명 목록</title>
    <style>
        table {
            border-collapse: collapse;
        }
        td,th { 
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>제목</th>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <th>제목</th>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
    </table>
</body>
</html>
cs

 

 




<head> 태그 안에 있는 style 은 아직 배우지 않은 내용이니까 모르셔도 무방합니다.


단순히 table 만 만들면 경계선이 표시되지 않아서


 이를 표시하기 위한 코드라고만 생각하고 넘어가시면 될 것 같습니다.




행 또는 열 병합하는 <colspan> ,<rowspan>태그


우리가 표를 만들다보면 위와 같이 정형화된 표 말고도 열과 행을 병합한 다양한


형태의 표를 만들 상황이 생깁니다.


이럴 땐 어떻게 해야할까요?


바로 <colspan> 과 <rowspan> 을 사용하시면 됩니다.


먼저 여러 열을 합치기 위해서는 colspan 속성을 사용합니다.


사용하는 방법은 <td>태그 안에 다음과 같이 몇 개의 셀을 합칠지 적어주면 됩니다.


 

1
2
3
4
5
6
7
8
9
10
11
<table>
        <tr>
            <th>제목</th>
            <td colspan="2">1행 2열</td>
        </tr>
        <tr>
            <th>제목</th>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
</table>
cs

 



행을 합치기 위해서도 이와 동일합니다.


rowspan 속성을 사용하여서 행을 합쳐줄 수 있습니다.


 

1
2
3
4
5
6
7
8
9
10
11
<table>
        <tr>
            <th>제목</th>
            <td rowspan="2">1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <th>제목</th>
            <td>2행 3열</td>
        </tr>
</table>
cs

 




표에 제목을 붙이는 <caption>, <figcaption> 태그



 다음과 같은 태그들을 활용해 표에 제목을 쉽게 붙일 수 있습니다.


먼저 <caption> 태그부터 알아보도록 하겠습니다.


<caption>태그는 여는 태그와 닫는 태그로 이루어져 있으며


그 태그 사이에 제목 역할할 부분을 넣어주면 됩니다.


이럴 경우, 제목은 표의 상단 중앙에 위치하게 됩니다.


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
        <caption>
            직접 만들어보는 표
        </caption>
        <tr>
            <th>제목</th>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <th>제목</th>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
</table>
cs

 



다음으로는 <figcaption> 태그에 대해서 알아보겠습니다.


<table> 태그를 감싸는 <figure> 태그를 만든 후


그 안에 제목을 넣을 <figcaption> 태그를 넣어주면 됩니다.


위와 다른 점은 가운데 정렬이 되지 않습니다.


또한 <figcaption>의 위치에 따라서 제목의 위치가 바뀌게 됩니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<figure>
        <table>
            <tr>
                <th>제목</th>
                <td>1행 2열</td>
                <td>1행 3열</td>
            </tr>
            <tr>
                <th>제목</th>
                <td>2행 2열</td>
                <td>2행 3열</td>
            </tr>
        </table>
        <figcaption>
            <p>아래 있는 제목</p>
        </figcaption>
</figure>
cs

 

 






여러 열을 묶어주는 <col>, <colgroup> 태그


표에서 하나의 행에 전체적인 스타일을 지정하기 위해서는


<tr> 태그에 적용을 하면 되었습니다.


그러면 하나의 열에 전체적인 스타일을 지정하기 위해서는 어떻게 해야할까요?


이럴 때 사용하는게 바로 <col>태그 입니다.


닫는 태그는 없으며 <col>의 개수는 항상 표의 열의 개수가 맞아야 합니다.


또한 <col> 태그는 <colgroup>태그로 묶어주며, span 속성을 사용해서 개수를 여러 개 지정할 수 있습니다.


그리고 <colgroup> 태그는 항상 <caption>태그 뒤와 <tr>앞에 사용해야 합니다.



 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table>
        <caption>
            <p>2,3번째 열에만 색깔 넣기</p>
        </caption>
        <colgroup>
            <col>
            <col span="2" style="background: yellow;">
        </colgroup>
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <td>2행 1열</td>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
</table>
cs

 




마무리



오늘은 표를 만드는 태그에 대해서 배워습니다.


아직 까지 어려운 내용은 없지만 반복숙달을 통한 학습이 중요합니다.


이 부분도 충분히 숙달하시길 바랍니다.


오늘도 제 글을 읽어주셔서 감사합니다 :)



저작자표시

'웹프로그래밍 > html,css' 카테고리의 다른 글

[html] vs code extension, Highlight Matching Tag  (0) 2019.02.25
[html] 이미지를 만드는 태그  (0) 2019.01.22
[html] 2.텍스트 관련 태그들 (2) 목록을 만드는 태그  (0) 2019.01.18
[html] 2.텍스트 관련 태그들 (1)  (0) 2019.01.15
[html] html 기본문서 구조  (0) 2019.01.08
'웹프로그래밍/html,css' Related Articles more
Comments