최신 웹 개발 튜토리얼
 

W3.CSS테이블

❮ 이전 다음 장 ❯

테이블 표시

이름 성 전철기
처녀 스미스 (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

예

<table class="w3-table w3-border">
»그에게 자신을보십시오

스트라이프 표

이름 성 전철기
처녀 스미스 (50)
이브 잭슨 (94)
아담 존슨 67

예

<table class="w3-table w3-striped">
»그에게 자신을보십시오

경계가 스트라이프 표

이름 성 전철기
처녀 스미스 (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

예

<table class="w3-table w3-blue">
»그에게 자신을보십시오

Hoverable 표

W3-hoverable 클래스는 마우스 오버에 회색 배경 색상을 추가합니다 :

이름 성 전철기
처녀 스미스 (50)
이브 잭슨 (94)
아담 존슨 67

예

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
»그에게 자신을보십시오

특정 호버 색상을 원하는 경우, 각 <TR> 요소에 W3-호버 - 클래스 중 하나를 추가합니다 :

이름 성 전철기
처녀 스미스 (50)
이브 잭슨 (94)
아담 존슨 67

예

<tr class="w3-hover-green">
»그에게 자신을보십시오

카드로 표

이름 성 전철기
처녀 스미스 (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">
»그에게 자신을보십시오

❮ 이전 다음 장 ❯