티스토리 뷰

Programming/HTML&CSS

[HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 (<table> 태그)

Lkt_Programmer 2019. 3. 20. 13:39
반응형

오늘은 웹 페이지에서 테이블 태그를 활용하여 테이블을 표현하는 방법에 대해 알아보겠습니다. 

테이블 태그는 단순히 테이블을 보여줄 때 사용이 되지만 웹 페이지의 전체적인 레이아웃을 구성 할 때도 사용이 됩니다. 사실 테이블 태그의 경우는 요즘 잘 사용되지 않는 추세이긴 하지만 

(웹 페이지의 레이아웃 구성도 div 태그를 활용하여 구성합니다) 

그래도 모르고 넘어가면 안되기 때문에 한번 살펴보도록 하겠습니다.




  1. Table 태그 기본


먼저 테이블 태그 영역에 사용 될 수 있는 하위 태그들에 대해 정리 해보겠습니다.

  • <table> : table을 생성하는데 사용되는 가장 상위의 태그
  • <tr> : 새로운 행을 시작하는 태그
  • <td> : 새로운 열을 시작하는 태그
기본적으로 이렇게만 알고 시작해보도록 하겠습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <table border="2px">
        <tr>
            <td>과목</td>   <!-- 1행 1열-->
            <td>학생 1</td> <!-- 1행 2열-->
            <td>학생 2</td> <!-- 1행 3열-->
        </tr>
        <tr>
            <td>수학</td>   <!-- 2행 1열-->
            <td>80</td>     <!-- 2행 2열-->
            <td>70</td>    <!-- 2행 3열-->
        </tr>
        <tr>
            <td>과학</td>   <!-- 3행 1열-->
            <td>50</td>     <!-- 3행 2열-->
            <td>30</td>    <!-- 3행 3열-->
        </tr>
    </table>
</body>
cs

테이블을 시작하기 위해서는 <table></table> 안에 정의를 합니다. 
<table> 태그 안에 행을 정의하기 위해 <tr> 태그를 사용합니다. 예제에서는 총 3개의 행을 정의하기 위해 <tr> 태그를 3번 작성 한 것을 확인 할 수 있습니다. 각 <tr> 태그에서는 열을 정의하기 위한 <td> 태그를 사용하였습니다. 결과적으로 3x3 테이블을 생성하는 코드입니다.


  2. colspan / rowspan


colspan과 rowspan 속성을 사용하여 행열을 합칠 수 있습니다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <table border="2px">
        <tr>
            <td>과목</td>   <!-- 1행 1열-->
            <td>학생 1</td> <!-- 1행 2열-->
            <td>학생 2</td> <!-- 1행 3열-->
        </tr>
        <tr>
            <td colspan="3">열 합치기</td>
        </tr>
        <tr>
            <td>과학</td>   <!-- 3행 1열-->
            <td>50</td>     <!-- 3행 2열-->
            <td>30</td>    <!-- 3행 3열-->
        </tr>
    </table>
</body>
cs


두 번째 행을 의미하는 9 Line을 살펴보면 colspan 속성값을 "3"으로 지정하고 있습니다. 두 번째 행이 하나로 합쳐진 것을 확인 할 수 있습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
    <table border="2px">
        <tr>
            <td>과목</td>   <!-- 1행 1열-->
            <td>학생 1</td> <!-- 1행 2열-->
            <td>학생 2</td> <!-- 1행 3열-->
        </tr>
        <tr>
            <td colspan="2">2열 합치기</td>
            <td>20</td>
        </tr>
        <tr>
            <td>과학</td>   <!-- 3행 1열-->
            <td>50</td>     <!-- 3행 2열-->
            <td>30</td>    <!-- 3행 3열-->
        </tr>
    </table>                      
</body>
cs


위 같은 소스에서 colspan 값을 "2"로 설정을 하게 되면 두 개의 행만 병합이 된 채로 나오는 것을 확인 할 수 있습니다. 이런식으로 rowspan을 사용하면 열을 병합하는 것도 가능합니다.



  3. Table 태그 속성 정리


<table> 태그의 속성들을 정리해보겠습니다.


속성명

 설명

 border

 테이블의 테두리 두께를 설정합니다.

 bordercolor

 테이블의 테두리 색깔을 설정합니다.

 width

 테두리의 넓이를 설정합니다.

 height

 테두리의 높이를 설정합니다.

 bgcolor

 background Color를 설정합니다.


아래는 각 속성을 적용해본 html 소스와 결과 화면입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <table border="2px" bordercolor = "red" width = "200" height = "200">
        <tr bgcolor = "green">
            <td>과목</td>   <!-- 1행 1열-->
            <td>학생 1</td> <!-- 1행 2열-->
            <td>학생 2</td> <!-- 1행 3열-->
        </tr>
        <tr>
            <td bgcolor = "blue">수학</td>   <!-- 2행 1열-->
            <td>80</td>     <!-- 2행 2열-->
            <td>70</td>    <!-- 2행 3열-->
        </tr>
        <tr>
            <td bgcolor = "blue">과학</td>   <!-- 3행 1열-->
            <td>50</td>     <!-- 3행 2열-->
            <td>30</td>    <!-- 행 3열-->
        </tr>
    </table>
</body>
cs


테이블 태그에 대해서 알아봤는데요. 사실 예전에는 웹 페이지의 전체적인 레이아웃을 구성 할 때 많이 사용되었는데 요즘은 잘 사용되지 않는 추세인것 같습니다. 요즘 웹 레이아웃은 보통 div 태그와 span 태그를 통해서 잡는게 요즘 추세인 것 같습니다.


그럼 다음에 봐요! 글에 잘못 된 부분이 있으면 댓글을 남겨주시면 감사하겠습니다. 감사합니다.






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

'Programming > HTML&CSS' 카테고리의 다른 글

[HTML5/CSS3] span 태그 & div 태그의 차이  (0) 2019.03.22
[HTML5/CSS3] form 태그를 활용한 간단한 회원가입 페이지 만들기  (0) 2019.03.21
[HTML/CSS] HTML 기초 강좌 - ul/li 태그 & img 태그  (0) 2019.03.19
[HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자  (0) 2019.03.19
[HTML5/CSS] HTML과 CSS 기초 개념 이해하기  (0) 2019.03.18