HTML

table colgroup 사용방법

호밀밭의밀수꾼 2018. 10. 14. 16:32

table colgroup 사용방법

<colgroup> 은 테이블의 한 행을 기준으로 일괄적인 디자인을 적용하고자 할 때에 아주 유용하다.

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
​
<body>
    <table>
        <colgroup>
            <col/>
            <col/>
            <col width="70px" />
            <col style="width: 70px;" />
            <col class="small-width" />
        </colgroup>
        <thead>
            <tr>
                <th style="border: 1px solid gray;">A</th>
                <th style="border: 1px solid gray;">B</th>
                <th style="border: 1px solid gray;">C</th>
                <th style="border: 1px solid gray;">D</th>
                <th style="border: 1px solid gray;">E</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
                <td>E</td>
            </tr>
        </tbody>
    </table>
</body>
​
</html>
​

<colgroup>
    <col/>
    <col/>
    <col width="70px" />
</colgroup>

<col/> <col/> 대신 <col span="2"/> 코드 사용가능

<colgroup>
  <col span="2"/>
  <col style="width: 70px;"/>
</colgroup>