프론트엔드/HTML

Tag - 테이블(table) 관련 2

ksge7 2020. 8. 19. 02:51

colspan과 rowspan

테이블을 이용하다보면 가끔 테이블 셀을 합칠 일이 생긴다.

 

그럴 때면 <colspan>과 <rowspan>으로 나눠진다.

 

<col>은 세로줄을 나타내고, <span>은 가로줄을 나타낸다.

 

하지만 span에서 <colspan>은 가로 방향으로 셀을 합쳐주고 <rowspan>은 세로 방향으로 셀을 합친다.

 

<colspan>과 <rowspan> 모두 전체 테이블 칸수보다 더 많은 칸을 쓸 수 없다.

 

예를 들어 테이블 가로 세로 3칸짜리 테이블에서 <colspan>과 <rowspan>에게는 3까지 줄 수 있다.

 

그 이상의 숫자는 주어져도 동작을 하지 않는다.

 

<colspan> 태그 - 가로방향 셀 병합

대형 마트 목록

이마트

롯데마트

홈플러스

 
<body>
    <table>
        <tr>
            <td colspan="3"> 대형마트 목록 </td>
        </tr>
        <tr>
            <td> 이마트 </td>
            <td> 롯데마트 </td>
            <td> 홈플러스 </td>
        </tr>
    </table>
</body>

 

<colspan> 태그를 쓰면 가로 방향으로 셀을 병합할 수 있다. 이때 <colspan>의 최대 범위는 3이다.

 

<rowspan> 태그 - 세로 방향 셀 병합

마트 목록

이마트

롯데마트

홈플러스

빅마트

이마트 트레이더스

코스트코

하나로마트

홈플러스 익스프레스

GS슈퍼

 
<body>
    <table>
        <tr>
            <td rowspan="3"> 마트 목록 </td>
            <td> 이마트 </td>
            <td> 롯데마트 </td>
            <td> 홈플러스 </td>
        </tr>
        <tr>
            <td> 빅마트 </td>
            <td> 이마트 트레이더스 </td>
            <td> 코스트코 </td>
        </tr>
        <tr>
            <td> 하나로마트 </td>
            <td> 홈플러스 익스프레스 </td>
            <td> GS 슈퍼 </td>
        </tr>
    </table>
</body>

 

<rowspan> 태그를 쓰면 세로 방향으로 셀을 병합할 수 있다. 이때 <rowspan>의 최대 범위는 3이다.