안녕하세요! 프론트엔드 개발의 길을 걷고 계신 여러분을 환영합니다.
오늘은 어쩌면 프론트엔드 개발자들이 가장 귀찮아(?)하면서도 피할 수 없는 숙명, 바로 표(Table) 스타일링에 대해 배워볼 거예요. 솔직히 표 디자인이 세상에서 제일 화려하고 재밌는 작업은 아니지만, 데이터를 깔끔하게 보여주기 위해 실무에서는 정말 엄청나게 많이 쓰인답니다.
공식 문서의 내용을 꼼꼼하게 번역하면서, 제가 현업에서 표를 다루며 겪었던 팁과 노하우들을 아낌없이 팍팍! 얹어드릴게요. 자, 지루한 기본 HTML 표를 얼마나 멋지게 바꿀 수 있는지 함께 살펴볼까요?
표 스타일링하기 (Styling tables)
이전 페이지 (Test your skills: Images) | 개요: CSS 스타일링 기초 | 다음 페이지 (Home color scheme search)
HTML 표(table)를 스타일링하는 일이 세상에서 제일 매력적인 직업은 아니겠지만, 우리 모두 언젠가는 해야만 하는 일입니다. 이 글에서는 HTML 표를 보기 좋게 만드는 방법을 설명하고, 표를 꾸밀 때 사용하는 몇 가지 특별한 스타일링 기법들을 콕 집어서 다뤄볼 거예요.
| 사전 준비 지식: | 기본 HTML 문법과 HTML 표 기초, 그리고 CSS 값과 단위, 크기 조절(Sizing)에 대한 지식. |
| 학습 목표: |
|
전형적인 HTML 표 (A typical HTML table)
일단 '전형적인' HTML 표를 하나 살펴보면서 시작하겠습니다. 여기서 전형적이라고는 했지만... 사실 보통 HTML 표 예제들은 신발 사이즈나 날씨, 직원 목록 같은 걸 다루잖아요? 우리는 좀 더 흥미진진하게 영국의 유명한 펑크 밴드들에 대한 표를 만들어보기로 했습니다. 마크업은 다음과 같습니다.
<table>
<caption>
A summary of the UK's most famous punk bands
</caption>
<thead>
<tr>
<th scope="col">Band</th>
<th scope="col">Year formed</th>
<th scope="col">No. of Albums</th>
<th scope="col">Most famous song</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Buzzcocks</th>
<td>1976</td>
<td>9</td>
<td>Ever fallen in love (with someone you shouldn't've)</td>
</tr>
<tr>
<th scope="row">The Clash</th>
<td>1976</td>
<td>6</td>
<td>London Calling</td>
</tr>
<tr>
<th scope="row">The Damned</th>
<td>1976</td>
<td>10</td>
<td>Smash it up</td>
</tr>
<tr>
<th scope="row">Sex Pistols</th>
<td>1975</td>
<td>1</td>
<td>Anarchy in the UK</td>
</tr>
<tr>
<th scope="row">Sham 69</th>
<td>1976</td>
<td>13</td>
<td>If The Kids Are United</td>
</tr>
<tr>
<th scope="row">Siouxsie and the Banshees</th>
<td>1976</td>
<td>11</td>
<td>Hong Kong Garden</td>
</tr>
<tr>
<th scope="row">Stiff Little Fingers</th>
<td>1977</td>
<td>10</td>
<td>Suspect Device</td>
</tr>
<tr>
<th scope="row">The Stranglers</th>
<td>1974</td>
<td>17</td>
<td>No More Heroes</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Total albums</th>
<td colspan="2">77</td>
</tr>
</tfoot>
</table>이 표는 마크업이 아주 잘 되어 있습니다. scope, <caption>, <thead>, <tbody> 같은 기능들 덕분에 스타일링하기도 쉽고 웹 접근성(accessibility)도 훌륭하죠.
💡 강사의 실무 팁!
<thead>,<tbody>,<tfoot>을 나누는 건 정말 습관을 들이셔야 합니다! 나중에 JavaScript로 표의 데이터 행(row)만 싹 갈아치워야 할 때,<tbody>태그만 콕 집어서 안의 내용을 업데이트하면 되니까 구조적으로 엄청나게 편해집니다.
하지만 불행히도, 브라우저의 기본 스타일만으로는 시각적으로 그리 멋져 보이지 않습니다. 다닥다닥 붙어있고, 읽기도 불편하고, 약간 지루해 보이죠.
우리는 이 문제를 해결하기 위해 CSS를 사용할 겁니다. CSS를 쓰면 표를 여러분이 원하는 어떤 모습으로든 꾸밀 수 있습니다. 예를 들면 이 글에서 보여드릴 꽤 '펑크(punk)'스러운 디자인처럼 말이죠!
다만 이 디자인은 좀 화려하니까, 이 글에서는 웹 타이포그래피: 보기 위한 것이 아니라 읽기 위해 표 디자인하기라는 글에서 제시하는 표 디자인의 모범 사례(best practices)들을 사용해서 훨씬 깔끔하게 마크업 하는 법을 알려드릴게요.
표 스타일링 시작하기 (Getting started with styling our table)
우리의 표 예제를 함께 스타일링해 봅시다.
- 먼저, 위에서 보여드린 샘플 마크업을 복사해서 여러분 컴퓨터의 작업 폴더에 저장하세요. (
index.html같은 이름으로요!) - 다음으로, 같은 폴더 안에
style.css라는 새 파일을 만드세요. - HTML의
<head>안에 다음 코드를 넣어서 CSS를 HTML에 연결하세요.
<link href="style.css" rel="stylesheet" />HTML 파일을 브라우저에서 열어 기본 상태가 어떻게 보이는지 확인해 보세요.
폰트 업데이트하기 (Updating the font)
이건 표 스타일링과 직접적인 관련은 없는 사소한 부분이지만, 펑크 밴드에 대한 표 치고는 브라우저의 기본 폰트가 너무 딱딱해 보여서요. CSS 파일 맨 위에 다음 규칙을 추가해서 시작해 볼까요?
html {
font-family: "Helvetica", "Arial", sans-serif;
}💡 강사의 실무 팁!
사용자 컴퓨터에 있는 폰트(시스템 폰트) 중 깔끔한 산세리프 폰트를 쓰도록 설정하는 전형적인 코드입니다. 웹 폰트(구글 폰트 등)를 로드해서 사용하면 더 예쁘겠지만, 실무에서는 로딩 속도를 위해 이런 기본 시스템 폰트 스택을body나html에 깔아두고 시작하는 경우가 많습니다.
간격 조절하기 (Spacing)
표에 가장 먼저 해야 할 일은 바로 간격(spacing)을 정리하는 것입니다. 브라우저의 기본 표 스타일은 너무 숨막히게 좁거든요! style.css 파일의 아래쪽에 다음 CSS를 추가하세요.
table {
table-layout: fixed;
width: 90%;
margin: 10px auto;
border-collapse: collapse;
}
th,
td {
padding: 0.6em;
}이 코드에서 주목해야 할 가장 중요한 부분들은 다음과 같습니다:
table-layout: fixed: 이 속성은 표에 설정해 두는 것이 일반적으로 아주 좋은 선택입니다. 기본적으로 표의 열(column)은 그 안에 들어있는 콘텐츠의 양에 따라 너비가 지맘대로 늘어났다 줄어들었다 합니다. (이걸auto방식이라고 해요.) 이 방식은 가끔 아주 기괴한 결과를 낳습니다. 하지만table-layout: fixed를 설정하면, 제목 부분의 너비에 맞춰 열 너비를 고정할 수 있고, 그다음에 콘텐츠를 적절히 다룰 수 있어서 표가 훨씬 예측 가능하게 동작합니다.
💡 강사의 찐 실무 팁!
table-layout: fixed;는 정말정말 중요합니다! 만약 표 안의 어떤 셀에 아주 긴 URL 주소나 띄어쓰기 없는 긴 문자열이 들어가면, 표 전체가 화면 밖으로 뚫고 나가버리는 대참사가 일어납니다. 이때table-layout: fixed;를 주고word-break: break-all;을 함께 주면 박스 안에서 글자가 예쁘게 꺾여서 레이아웃이 무너지지 않아요. 꼭 기억하세요!
-
width: 90%와margin: 10px auto: 우리는 고정 레이아웃과 함께 너비를90%로 주고 마진을10px auto로 줬습니다. 이 설정은 표가 화면(뷰포트)의 대부분을 차지하게 하면서, 가로로 중앙에 예쁘게 정렬되게 해 줍니다. -
border-collapse: collapse: 이 값은 표 스타일링을 할 때 표준 모범 사례(standard best practice)입니다. 기본적으로 표 요소들에 테두리(border)를 설정하면, 아래 이미지처럼 테두리들 사이에 약간의 틈(spacing)이 생겨 이중선처럼 보입니다.
이건 별로 예뻐 보이지 않죠. (물론 그런 디자인을 원하실 수도 있겠지만요!) 그런데
border-collapse: collapse;를 설정하면 테두리들이 하나로 딱 합쳐져서 훨씬 더 보기 좋은 한 줄로 변합니다.
padding: 마지막으로<th>와<td>요소에padding을 줘서 데이터가 숨을 쉴 수 있는 공간을 마련했습니다. 덕분에 표가 훨씬 더 읽기 편해졌죠.
저장하고 브라우저를 새로고침해서 최신 결과를 확인해 보세요. 벌써 많이 달라졌죠?
정렬 (Alignment)
다음으로는 셀 안에 들어있는 다양한 종류의 데이터들을 정렬(alignment)하는 작업을 해보겠습니다. 좋은 디자인 원칙에 따르면 텍스트(글자)는 왼쪽으로 정렬하고, 숫자 데이터는 오른쪽으로 정렬하는 것이 좋습니다. 아래의 CSS 코드가 바로 그 역할을 해줄 테니 CSS 파일 밑에 추가해 주세요.
tr :nth-child(2),
tr :nth-child(3) {
text-align: right;
width: 15%;
}
tr :nth-child(1),
tr :nth-child(4) {
text-align: left;
width: 35%;
}
tfoot tr :nth-child(1) {
text-align: right;
}
tfoot tr :nth-child(2) {
text-align: left;
}여기서 우리는 :nth-child 가상 클래스(pseudo-class)를 사용했습니다. 아주 유용한 선택자인데요, 부모 요소 안에서 특정 순서(번호)에 있는 자식 요소를 선택할 수 있게 해 줍니다. 위 코드에서는 <tr> 요소 안에 있는 특정한 <td>나 <th> 요소들을 순서대로 골라내는 데 사용했습니다.
또한, 우리는 표의 열 너비(width)도 구체적으로 지정했습니다. 글자가 많이 들어가는 열(1번, 4번)에는 넓은 공간(35%)을 주고, 숫자가 들어가는 열(2번, 3번)에는 좁은 공간(15%)을 주었습니다. 이것도 아주 좋은 아이디어예요. 내용물이 많은 열은 한 줄에 최대한 많은 내용을 표시할 수 있게 넉넉한 공간이 필요하니까요. 반면 짧은 데이터가 들어간 열에 너무 넓은 공간을 주면 공간 속에서 데이터가 미아처럼 붕 떠 보여서 오히려 읽기 힘들어집니다.
💡 강사의 실무 팁!
"숫자는 무조건 오른쪽 정렬"이라는 룰은 가독성에 엄청난 영향을 미칩니다. 금액이나 연도 같은 숫자가 여러 줄 있을 때 오른쪽 정렬이 되어 있으면 자릿수 비교하기가 훨씬 쉬워지거든요. 회계 대시보드 같은 걸 만들 때 이 원칙을 지키면 기획자나 클라이언트가 아주 좋아합니다!
그리고 데이터가 셀 한가운데가 아니라 위쪽(top)에 맞춰 정렬되도록 하는 것도 중요합니다. 이를 위해 vertical-align 속성을 사용할 수 있습니다. 기존에 작성하셨던 th, td 규칙을 찾아서 다음과 같이 업데이트해 보세요.
th,
td {
vertical-align: top;
padding: 0.3em;
}💡 강사의 실무 팁!
표는 기본적으로vertical-align: middle처럼 작동해서 셀 내용이 수직 중앙에 맞춰집니다. 내용이 짧으면 상관없지만, 4번 열(가장 유명한 곡)처럼 글이 길어서 줄바꿈이 일어나는 셀이 있으면 다른 칸의 텍스트들이 애매하게 중간에 떠 있게 됩니다. 그래서vertical-align: top으로 맞춰주면 시선이 자연스럽게 위에서부터 아래로 흐르기 때문에 가독성이 확 좋아져요.
다시 한번 저장하고 새로고침해서 변경 사항을 확인해 보세요.
테두리 추가하기 (Adding borders)
이제 표가 훨씬 좋아 보이지만, 표의 <caption>, 데이터가 들어간 본문, 그리고 하단의 합계 행(tfoot) 사이를 시각적으로 분리해 주기 위해 테두리(borders)를 추가해야 합니다. CSS 파일에 다음 규칙을 추가하세요.
tfoot {
border-top: 1px solid #999999;
}그다음, 기존에 있던 table 규칙도 찾아서 다음과 같이 수정해 주세요. 위아래로 선을 그어주는 겁니다.
table {
table-layout: fixed;
width: 90%;
margin: 10px auto;
border-collapse: collapse;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}저장하고 새로고침해 보세요. 이제 정말 표가 읽기 좋고 깔끔해지기 시작했을 겁니다!
얼룩말 무늬 넣기 (Zebra striping)
표 데이터의 각 행(row)을 번갈아 가며 다른 색상으로 칠하는 얼룩말 무늬(Zebra striping)를 구현하는 방법은 따로 섹션을 빼서 보여드리고 싶었어요. 행마다 색을 다르게 주면 눈이 행을 따라가기가 훨씬 쉬워져서 데이터 분석이 편해지거든요. style.css 파일의 맨 밑에 다음 CSS를 추가해 보세요.
tbody tr:nth-child(odd) {
background-color: #eeeeee;
}아까 위에서 ::nth-child 선택자를 사용해 특정 번째의 자식을 선택했었죠? 이 선택자의 괄호 안에는 특정한 공식(formula)을 넣을 수도 있습니다. 그래서 요소들의 '패턴'을 선택할 수 있죠.
예를 들어 2n+1이라는 공식을 넣으면 홀수 번째 자식(1, 3, 5...)을 모두 선택하고, 2n을 넣으면 짝수 번째 자식(2, 4, 6...)을 모두 선택하게 됩니다.
하지만 우리는 이 공식들을 외울 필요 없이, CSS가 친절하게 제공해 주는 odd(홀수, 2n+1과 동일)와 even(짝수, 2n과 동일)이라는 키워드를 사용할 수 있습니다!
💡 강사의 실무 팁!
표의 행(Row)이 5개가 넘어가면 사용자의 시선이 표를 읽다가 "이게 어느 행 데이터였지?" 하고 길을 잃기 십상입니다. 이때 Zebra striping을 연한 회색(f8f9fa같은 색상)으로 칠해주면 시각적 가이드라인 역할을 해서 UX(사용자 경험)가 폭발적으로 상승합니다. 요즘 나오는 웬만한 관리자 페이지(Admin) 테이블에는 다 들어가는 필수 스킬이에요.
캡션 꾸미기 (Styling the caption)
이제 우리 표에 할 일은 딱 하나 남았습니다. 바로 캡션(caption)을 스타일링하는 것이죠! CSS 파일 맨 밑에 다음 코드를 추가해 주세요.
caption {
padding: 1em;
font-style: italic;
caption-side: bottom;
letter-spacing: 1px;
}여기서 다른 부분들은 평범한 텍스트 스타일링이지만, 딱 하나 눈여겨볼 속성이 있습니다. 바로 caption-side 속성이죠. 이 값을 bottom으로 설정하면, HTML 구조상 제일 위에 있던 캡션 텍스트가 시각적으로는 표의 맨 아랫부분에 위치하게 됩니다.
💡 강사의 실무 팁!
<caption>태그는 웹 접근성을 지키기 위해 무조건 작성하는 것이 좋습니다. 스크린 리더(화면 낭독기)를 사용하는 시각 장애인 분들에게 "이 표가 무엇에 대한 표인지"를 설명해 주는 중요한 역할을 하거든요. 하지만 디자인상 제목이 표 위에 보이면 안 될 때가 있어요. 그럴 때 HTML 구조에서는<table>직후에 남겨두되, CSS로 안 보이게 숨기거나 이렇게caption-side: bottom으로 위치를 옮기는 기법을 자주 씁니다.
완성된 표 (Finished table)
자, 이제 모든 과정을 거친 여러분의 완성된 표 디자인은 이렇게 생겼을 겁니다!
html {
font-family: "Helvetica", "Arial", sans-serif;
}
table {
table-layout: fixed;
width: 90%;
margin: 10px auto;
border-collapse: collapse;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}
th,
td {
vertical-align: top;
padding: 0.6em;
}
tr :nth-child(2),
tr :nth-child(3) {
text-align: right;
width: 15%;
}
tr :nth-child(1),
tr :nth-child(4) {
text-align: left;
width: 35%;
}
tfoot tr :nth-child(1) {
text-align: right;
}
tfoot tr :nth-child(2) {
text-align: left;
}
tfoot {
border-top: 1px solid #999999;
}
tbody tr:nth-child(odd) {
background-color: #eeeeee;
}
caption {
padding: 1em;
font-style: italic;
caption-side: bottom;
letter-spacing: 1px;
}표 스타일링 핵심 요약 팁 (Table styling quick tips)
다음 주제로 넘어가기 전에, 위에서 설명한 내용 중 가장 유용한 핵심 포인트들을 짧은 리스트로 요약해 드릴게요. 이것만 기억해도 표 디자인의 절반은 먹고 들어갑니다!
- 표의 HTML 마크업은 최대한 단순하게 유지하고, 유연하게 만드세요.
table-layout: fixed를 사용하여 예측하기 쉬운 레이아웃을 만드세요. 그러면 제목인<th>에width를 설정하는 것만으로 전체 열의 너비를 쉽게 조절할 수 있습니다.border-collapse: collapse를 사용하여 셀 테두리들이 하나의 선으로 합쳐지게 만드세요. 훨씬 깔끔하고 제어하기 쉬워집니다.<thead>,<tbody>,<tfoot>을 적극 활용해서 표를 논리적인 덩어리로 쪼개세요. 이렇게 하면 CSS를 적용할 수 있는 추가적인 선택자 기준점이 생겨서, 스타일을 겹겹이 쌓아올리기가 훨씬 쉬워집니다.- 얼룩말 무늬(Zebra striping)를 사용해서 번갈아 나오는 행들을 구분하고, 읽기 편하게 만드세요.
text-align속성을 이용해<th>와<td>의 텍스트 줄을 맞추세요. 데이터가 훨씬 단정해지고 이해하기 쉬워집니다.
요약 (Summary)
자, 이제 표 스타일링 정복도 끝났으니 다음 과제로 넘어갈 차례네요! 다음 글에서는 CSS 디버깅(Debugging CSS)에 대해 알아볼 예정입니다. 레이아웃이 내 마음대로 나오지 않거나, CSS 속성을 줬는데 적용되지 않을 때 어떻게 이 문제들을 해결해야 하는지를 배울 거예요. 브라우저 개발자 도구(DevTools)를 활용해 해결책을 찾는 방법도 포함해서 말이죠.
그럼 다음 수업에서 뵙겠습니다!
이전 페이지 (Test your skills: Images) | 개요: CSS 스타일링 기초 | 다음 페이지 (Home color scheme search)
MDN 개선에 참여하기 (Help improve MDN)
이 페이지가 도움이 되셨나요?
[ 네 ][ 아니요 ]
이 페이지는 2025년 10월 14일에 마지막으로 수정되었습니다. 작성자: MDN contributors
