Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 태그 완벽 정리 – 테이블 열(Column) 속성 한 번에 지정하기

HTML <col> 태그란?

HTML의 <col> 태그는 테이블(table)에서 각 열(column)에 스타일이나 속성을 일괄 적용할 때 사용하는 요소입니다. 특정 열 전체에 배경색, 너비 등을 지정하고 싶을 때 각 셀(<td>)마다 스타일을 반복해서 작성하는 대신, <col> 태그 하나로 간편하게 처리할 수 있습니다.

단, <col> 태그는 반드시 <colgroup> 요소 내부에 위치해야 하며, 닫는 태그 없이 단독으로 사용됩니다.

주요 속성

  • span : <col> 요소가 적용될 열의 개수를 지정합니다. 예를 들어 span="2"로 설정하면 두 개의 연속된 열에 동일한 스타일이 한 번에 적용됩니다.

예제 코드

아래는 <col> 태그를 활용해 테이블 열에 배경색을 지정하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 2px solid black;
}
</style>
</head>
<body>
<h2>ICC Rankings</h2>
<table>
    <colgroup>
        <col span="2" style="background-color:magenta;">
        <col style="background-color:blue;">
    </colgroup>
    <tr>
        <th>Player</th>
        <th>Country</th>
        <th>Rank</th>
    </tr>
    <tr>
        <td>Jack</td>
        <td>WI</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>AUS</td>
        <td>2</td>
    </tr>
    <tr>
        <td>Virat</td>
        <td>IND</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Steve</td>
        <td>AUS</td>
        <td>4</td>
    </tr>
    <tr>
        <td>Kane</td>
        <td>NZ</td>
        <td>5</td>
    </tr>
    <tr>
        <td>David</td>
        <td>AUS</td>
        <td>6</td>
    </tr>
</table>
</body>
</html>

코드 설명

  • <colgroup> 안에 첫 번째 <col>은 span="2"로 설정되어 Player 열과 Country 열에 마젠타(magenta) 배경색을 적용합니다.
  • 두 번째 <col>에는 span 속성이 없으므로 나머지 Rank 열 하나에만 파란색 배경이 적용됩니다.
  • 테이블에는 검은색 2px 테두리가 지정되어 있어 열 구분이 명확하게 보입니다.

실행 결과

위 코드를 브라우저에서 실행하면 앞의 두 열(선수 이름, 국가)은 마젠타 색 배경으로, 마지막 열(순위)은 파란색 배경으로 표시되는 것을 확인할 수 있습니다.

정리

<col> 태그는 테이블의 열 단위 스타일링을 간결하게 만들어 주는 유용한 요소입니다. 열이 많은 데이터 테이블에서 코드 중복을 줄이고 유지보수성을 높이고 싶다면 <colgroup>과 함께 적극적으로 활용해 보세요.