HTML에서 테이블 셀의 너비와 높이를 지정하려면 CSS 스타일을 사용해야 합니다. 과거에는 <td> 태그에 height 및 width 속성을 직접 추가하는 방식이 사용되었지만, HTML5에서는 이러한 속성이 더 이상 지원되지 않습니다. 따라서 CSS의 width 속성으로 너비를, height 속성으로 높이를 각각 설정하는 것이 올바른 방법입니다.
CSS로 셀 크기를 설정해야 하는 이유
HTML5 웹 표준에 맞춰 개발하려면 구조(HTML)와 디자인(CSS)을 분리하는 것이 좋습니다. 셀 크기 조절 역시 인라인 스타일이나 외부 스타일시트를 통해 처리하면 코드의 유지보수성과 재사용성이 크게 향상됩니다.
style 속성 사용 시 주의할 점
<td> 요소에 직접 적용한 style 속성은 다른 모든 스타일보다 우선순위가 높습니다. 즉, HTML 문서 내 <style> 태그나 외부 스타일시트에서 전역적으로 설정한 스타일이 있더라도, 인라인 style 속성이 그것을 덮어쓰기(override)합니다. 이 점을 유의하지 않으면 의도치 않은 디자인 결과가 나타날 수 있습니다.
셀 너비·높이 설정 예제
아래 코드는 HTML 테이블 셀의 높이와 너비를 설정하는 실제 예제입니다. <style> 태그로 테이블 전체에 테두리를 적용하고, style 속성을 사용해 특정 셀의 크기를 지정했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Tutorial</h1>
<table>
<tr>
<th>Language</th>
<th>Lessons</th>
</tr>
<tr>
<td style="height:100px;width:100px">Java</td>
<td style="height:100px;width:100px">50</td>
</tr>
<tr>
<td>Ruby</td>
<td>40</td>
</tr>
</table>
</body>
</html>예제 코드 설명
- <style> 태그 안에서 table, th, td 요소에 검은색 1px 실선 테두리를 적용했습니다.
- 첫 번째 데이터 행의 두 셀에는 style 속성으로 height:100px와 width:100px를 지정하여 크기를 고정했습니다.
- 스타일이 지정되지 않은 두 번째 행(Ruby)은 콘텐츠 크기에 맞춰 자동으로 렌더링됩니다.
이처럼 CSS의 width와 height 속성만 잘 활용하면 HTML5 환경에서도 테이블 셀의 크기를 자유롭게 제어할 수 있습니다.