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>


'HTML' 카테고리의 다른 글

javascript 페이지 이동  (0) 2018.10.05
HTML 색상표현  (0) 2017.12.19
HTML이란?  (0) 2017.12.18
HTML 이미지 삽입  (0) 2017.12.18

+ Recent posts