부트스트랩(Bootstrap)에서 table-striped 클래스를 사용하면 테이블의 행에 얼룩말 무늬처럼 배경색이 번갈아 적용됩니다. 별도의 CSS 작성 없이 클래스 하나만 추가하면 되기 때문에 데이터가 많은 테이블의 가독성을 높이는 데 매우 유용합니다.
table-striped 클래스 적용 방법
<table> 태그에 기본 스타일을 위한 table 클래스와 함께 table-striped 클래스를 추가하면 됩니다. 아래 예제 코드를 실행하면 결과를 직접 확인할 수 있습니다.
예제 코드
<!DOCTYPE html> <html> <head> <title>Bootstrap Table</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </head> <body> <table class="table table-striped"> <caption>Footballer Rank</caption> <thead> <tr> <th>Footballer</th> <th>Rank</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>Messi</td> <td>1</td> <td>Argentina</td> </tr> <tr> <td>Ronaldo</td> <td>2</td> <td>Portugal</td> </tr> <tr> <td>Neymar</td> <td>3</td> <td>Brazil</td> </tr> </tbody> </table> </body> </html>
주요 포인트 정리
- table 클래스와 함께 사용:
table-striped는 단독으로 사용하지 않고 반드시table클래스와 조합해야 합니다. - tbody 행에 적용: 줄무늬 효과는
<thead>가 아닌<tbody>내부의 행에 적용되므로, 실제 데이터 행은 반드시<tbody>안에 작성해야 합니다. - 다크 테이블과의 조합: Bootstrap 4에서는
table-dark클래스를 함께 추가하면 어두운 배경의 줄무늬 테이블도 손쉽게 만들 수 있습니다. - 반응형 지원:
table-responsive클래스를 부모 요소에 감싸면 모바일 화면에서도 테이블이 깨지지 않고 스크롤로 표시됩니다.
이처럼 table-striped 클래스 하나만으로도 시각적으로 깔끔하고 읽기 쉬운 테이블을 빠르게 구현할 수 있습니다. 프로젝트 성격에 맞게 다른 부트스트랩 테이블 유틸리티 클래스들과 조합해 활용해 보세요.