HTML 테이블에서 여러 개의 열을 하나로 묶어 스타일을 일괄 적용하려면 span 속성을 사용하면 됩니다. 이 속성은 주로 <colgroup> 태그 안에 포함된 <col> 요소와 함께 사용되며, 해당 열 그룹이 몇 개의 열을 차지(확장)할지를 숫자로 지정합니다.
예를 들어 span="2"라고 설정하면 두 개의 열이 하나의 그룹으로 묶여 같은 배경색이나 너비 등의 스타일을 공유하게 됩니다.
span 속성 사용 예제
아래 코드는 첫 번째 열만 회색 배경으로 지정한 간단한 테이블 예제입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<colgroup>
<col span = "1" style = "background-color:grey">
</colgroup>
<tr>
<th>S.NO</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Amit</td>
</tr>
</table>
</body>
</html>코드 설명
<colgroup>: 테이블 내 열들의 그룹을 정의하는 컨테이너 역할을 합니다.<col span="1">: 한 개의 열을 대상으로 지정하며, 인라인 스타일로 회색(grey) 배경색을 적용했습니다.- 열 전체에 스타일을 적용하므로 각 셀(
<td>,<th>)마다 클래스나 스타일을 반복해서 넣을 필요가 없어 코드가 깔끔해집니다.
참고 사항
span 속성은 양의 정수 값만 허용하며, 생략할 경우 기본값은 1입니다. 또한 <col> 요소에 span과 함께 width, background-color 등의 CSS 속성을 조합하면 열 단위 레이아웃을 손쉽게 제어할 수 있습니다.