w3.css
테이블
| First Name | Last Name | Points |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
| 악 | 닐슨 | 50 |
| 마이크 | 로스 | 35 |
W3.CSS 테이블 클래스
W3.CSS는 테이블에 대해 다음 클래스를 제공한다.
| Class | Defines |
|---|---|
| w3-table | HTML 테이블용 컨테이너 |
| w3-striped | 줄무늬 테이블 |
| w3-border | 테두리가 있는 테이블 |
| w3-bordered | 경계선 |
| w3-centered | 가운데 정렬된 표 내용 |
| w3-hoverable | 호버링 가능한 테이블 |
| w3-table-all | 모든 속성이 설정됨 |
기본 테이블
w3-table 클래스는 기본 테이블을 표시하는 데 사용된다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> </table>
줄무늬 테이블
w3-striped 클래스는 테이블에 얼룩말 줄무늬를 추가하는 데 사용된다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 스미스 | 50 | |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table w3-striped">
경계가 있는 테이블
w3-bordered 클래스는 각 테이블 행에 아래쪽 테두리를 추가한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table w3-bordered">
줄무늬 테두리가 있는 테이블
w3-striped 클래스와 w3-bordered 클래스를 결합하여 줄무늬 테두리가 있는 테이블을 만든다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table w3-striped w3-bordered">
테이블 주위의 테두리
w3-border 클래스는 테이블 주위에 테두리를 표시하는 데 사용된다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table w3-striped w3-border">
⭐ w3-border 클래스는 테이블에만 적용되는 것이 아니다. 모든 HTML 요소에 사용할 수 있다.
모든 것을 표시
w3-table-all 클래스는 위의 모든 클래스를 결합한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table-all">
줄무늬 뒤집기
줄무늬를 뒤집으려면(연한 회색으로 시작) 테이블 헤더 행 주위에 <thead> 요소를 추가하자.
또한 테이블 헤더 행에 사용할 색상을 정의해야 한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
| 악 | 닐슨 | 35 |
예제
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
모든 콘텐츠를 중앙에 배치
w3-centered 클래스는 테이블 내용을 중앙에 배치한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table-all w3-centered">
한 열 중앙 정렬
w3-center 클래스는 열의 내용을 중앙에 배치한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table-all"> <tr> <th>First Name</th> <th>Last Name</th> <th class="w3-center">Points</th> </tr>
한 열 오른쪽 정렬
w3-right-align 클래스는 열의 내용을 오른쪽으로 정렬한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table-all"> <tr> <th>First Name</th> <th>Last Name</th> <th class="w3-right-align">Points</th> </tr>
호버링 테이블
w3-hoverable 클래스는 마우스 오버 시 회색 배경색을 추가한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table-all w3-hoverable">
호버 색상
특정 호버 색상을 원하는 경우 각
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<tr class="w3-hover-green">
W3.CSS 클래스 결합
많은 W3.CSS 클래스는 모든 HTML 요소에 사용될 수 있다.
예: 테두리 클래스, 색상 클래스, 글꼴 클래스, 카드 클래스 등.
컬러 테이블 헤더
색상 행을 표시하려면 w3-color 클래스 중 하나를 사용한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<tr class="w3-red"> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr>
컬러 테이블
색상이 지정된 테이블을 표시하려면 w3-color 클래스 중 하나를 사용한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table w3-blue">
반응 테이블
w3-responsive 클래스는 반응형 테이블을 생성한다.
그러면 테이블이 작은 화면에서 가로로 스크롤된다.
큰 화면으로 볼 때는 별 차이가 없다.
아래 표에서 효과를 보려면 화면 크기를 조정하자.
| 이름 | 성 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 질 | 스미스 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| 이브 | 잭슨 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| 아담 | 존슨 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
예제
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
카드로서의 테이블
테이블을 카드로 표시하려면 w3-card 클래스를 사용한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table-all w3-card-4">
작은 테이블
작은 테이블을 표시하려면 w3-tiny 클래스를 사용한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table-all w3-tiny">
작은 테이블
작은 테이블을 표시하려면 w3-small 클래스를 사용한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table-all w3-small">
대형 테이블
큰 테이블을 표시하려면 w3-large 클래스를 사용한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table-all w3-large">
초대형 테이블
w3-xlarge 클래스를 사용하여 xlarge 테이블을 표시한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table-all w3-xlarge">
XX대형 테이블
xxlarge 테이블을 표시하려면 w3-xxlarge 클래스를 사용한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table-all w3-xxlarge">
XXX대형 테이블
xxxlarge 테이블을 표시하려면 w3-xxxlarge 클래스를 사용한다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 질 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예제
<table class="w3-table-all w3-xxxlarge">
점보 테이블
점보 대형 테이블을 표시하려면 w3-jumbo 클래스를 사용한다.
| 이름 | 성 |
|---|---|
| 질 | 스미스 |
| 이브 | 잭슨 |
| 아담 | 존슨 |
예제
<table class="w3-table-all w3-jumbo">
참고
