표 콘텐츠 - COLGROUP, COL

표의 열들을 공통적으로 정의하는 컬럼(<col>)과 그의 집합(<colgroup>).
(Column, Column Group)

속성	의미	값	기본값
span	연속되는 열 수	숫자(number)	1

 

다음과 같이 입력을 하게 된다면 th태그의 스타일링을 수정할때 일일이 하나 다 해야한다는 불편한 점이 있다.

<table>
        <caption>데이터 타입과 값</caption>
        <tr>
            <th style = "background-color: tomato;"></th>
            <th>타입</td>
            <th>값</td>
        </tr>
        <tr>
            <th style = "background-color: tomato;">1</th>
            <td>알파벳</td>
            <td>A</td>
        </tr>
        <tr>
            <th style = "background-color: tomato;">2</th>
            <td>숫자</td>
            <td>7</td>
        </tr>
    </table>

 

그래서 보안된 점이 col인데, col은 colgroup태그 안에 위치한다.

col은 기본적으로 caption밑이거나 첫번째 tr태그 위에 적어야 한다.

<table>
        <caption>데이터 타입과 값</caption>
        <colgroup>
            <col>
            <col style = "background-color: tomato;">
            <col>
        </colgroup>
        <tr>
            <th s></th>
            <th>타입</td>
            <th>값</td>
        </tr>
        <tr>
            <th>1</th>
            <td>알파벳</td>
            <td>A</td>
        </tr>
        <tr>
            <th>2</th>
            <td>숫자</td>
            <td>7</td>
        </tr>
    </table>

col태그로 색상 지정

 

하지만 col태그도 또한 여러개 있으면 불편한 점이 있다. span을 이용해서 여러개의 열도 한꺼번에 지정할 수 있다.

 

 

 

<table>
        <caption>데이터 타입과 값</caption>
        <colgroup>
            <col>
            <col style = "background-color: tomato;" span = "2">
        </colgroup>
        <tr>
            <th s></th>
            <th>타입</td>
            <th>값</td>
        </tr>
        <tr>
            <th>1</th>
            <td>알파벳</td>
            <td>A</td>
        </tr>
        <tr>
            <th>2</th>
            <td>숫자</td>
            <td>7</td>
        </tr>
    </table>

span으로 설정 범위 확장