HTML <col>: 표 열 요소

HTML <col>: 표 열 요소

HTML <col> 요소는 표의 열 그룹에 속하는 열을 정의합니다.

<table>
  <caption>
    스타크래프트의 유닛들
  </caption>
  <colgroup>
    <col />
    <col span="2" class="terran" />
    <col span="2" class="protoss" />
    <col span="2" class="zerg" />
  </colgroup>
  <thead>
    <tr>
      <td></td>
      <th scope="col">건설로봇</th>
      <th scope="col">해병</th>
      <th scope="col">일벌레</th>
      <th scope="col">저글링</th>
      <th scope="col">탐사정</th>
      <th scope="col">광전사</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">체력</th>
      <td>60</td>
      <td>40</td>
      <td>40</td>
      <td>35</td>
      <td>20</td>
      <td>100</td>
    </tr>
  </tbody>
</table>
table {
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  border: 1px solid #777;
  color: #000;
  padding: 8px;
}

col {
  background: #fff;
}

.terran {
  background: #96dcff;
}
.protoss {
  background: #fff2ab;
}
.zerg {
  background: #ffc4ab;
}

불러오는 중...

특성

전역 특성을 포함합니다.

span

<col>이 차지하는 열 수를 지정합니다. 기본 값은 1입니다. 자연수가 아니거나 1000을 초과하는 값은 유효하지 않습니다.

사용 일람

<col>은 표의 특정 열에 스타일을 적용해야 할 때 유용합니다. 하지만 <col>에는 한정된 종류의 CSS 속성만 사용할 수 있습니다.

  • 테두리: <table>border-collapse: collapse를 적용한 경우에만 사용 가능합니다.
  • 배경: 행(<tr>)과 칸(<th>, <td>)의 배경이 모두 투명할 때만 사용 가능합니다.
  • 너비: width 속성으로 열의 최소 너비를 설정할 수 있습니다.
  • 표시: visibility: collapse를 적용한 열은 렌더링에서 제외됩니다.

자세한 내용은 CSS 2.1 명세를 참고하세요.

명세

HTML Standard

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
col
align
char
charoff
span
valign
width

같이 보기

마지막 수정:

CC BY-SA 4.0 unless otherwise noted. See LICENSE.