HTML 테이블 사용방법 (table)

신규 블로그를 만들었습니다!

2020년 이후부터는 아래 블로그에서 활동합니다.

댓글로 질문 주셔도 확인하기 어려울 수 있습니다.

html 문서에는 테이블을 생성할 수 있는 방법이 있다. 바로 table 태그를 사용하면 되는데, table 태그 안에는 행(row)을 컨트롤할 수 있는 tr태그와 열(column)을 컨트롤할 수 있는 td태그가 있다.

그리고, colspan, rowspan 속성이 있는데, 아래 내용에서 자세히 살펴본다.

<table>, <tr>, <td> 태그

테이블은 점점 사용을 안하고 있는 태그 중 하나지만, 기본적으로 알아야 하는 태그 중에 하나다. 예전에는 홈페이지의 레이아웃을 구성할 때, 테이블 태그를 사용하기도 했지만, 수정을 해야하거나 할 때 많은 부분을 수정해야해서 요즘은 점점 사용을 안하는 추세이다.

일단, 테이블 만드는 방법을 살펴보면,

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>테이블</title>
</head>
<body>
    <table>
        <!-- 1행 -->
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
            <td>1행 4열</td>
        </tr>

        <!-- 2행 -->
        <tr>
            <td>2행 1열</td>
            <td>2행 2열</td>
            <td>2행 3열</td>
            <td>2행 4열</td>
        </tr>
    </table>
</body>
</html>

위와 같이 <tr>태그로 하나의 행(row)을 만들고, <td> 태그로 열(column)을 만든다.

위 코드를 실행한 화면이지만, 경계가 없어서 알아보기 힘들다. table태그에는 border라는 속성이 존재하기 때문에, 이때 border="1" 이라는 값을 넣어주면 보기 편하다.

<table border="1">
        <!-- 1행 -->
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
            <td>1행 4열</td>
        </tr>
... 생략 ...

테두리 있으니 진짜 테이블 답게 바꼈다.

rowspan, colspan 속성

이렇게 테이블을 만들었지만, 테이블의 셀을 병합을 하고 싶을 수 도 있다. 이때 사용하는 속성값이 rowspan과 colspan이다.

rowspan을 사용하면 행(row)을 합칠 수 있고, colspan을 사용하면 열(column)을 합칠 수 있다. 예를들면,

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>테이블</title>
</head>
<body>
    <table border="1">
        <!-- 1행 -->
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
            <td>1행 4열</td>
        </tr>

        <!-- 2행 -->
        <tr>
            <td>2행 1열</td>
            <td>2행 2열</td>
            <td>2행 3열</td>
            <td>2행 4열</td>
        </tr>

        <!-- 3행 -->
        <tr>
            <td colspan="2">3행 1, 2열</td>
            <td>3행 3열</td>
            <td>3행 4열</td>
        </tr>

        <!-- 4, 5행 -->
        <tr >
            <td rowspan="2">4, 5행 1열</td>
            <td>4행 2열</td>
            <td>4행 3열</td>
            <td>4행 4열</td>
        </tr>
        <tr>
            <td>5행 2열</td>
            <td>5행 3열</td>
            <td>5행 4열</td>
        </tr>
    </table>
</body>
</html>

3행에 colspan을 사용하면 1열과 2열을 합쳤다. 그리고, rowspan을 사용하여 4행과 5행을 합쳤다.

참고. <th>

th를 사용하면, 강조효과를 낼 수 있다. 보통 "표"를 보면 맨 위의 행을 제목(title)로 하기 때문에 진하게 표시하곤 한다. html문서에서는 이때 th태그를 사용하면 된다. 예를들면,

<table border="1">
    <!-- 1행 -->
    <tr>
        <th>1행 1열</th>
        <th>1행 2열</th>
        <th>1행 3열</th>
        <th>1행 4열</th>
    </tr>
...생략...

차이가 보이는가? td태그 대신에 th태그를 사용했다. 결과는 아래와 같다.

예제 확인 사이트
https://taehongdev.github.io/html_css_study/exam03/exam03_03.html

3장 예제3

taehongdev.github.io

다른 글

2019/03/15 - [WEB/HTML&CSS] - HTML에서 리스트 사용방법(ol, ul, li)

HTML에서 리스트 사용방법(ol, ul, li)

HTML에는 리스트를 표현할 수 있는 방법이 크게 2가지가 있다. 하나는 ol, ul을 사용하는 방법, 두번째는 dl, dt를 사용하는 방법이다. 무엇을 사용할지는 개발자 마음이다. 다만 추천하는 방법은 ol이나 ul이다...

hongku.tistory.com

2019/02/09 - [Algorithm/백준 온라인 저지] - 백준 15905번 UCPC는 무엇의 약자일까? 코틀린으로 풀기

백준 15905번 UCPC는 무엇의 약자일까? 코틀린으로 풀기

해당 문제는 직접 풀어보고 채점까지 마친 뒤, 작성한 글입니다. 문제풀이는 아래쪽에 있으니, 풀이를 보고싶은 분은 아래쪽을 확인하시면 됩니다. 문제 출처 https://www.acmicpc.net/problem/15904 문제 UCPC는..

hongku.tistory.com

저작자표시 비영리 동일조건

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

CSS의 기본정리. 반드시 알아야하는 CSS 내용 (0)	2019.03.19
HTML 오디오 태그 (Audio, iframe) 음악 자동재생 (3)	2019.03.18
HTML에서 이미지 가져오기 (img 태그) (1)	2019.03.17
HTML에서 리스트 사용방법(ol, ul, li) (0)	2019.03.15
CSS :: 버튼(Button) 예쁘게 꾸미기, 여러개의 버튼 그룹화 하기 (28)	2018.10.19