CSS를 활용하면 자바스크립트 없이도 몇 줄의 스타일 코드만으로 얼룩말 줄무늬(zebra-striped) 테이블을 손쉽게 만들 수 있습니다. 핵심은 :nth-child() 선택자입니다.
핵심 원리: nth-child 선택자
tr:nth-child(even)은 테이블에서 짝수 번째 행만 선택해 스타일을 적용합니다. 짝수 행에만 배경색과 글자색을 지정하면 행의 색상이 번갈아 나타나면서 줄무늬 효과가 완성되고, 데이터가 많은 표에서도 각 행을 한눈에 구분할 수 있어 가독성이 크게 향상됩니다. 반대로 홀수 행에 색상을 적용하고 싶다면 even 대신 odd 키워드를 사용하면 됩니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #8b8b8b;
color: white;
}
</style>
</head>
<body>
<h1>얼룩말 줄무늬 테이블 예제</h1>
<table>
<tr>
<th>이름</th>
<th>성</th>
<th>태어난 달</th>
</tr>
<tr>
<td>재키</td>
<td>로이</td>
<td>1월</td>
</tr>
<tr>
<td>스티브</td>
<td>스미스</td>
<td>3월</td>
</tr>
<tr>
<td>브랜든</td>
<td>앤더슨</td>
<td>2월</td>
</tr>
</table>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같이 짝수 번째 행에 회색 배경(#8b8b8b)과 흰색 글자가 적용된 얼룩말 줄무늬 테이블이 완성됩니다.
