이번 글에서는 HTML 테이블 스타일링과 관련된 구글 개발자 문서의 핵심 원칙을 알아보고, 왜 width 속성 같은 프리젠테이션 속성 대신 CSS를 활용해야 하는지, 유지보수와 접근성을 고려한 현대 웹 개발 방법입니다.
1. 테이블 스타일링의 기본 원칙
웹 개발을 시작하면서 누구나 한 번쯤은 테이블 너비를 HTML 속성으로 조정하고 싶어집니다. 사실 저도 예전에 table width=”100%”처럼 직접 속성을 넣고 급하게 레이아웃을 잡은 적이 있습니다. 그런데 구글 개발자 문서에서는 명확하게 “테이블 요소에 직접 스타일을 적용하지 마세요”라고 안내합니다.
이유는 단순합니다. HTML은 구조만, CSS는 표현만 담당하도록 역할을 분리해야 웹사이트 유지보수와 일관성을 확보할 수 있기 때문입니다.
CSS를 활용하면 반응형 디자인 구현이 훨씬 용이해집니다.
데스크톱에서는 테이블을 넓게, 모바일에서는 좁게 보여주는 방식이 가능합니다. 반면 HTML 속성으로 너비를 지정하면 화면 크기 변화에 대응하기 어렵습니다. 이런 접근은 MDN과 W3C 공식 문서에서도 모두 deprecated 또는 obsolete로 분류되어 더 이상 권장되지 않습니다.
2. 레이아웃에 테이블 사용하지 않기
과거에는 페이지 전체 구조를 잡기 위해 테이블을 사용했죠. 저도 한때 그랬습니다. 그런데 구글 가이드라인은 “페이지 레이아웃을 위해 테이블을 쓰지 마세요”라고 말해요! 대신 CSS의 Flexbox나 Grid 같은 레이아웃 기법을 사용해야 합니다. 이 방식이 훨씬 유연하고, 접근성 측면에서도 스크린 리더 등 보조 기술과 호환됩니다.
실제 사례를 보면, 한 웹사이트에서 테이블로 레이아웃을 잡았다가 유지보수 중 문제가 발생했습니다.
반면 CSS 기반 레이아웃으로 전환하니 전체 스타일을 한곳에서 관리할 수 있어 시간과 비용이 절약되었습니다. 테이블 구조는 데이터 표현용으로만 활용하고, 페이지 레이아웃은 CSS로 처리하는 것이 핵심입니다.
3. 현대 웹 개발에서 CSS 활용의 장점
| 장점 | 설명 |
|---|---|
| 유지보수 용이 | HTML 구조와 CSS 스타일이 분리되어 코드 관리가 쉬워집니다. |
| 일관성 확보 | 사이트 전체 테이블 스타일을 한곳에서 조정 가능해 디자인 통일성이 높습니다. |
| 반응형 대응 | 미디어 쿼리를 활용해 다양한 화면 크기에도 적응할 수 있습니다. |
| 접근성 강화 | 시맨틱 HTML 구조는 보조 기술과 호환이 잘 되어 사용자 경험을 개선합니다. |
정리하면, HTML의 프리젠테이션 속성은 더 이상 쓰지 말고, CSS 클래스를 정의하여 표현과 구조 분리를 실천하는 것이 좋아요. 다음과 같이 CSS 클래스를 적용할 수 있습니다.
style
.custom-table {
width: 100%;
border-collapse: collapse;
}
/style
table class="custom-table"
trtd데이터/td/tr
/table
테이블 CSS 커스터마이징 실무
실제로 사이트에서 테이블 스타일링을 적용할 때는 단순히 너비뿐 아니라, 패딩, 테두리, 배경색 등을 CSS로 정의하는 것이 좋습니다. 다음과 같이 클래스 기반 스타일을 설정할 수 있습니다.
style
.custom-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
.custom-table th, .custom-table td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
.custom-table tr:nth-child(even) {
background-color: #f9f9f9;
}
/style
이렇게 하면 HTML 구조는 깔끔하게 유지하면서, 시각적 표현은 CSS로 통일 관리가 가능합니다. 또한, 미디어 쿼리를 활용하면 모바일과 데스크톱 화면 모두에 적절히 대응할 수 있습니다
@media (max-width: 600px) {
.custom-table {
width: 100%;
font-size: 14px;
}
}
이제 화면이 작아도 테이블이 자동으로 크기를 조정해 가독성을 유지합니다. 사실, 이렇게 CSS로 스타일링을 처리하면 기존 HTML width 속성을 사용하는 방식보다 훨씬 효율적이라는 것을 경험적으로 느낄 수 있습니다.
이러한 방식은 테이블 뿐만 아니라 모든 HTML 코드에도 적용하는게 좋습니다. 일부 플랫폼에서는 외부 CSS의 로딩 문제로 인해 최초 뷰포인트만 인라인 CSS를 예외적으로 사용하기도 합니다.
A1: 네, 구글과 MDN, W3C 모두 width 속성은 obsolete로 분류하고 있습니다. CSS를 사용하여 테이블 너비를 지정하는 것이 권장됩니다.
Q2: 테이블로 페이지 레이아웃을 잡아도 되나요?
A2: 절대 권장되지 않습니다. 페이지 레이아웃은 CSS Flexbox 또는 Grid를 사용하여 처리해야 합니다. 테이블은 데이터 표현용으로만 사용하세요.
Q3: CSS로 테이블 스타일을 통일하면 유지보수가 정말 쉬워지나요?
A3: 네, CSS 클래스로 테이블 스타일을 통일하면 전체 사이트의 디자인을 한 곳에서 관리할 수 있어 변경 사항 적용이 빠르고 오류 가능성이 줄어듭니다.
Q4: 반응형 테이블은 어떻게 구현하나요?
A4: 미디어 쿼리를 활용하여 화면 크기에 따라 테이블 폭, 폰트 크기, 패딩 등을 조정하면 됩니다. 필요 시 스크롤 가능한 컨테이너에 넣어 모바일에서도 가독성을 확보할 수 있습니다.
Q5: HTML 테이블에 색상이나 테두리 속성을 넣어도 되나요?
A5: 직접 HTML 속성으로 넣는 것은 권장되지 않습니다. 대신 CSS를 사용해 배경색, 테두리, 폰트 스타일 등을 적용하세요.
이처럼 CSS 기반 테이블 커스터마이징과 구조-표현 분리 원칙을 따르면, 유지보수와 접근성, 반응형 대응 모두를 만족시킬 수 있습니다.