프론트엔드/HTML

Tag - 테이블(table) 관련 4

ksge7 2020. 8. 19. 03:53

<col>과 <colgroup>

일반적으로 테이블을 만드는 태그를 쓸 때 <tr>을 써주게 되면서 가로줄인 행을 기준으로 테이블의 구조를 짜게 된다.

 

그렇다보니 스타일을 지정할 때 열(column)만 따로 묶어서 표현하기 힘든 점이 있다.

 

그래서 생긴 것이 <col>과 <colgroup>이다.

 

<col>과 <colgroup>의 적용

구분

빨강 배경

파랑 배경

녹색 배경

구분2

빨강 배경

파랑 배경

녹색 배경

 

위와 같은 테이블을 만든다고 상상해보자.

 

<body>
    <table>
        <colgroup>
        </colgroup>
        <tr>
            <td>구분</td>
            <td>빨강 글씨</td>
            <td>파랑 글씨</td>
            <td>녹색 글씨</td>
        </tr>
        <tr>
            <td>구분2</td>
            <td>빨강 글씨</td>
            <td>파랑 글씨</td>
            <td>녹색 글씨</td>
        </tr>
</table>
</body>

 

세로 줄 단위로 스타일을 적용하고 싶다면 우선 <colgroup> 태그를 <table> 태그 안(<table>과 <tr> 사이)에 넣어준다.

 

<body>
    <table>
        <colgroup>
            <col>
            <col style="background-color: red;">
            <col style="background-color: blue;">
            <col style="background-color: green;">
        </colgroup>
        <tr>
            <td>구분</td>
            <td>빨강 글씨</td>
            <td>파랑 글씨</td>
            <td>녹색 글씨</td>
        </tr>
        <tr>
            <td>구분2</td>
            <td>빨강 글씨</td>
            <td>파랑 글씨</td>
            <td>녹색 글씨</td>
        </tr>
</table>
</body>

 

그리고 세로 줄의 의미하는 <col> 태그 4개를 <colgroup>안에 넣어준다.

 

한 개의 <col> 태그는 테이블에서 1개의 열을 의미한다.

 

이제 <col>에 다양한 스타일을 적용하면 된다.