W3.CSS 테이블
| 이름 | 성 | 포인트들 |
|---|---|---|
| 처녀 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
| 악 | 닐슨 | 50 |
| 마이크 | 로스 | 35 |
W3.CSS 테이블 클래스
W3.CSS는 테이블에 대해 다음 클래스를 제공합니다.
| 등급 | 정의 |
|---|---|
| w3-테이블 | HTML 테이블용 컨테이너 |
| w3-스트라이프 | 스트라이프 테이블 |
| w3-테두리 | 테두리가 있는 테이블 |
| w3 경계 | 경계선 |
| w3 중심 | 중앙 테이블 콘텐츠 |
| 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 중심 클래스는 테이블의 내용을 중앙 에 배치합니다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 처녀 | 스미스 | 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">
호버 색상
특정 호버 색상을 원하면 각 <tr> 요소 에 w3- hover- color 클래스를 추가하십시오.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 처녀 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예시
<tr class="w3-hover-green">
W3.CSS 클래스 결합
많은 W3.CSS 클래스를 모든 HTML 요소에서 사용할 수 있습니다.
예: 테두리 클래스, 색상 클래스, 글꼴 클래스, 카드 클래스 등.
컬러 테이블 헤더
w3 색상 클래스를 사용 하여 색상 행을 표시합니다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 처녀 | 스미스 | 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">
XL큰 테이블
w3-xlarge 클래스를 사용 하여 xlarge 테이블을 표시합니다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 처녀 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예시
<table class="w3-table-all w3-xlarge">
XX대형 테이블
w3-xxlarge 클래스를 사용 하여 xxlarge 테이블을 표시합니다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 처녀 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예시
<table class="w3-table-all w3-xxlarge">
XXX큰 테이블
w3-xxxlarge 클래스를 사용 하여 xxxlarge 테이블을 표시합니다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 처녀 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
예시
<table class="w3-table-all w3-xxxlarge">
점보 테이블
Use the w3-jumbo class to display a jumbo large table:
| First Name | Last Name |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
Example
<table class="w3-table-all w3-jumbo">