테이블 표시
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
악 | 닐슨 | (50) |
마이크 | 로스 | (35) |
기본 표
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (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>
»그에게 자신을보십시오
경계 표
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
스트라이프 표
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
경계가 스트라이프 표
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
예
<table class="w3-table w3-bordered w3-striped">
»그에게 자신을보십시오
스트라이프 테이블 주위에 테두리
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
예
<table class="w3-table w3-bordered w3-striped w3-border">
»그에게 자신을보십시오
줄무늬를 뒤집기
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
줄무늬를 반전하려면 그냥 테이블 헤더 주위에 <THEAD> 추가 :
예
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
»그에게 자신을보십시오
컬러의 제목과 표
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
예
<thead>
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
</thead>
»그에게 자신을보십시오
표 색상
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
Hoverable 표
W3-hoverable 클래스는 마우스 오버에 회색 배경 색상을 추가합니다 :
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
예
<table class="w3-table w3-bordered w3-striped w3-border
w3-hoverable">
»그에게 자신을보십시오 특정 호버 색상을 원하는 경우, 각 <TR> 요소에 W3-호버 - 클래스 중 하나를 추가합니다 :
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
카드로 표
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
예
<table class="w3-table w3-bordered w3-striped w3-card-4">
»그에게 자신을보십시오
응답 표
화면이 전체 내용을 표시하기에 너무 작은 경우 응답 테이블은 가로 스크롤 막대를 표시합니다.
효과를 볼 수있는 화면 크기를 조정하려고합니다.
이름 | 성 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 |
---|
처녀 | 스미스 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
이브 | 잭슨 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
아담 | 존슨 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
예
<div class="w3-responsive">
<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>
</div>
»그에게 자신을보십시오
작은 테이블
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
예
<table class="w3-table w3-bordered w3-striped w3-tiny">
»그에게 자신을보십시오
작은 테이블
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
예
<table class="w3-table w3-bordered w3-striped w3-small">
»그에게 자신을보십시오
큰 표
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
예
<table class="w3-table w3-bordered w3-striped w3-large">
»그에게 자신을보십시오
아주 크게 표
이름 | 성 | 전철기 |
---|
처녀 | 스미스 | (50) |
이브 | 잭슨 | (94) |
아담 | 존슨 | 67 |
예
<table class="w3-table w3-bordered w3-striped w3-xlarge">
»그에게 자신을보십시오
XXLarge 표
이름 | 전철기 |
---|
질 스미스 | (50) |
이브 잭슨 | (94) |
아담 존슨 | 67 |
보 닐슨 | (35) |
예
<table class="w3-table w3-bordered w3-striped w3-xxlarge">
»그에게 자신을보십시오
XXXLarge 표
이름 | 전철기 |
---|
스미스 | (50) |
잭슨 | (94) |
존슨 | 67 |
닐슨 | (35) |
예
<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
»그에게 자신을보십시오
점보 표
이름 | 전철기 |
---|
스미스 | (50) |
잭슨 | (94) |
존슨 | 67 |
닐슨 | (35) |
예
<table class="w3-table w3-bordered w3-striped w3-jumbo">
»그에게 자신을보십시오