<22.03.05> HTML 공부 일지 #05. <table>태그로 테이블 구성하기

mayberry 2022. 3. 5. 12:30

HTML 태그를 활용하여 페이지 내 테이블을 구성할 수 있다. 흔히 커뮤니티나 카페, 블로그에서 볼 수 있는 게시판이라던가, 게시글들을 한꺼번에 모아놓은 페이지에서 볼 수 있는 것들도 모두 테이블이라고 할 수 있다.

테이블의 경우, 각 칼럼들의 범주를 나타내는 헤더와 각각의 데이터를 이루는 요소들로 이루어져있다. 위 그림으로 예시를 들자면, 법령종류, 법령명, 소관부처 이런 것들은 모두 테이블의 헤더가 되고, '예비군부대 지휘관 선발에 관한 규칙', '기업도시개발 특별법 시행규칙' 이런 것들은 모두 데이터들이 된다. 위 그림을 기준으로 가로는 행(row), 세로는 열(column)이다. 이러한 개념들은 <table> 태그를 구성하는데 사용되는 개념이니 미리 숙지해야한다.

1. Tag <table>

<table> 태그를 활용하여 웹 페이지 내 테이블을 편리하게 구성할 수 있다. 하지만 <table> 태그를 사용하기 위해 알아야 할 하위 태그들이 있다.

1. <thead>

2. <tbody>

3. <tfoot>

4. <tr>

5. <th>

6. <td>

뭐가 이상하게 많다. 위 태그들은 <table> 태그에 모두 들어가며, 1번부터 3번은 필수적인 요소는 아니고, 4번부터 6번까지가 필수적으로 들어가야 하는 태그들이다. 그럼 위 태그들을 이용하여 어떻게 테이블을 만들 수 있을까? <table>태그를 활용하여 아주 기초적인 테이블을 만드는 구성을 알아보자.

<table>
    <tr>
    	<th>제목1</th>
        <th>제목2</th>
    </tr>
    <tr>
    	<td>내용1</td>
        <td>내용2</td>
    </tr>
</table>

<table>, <tr>, <th>, <td> 태그만을 이용하여 표를 만들었다. 위 코드는 아래와 같은 형태의 테이블을 만든다.

실제 저 코드를 친다고 해서 위와 같이 바로 웹 브라우저에 뜨지 않는다. 예시를 위해 PPT에 표를 만든 것이다. 실제 위 코드를 입력하고 웹 브라우저에서 확인하면 텍스트만 출력된다. ㅡ테두리는 CSS를 통해서 설정할 수 있는데, CSS는 설명하지 않고 HTML 태그로만 설명한다.ㅡ 위 그림과 같은 형태의 테이블을 HTML 코드로 변환한 것이 예시의 코드인것이다. 그럼 각 태그들의 의미를 살펴보자.

1-1. <tr>

<tr> 태그는 테이블의 행(row)을 추가하기 위해 사용하는 태그이다. <tr>을 사용할 때마다 테이블 한 줄이 생겨나는 것이다. 위 코드에서는 <tr> 태그가 총 두 번 사용되었다. 따라서 테이블의 전체 행은 2개이다.

<tr> 태그 안에 테이블에 들어갈 데이터를 삽입할 수 있다.

1-2. <th>

<th> 태그는 테이블의 헤더이다. 쉽게 생각하면 테이블의 가장 첫 번째 행에 들어가는 데이터를 입력하는 것이다. 맨 위에서 테이블의 예시로 들었던 사진을 가져오자.

'법령종류', '법령명', '소관부처', '공포일', '시행일'은 <th> 태그를 사용하여야 한다. 왜냐하면 테이블의 헤더에 해당하는 내용이니까. 그리고 첫 번째 행을 제외한 나머지 행들은 모두 <td> 태그를 활용하여 나타낼 수 있다.

1-3. <td>

<td> 태그는 테이블의 내용에 해당하는 글들을 삽입할 때 사용할 수 있는 태그이다. 위 그림을 예시로 들자면, '부령', '기업도시개발 특별 시행규칙', '경찰청' 등등과 같은 개별적인 데이터 사항이다. 이러한 데이터들은 <td> 태그를 사용하여 감싸주어야 한다.

여기서 주의할 점은, <td> 태그를 활용하여 데이터를 삽입할 때에는, 테이블의 첫 행에서 작성하였던 <th> 태그의 개수와 맞춰야 한다는 것이다. 예를 들어, <th> 태그를 통해 제목1과 제목2를 만들었다면 테이블 내 헤더는 두 개가 되는 것인데, <td>로 데이터를 삽입할 때는 반드시 헤더의 개수에 맞추어야 한다는 것이다.

기본적인 <table> 구성을 알아보았다. 위 태그들을 이용하여 테이블을 작성해도 되지만, 다른 태그들을 사용하여 실제 웹 브라우저에게 테이블의 구조를 더욱 상세히 알려줄 수도 있다. 그것을 위한 태그들이 바로 <thead>, <tbody>, <tfoot>이다.

