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

HTML colspan 속성 완벽 정리 – 표 헤더 셀의 열 병합 방법

HTML의 <th> 요소에서 사용하는 colspan 속성은 표의 헤더 셀이 여러 개의 열에 걸쳐 표시되도록 범위를 지정하는 기능입니다. 예를 들어, 하나의 제목 셀로 두 개 이상의 열을 묶어야 할 때 유용하게 활용할 수 있습니다.

colspan 속성 문법

기본적인 사용 문법은 다음과 같습니다.

<th colspan="num">

여기서 num은 해당 헤더 셀이 차지할 열(column)의 개수를 의미합니다. 예를 들어 colspan="3"으로 지정하면 헤더 셀이 세 개의 열을 하나로 병합하여 표시됩니다.

colspan 속성 사용 예제

아래 예제는 <th> 요소에 colspan 속성을 적용해 제품 비용 내역표를 만든 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 2px solid green;
}
</style>
</head>
<body>
<h2>Product Expenses</h2>
<table>
    <tr>
        <th colspan="2">Expenses</th>
    </tr>
    <tr>
        <td>Product Development</td>
        <td>500000</td>
    </tr>
    <tr>
        <td>Marketing</td>
        <td>500000</td>
    </tr>
    <tr>
        <td>Services</td>
        <td>100000</td>
    </tr>
    <tr>
        <td>Support</td>
        <td>100000</td>
    </tr>
    <tr>
        <td>Maintenance</td>
        <td>100000</td>
    </tr>
    <tr>
        <td colspan="2">Total Budget = INR 1300000</td>
    </tr>
</table>
</body>
</html>

실행 결과

위 코드를 실행하면 초록색 테두리가 적용된 표가 출력되며, 첫 번째 행의 'Expenses' 헤더 셀이 두 개의 열을 가로지르는 형태로 표시됩니다.

예제 코드 분석

예제에서는 다음과 같이 헤더 셀의 열 병합 개수를 설정했습니다.

<th colspan="2">Expenses</th>

병합 개수가 2로 지정되어 있으므로, 'Expenses'라는 헤더 셀은 아래 두 개의 열(항목명과 금액)을 하나로 합쳐 표시합니다. 마찬가지로 마지막 행의 'Total Budget' 셀에도 colspan="2"를 적용해 전체 너비를 차지하도록 구성했습니다.

정리

colspan 속성은 <th>뿐만 아니라 <td> 요소에서도 동일하게 사용할 수 있으며, 표의 구조를 깔끔하게 정리하고 가독성을 높이는 데 필수적인 속성입니다. 카테고리별 그룹화, 합계 행 표시 등 다양한 상황에서 활용해 보시기 바랍니다.