HTML 테이블의 레이아웃 방식을 조절하려면 CSS의 table-layout 속성을 사용합니다. 이 속성을 활용하면 브라우저가 셀과 열의 너비를 계산하는 방식을 직접 지정할 수 있어, 복잡한 데이터 테이블도 원하는 형태로 깔끔하게 배치할 수 있습니다.
table-layout 속성 문법
table-layout 속성은 아래와 같은 값을 가질 수 있습니다.
table-layout: auto | fixed | initial | inherit;
속성 값 살펴보기
- auto (기본값): 브라우저가 셀 내용에 따라 열 너비를 자동으로 계산합니다.
- fixed: 테이블과 열의 너비가 고정되며, 셀 내용과 무관하게 레이아웃이 결정됩니다. 렌더링 속도가 빨라집니다.
- initial: 속성의 기본값(auto)으로 초기화합니다.
- inherit: 부모 요소의 table-layout 값을 상속받습니다.
예제 1: table-layout: auto 적용하기
첫 번째 예제에서는 auto 값을 사용해 테이블 레이아웃을 제어하는 방법을 살펴보겠습니다. 이 경우 각 열의 너비는 셀 안의 내용 길이에 맞춰 자동으로 조정됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
background-color: black;
color: white;
}
table#demo {
table-layout:auto;
width: 210px;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table id="demo">
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>실행 결과
예제 2: table-layout: fixed 적용하기
다음 예제에서는 fixed 값을 적용해 보겠습니다. 이 경우 테이블 전체 너비(100%)를 기준으로 열 너비가 균등하게 배분되며, 셀 내용의 길이와 관계없이 일정한 레이아웃이 유지됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
background-color: green;
color: white;
}
table#demo {
table-layout: fixed;
width: 100%;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table id="demo">
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>실행 결과
auto와 fixed, 어떤 것을 선택해야 할까?
auto는 내용에 따라 유연하게 너비가 조정되어 소량의 데이터에는 적합하지만, 브라우저가 전체 테이블을 분석한 후 렌더링하기 때문에 대용량 테이블에서는 속도가 느려질 수 있습니다. 반면 fixed는 첫 번째 행만 분석해 레이아웃을 결정하므로 렌더링이 빠르고, 열 너비가 항상 일정하게 유지되어 반응형 웹 디자인에서 특히 유용합니다. 데이터 양이 많거나 일관된 열 너비가 필요하다면 fixed 값을 사용하는 것이 좋습니다.