<thead> 태그는 테이블의 헤더를 나타내는 태그, <tbody>는 테이블의 본문을 나타내는 태그이다. <tfoot>은 테이블의 꼬리를 나타내는 태그인데, 구매요청서라던가 견적서와 같은 테이블을 작성해야 할 때 테이블의 마지막에 들어가는 '합계'와 같은 행을 넣어줄 때 사용한다. 그렇다면 이 세 개의 태그를 활용하여 테이블을 구성해보자.

<table>
    <thead>
        <tr>
            <th>제목1</th>
            <th>제목2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>내용1</td>
            <td>내용2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>내용3</td>
            <td>내용4</td>
        </tr>
    </tfoot>
</table>

코드 길이는 길어졌지만, 테이블의 구조를 의미론적으로 좀 더 잘 이해할 수 있게 되었다. <tr>, <th>, <td>로만 이루어져 있다면 어떤 라인부터 어느 라인까지 테이블 본문인지 알기가 힘들 것이니 말이다. 위처럼 간단한 태그들을 사용하여 의미론적으로 풍부한 테이블을 구성할 수 있다.

2. rowspan 속성과 colspan 속성

만약 웹 페이지의 테이블 중 일부 행끼리 합병하고, 일부 열끼리 합병해야 한다면 HTML 코드로 어떻게 작성해야 할까? 그것을 위한 속성이 rowspan과 colspan 속성이다. rowspan은 행끼리 합병할 때, colspan은 열끼리 합병할 때 사용한다. 해당 속성들은 th와 td 태그 모두에서 사용할 수 있다. 예시 코드를 보자.

<td rowspan = "2">예시</td>
<td colspan = "4">예시</td>

td 태그만 가져와 속성을 적용한 코드이다. 각 속성들의 값은 정수를 입력해야한다. 이 정수의 의미는 합병하고자 하는 행 혹은 열의 수이다. rowspan을 2로 설정했다면, 입력한 행을 포함하여 2개의 행을 합병(바로 아래 행까지 합병)하게 된다. colspan을 4로 설정했다면 입력한 열을 포함하여 4개의 열을 합병하게 된다. 그럼 실제로 적용해보자. 아래와 같은 테이블이 있다고 가정하자.

위 테이블은 일부 행과 열이 합병되어있다. 위에서 설명한 rowspan과 colspan을 활용하여 HTML 코드를 작성하면 아래와 같다.

<table>
    <thead>
        <tr>
            <th>순번</th>
            <th>이름</th>
            <th>직업</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>박지윤</td>
            <td rowspan = "2">가수</td>
        </tr>
        <tr>
            <td>2</td>
            <td>아이유</td>
        </tr>
        <tr>
            <td>3</td>
            <td>이병헌</td>
            <td>배우</td>
        </tr>
        <tr>
            <td>4</td>
            <td colspan = "2">없음</td>
        </tr>
    </tbody>
</table>

rowspan과 colspan 속성을 이용하여 행과 열을 병합해보았다. 하지만 여기서 이상한 점이 있다. 분명 <td> 태그를 설명했을 때에는, <thead>에서 작성하였던 <th> 태그의 개수와 맞추어야 한다고 했었는데, 위 코드는 그렇지 못하다. 이는 바로, rowspan과 colspan을 사용했을 때에는 향후 합병이 이루어질 행은 생략해야 하기 때문이다.

<tbody>의 첫 번째 <tr>을 보면 '가수' 데이터가 들어하는 <td>에 rowspan이 삽입되었다. 값으로 2를 주었기 때문에 해당 row를 포함하여 2개의 행을 병합하겠다는 의미가 된다. 그리고 다음 <tr>(행)을 작성한다고 가정하자. 아이유의 직업을 입력해야 하는 <td> 태그는 생략되어있다. 이는 이미 이전 <tr>(행)의 '직업' 헤더에 해당하는 <td>가 rowspan 속성을 통해 공간을 점유해버렸기 때문이다. 따라서 두 번째 <tr>을 작성할 시점에서 '직업' 헤더에 해당하는 <td>는 작성할 필요가 없어지는 것이다. 만일 이를 무시하고 <td>태그를 사용하면 테이블이 무너진다.

마지막 <tr>에 사용한 colspan 속성 또한 마찬가지다. colspan은 지정한 값만큼의 column을 병합해주기 때문에, '없음'을 표기하는 <td> 태그 이후의 태그는 작성하지 않아도 된다. colspan 속성을 부여한 태그가 이미 공간을 점유해버리기 때문이다. 어려워보이지만 실제로 따라하면 그리 어렵지 않다. 실제 위 코드를 작성하고 웹 브라우저에서 확인하면 아래와 같이 출력된다.

CSS를 설정하지 않았기 때문에 테두리가 모두 생략되었다. 하지만 테두리가 없어도 실제 행과 열이 합병되었음을 알 수 있다.

오늘은 HTML <table> 태그를 활용하여 웹 페이지 내 테이블을 구성하는 방법에 대해 알아보았다. 다음번에도 더 재미있는 공부거리를 들고 포스팅하도록 하겠다!

P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.

저작자표시 비영리 변경금지 (새창열림)