테이블 테두리의 너비를 변경하려면 DOM의 border 속성을 사용하면 됩니다. 이 속성을 활용하면 테두리의 두께뿐만 아니라 실선·점선 같은 스타일과 색상까지 한 번에 지정할 수 있어 매우 편리합니다.
아래 예제 코드를 실행하면 JavaScript로 테이블 테두리의 너비를 동적으로 변경하는 과정을 직접 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<script>
function borderFunc(x) {
document.getElementById(x).style.border = "5px dashed blue";
}
</script>
</head>
<body>
<table style = "border:2px solid black" id = "newtable">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
</table>
<p>
<input type = "button" onclick = "borderFunc('newtable')"
value = "Change Border Width">
</p>
</body>
</html>
코드 설명
위 예제는 처음에 2px solid black(2픽셀 두께의 검은색 실선)으로 설정된 테두리를 가진 테이블을 보여줍니다. 버튼을 클릭하면 borderFunc() 함수가 호출되고, document.getElementById()로 테이블 요소를 가져온 뒤 style.border 속성을 5px dashed blue로 변경합니다.
그 결과, 테이블 테두리가 5픽셀 두께의 파란색 점선으로 바뀌는 것을 확인할 수 있습니다. 이처럼 style.border 속성 하나로 테두리의 너비, 스타일, 색상을 자유롭게 제어할 수 있습니다.