HTML DOM Style의 tableLayout 속성은 HTML 문서에서 테이블의 셀, 행, 열이 배치되는 방식을 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 테이블 열의 너비 계산 방식을 세밀하게 제어할 수 있어, 콘텐츠 양에 따라 레이아웃이 흐트러지는 것을 방지할 수 있습니다.
구문(Syntax)
tableLayout 속성의 기본 구문은 다음과 같습니다.
1. tableLayout 값 가져오기
object.tableLayout
2. tableLayout 값 설정하기
object.tableLayout = "value"
value에 설정할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| initial | 이 속성값을 브라우저의 기본값으로 설정합니다. |
| inherit | 부모 요소로부터 이 속성값을 상속받습니다. |
| fixed | 열 너비와 테이블 너비를 기준으로 열의 너비를 고정합니다. 셀 내용과 관계없이 지정된 너비가 유지됩니다. |
| auto | 테이블에서 가장 넓은 줄바꿈 불가능한 콘텐츠의 너비를 기준으로 열의 너비를 자동으로 조정합니다. |
fixed 값은 렌더링 속도가 빠르다는 장점이 있고, auto 값은 콘텐츠에 맞게 유연하게 조정된다는 장점이 있습니다. 상황에 맞게 선택하여 사용하시기 바랍니다.
이제 HTML DOM Style tableLayout 속성의 실제 사용 예제를 살펴보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
width: 400px;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
<body>
<h1>DOM Style tableLayout 속성 데모</h1>
<table border="2">
<caption>학생 명단</caption>
<tr>
<th>이름</th>
<th>학번</th>
</tr>
<tr>
<td>John</td>
<td>031717</td>
</tr>
<tr>
<td>Elon</td>
<td>041717</td>
</tr>
</table>
<button onclick="show()" class="btn">tableLayout 설정</button>
<script>
function show() {
document.querySelector('table').style.tableLayout = "fixed";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 학생 명단 테이블과 버튼이 화면에 표시됩니다.
이제 “tableLayout 설정” 버튼을 클릭하면, 자바스크립트의 show() 함수가 실행되어 테이블의 tableLayout 속성이 fixed 값으로 변경됩니다.
버튼 클릭 후 테이블 열의 너비가 셀 내용과 무관하게 고정 너비 방식으로 배치되는 것을 확인할 수 있습니다. 이처럼 tableLayout 속성을 활용하면 자바스크립트만으로 테이블 레이아웃을 동적으로 제어할 수 있습니다.