ตาราง W3.CSS
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
| โบ | Nilsson | 50 |
| ไมค์ | รอสส์ | 35 |
คลาสตาราง W3.CSS
W3.CSS มีคลาสต่อไปนี้สำหรับตาราง:
| ระดับ | กำหนด |
|---|---|
| w3-table | คอนเทนเนอร์สำหรับตาราง HTML |
| w3-ลาย | โต๊ะลาย |
| w3-border | ขอบโต๊ะ |
| w3-bordered | เส้นแบ่งเขต |
| w3-centered | เนื้อหาตารางตรงกลาง |
| w3-โฮเวอร์ได้ | ตารางโฮเวอร์ได้ |
| w3-table-ทั้งหมด | คุณสมบัติทั้งหมด set |
ตารางพื้นฐาน
คลาสw3-tableใช้เพื่อแสดงตารางพื้นฐาน:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 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ใช้เพื่อเพิ่มลายทางม้าลายลงในตาราง:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table w3-striped">
โต๊ะมีขอบ
คลาสw3-borderedเพิ่มเส้นขอบด้านล่างให้กับแต่ละแถวของตาราง:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table w3-bordered">
ตารางขอบลาย
รวม คลาส w3-stripedและคลาสw3-borderedเพื่อสร้างตารางที่มีขอบลาย:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table w3-striped w3-bordered">
ชายแดนรอบโต๊ะ
คลาสw3-borderใช้เพื่อแสดงเส้นขอบรอบตาราง:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table w3-striped w3-border">
เคล็ดลับ:คลาสw3-borderไม่ได้มีไว้สำหรับตารางเท่านั้น สามารถใช้กับองค์ประกอบ HTML ใดก็ได้!
กำลังแสดงทั้งหมด
คลาสw3-table-allรวมคลาสทั้งหมดข้างต้น:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table-all">
พลิกลาย
หากต้องการพลิกแถบ (เริ่มต้นด้วยสีเทาอ่อน) ให้เพิ่มองค์ประกอบ <thead> รอบแถวส่วนหัวของตาราง คุณต้องกำหนดสีที่จะใช้สำหรับแถวส่วนหัวของตารางด้วย:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
| โบ | นิลสัน | 35 |
ตัวอย่าง
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
จัดศูนย์กลางเนื้อหาทั้งหมด
คลาส ที่เน้น w3 เป็นศูนย์กลางเนื้อหาของตาราง:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table-all w3-centered">
จัดกึ่งกลางหนึ่งคอลัมน์
คลาสw3-centerเน้นเนื้อหาของคอลัมน์:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 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 right จัดเนื้อหาของคอลัมน์:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 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เพิ่มสีพื้นหลังสีเทาเมื่อวางเมาส์:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table-all
w3-hoverable">
โฮเวอร์สี
หากคุณต้องการสีโฮเวอร์เฉพาะ ให้เพิ่ม คลาส สี w3-hover-ให้กับแต่ละองค์ประกอบ <tr>:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<tr class="w3-hover-green">
การรวมคลาส W3.CSS
คลาส W3.CSS จำนวนมากสามารถใช้ได้กับองค์ประกอบ HTML ทั้งหมด
ตัวอย่างเช่น: คลาสเส้นขอบ คลาสสี คลาสฟอนต์ คลาสการ์ด และอื่น ๆ
หัวตารางสี
ใช้ คลาส สี w3- ใดๆ เพื่อแสดงแถวสี:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
โต๊ะสี
ใช้ คลาส สี w3-เพื่อแสดงตารางสี:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table w3-blue">
ตารางตอบสนอง
คลาสw3-responsiveสร้างตารางตอบสนอง ตารางจะเลื่อนในแนวนอนบนหน้าจอขนาดเล็ก เมื่อดูบนหน้าจอขนาดใหญ่ไม่มีความแตกต่าง
ปรับขนาดหน้าจอเพื่อดูเอฟเฟกต์ในตารางด้านล่าง:
| ชื่อจริง | นามสกุล | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | สมิธ | 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เพื่อแสดงตารางเป็นการ์ด:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table-all w3-card-4">
โต๊ะจิ๋ว
ใช้ คลาส w3-tinyเพื่อแสดงตารางเล็ก ๆ :
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table-all w3-tiny">
โต๊ะเล็ก
ใช้ คลาส w3-smallเพื่อแสดงตารางขนาดเล็ก:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table-all w3-small">
โต๊ะใหญ่
ใช้ คลาส w3-largeเพื่อแสดงตารางขนาดใหญ่:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table-all w3-large">
XLarge ตาราง
ใช้ คลาส w3-xlargeเพื่อแสดงตาราง xlarge:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table-all w3-xlarge">
XXLโต๊ะใหญ่
ใช้ คลาส w3-xxlargeเพื่อแสดงตาราง xxlarge:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 50 |
| อีฟ | แจ็คสัน | 94 |
| อดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table-all w3-xxlarge">
XXXLตารางขนาดใหญ่
ใช้ คลาส w3-xxxlargeเพื่อแสดงตาราง xxxlarge:
| ชื่อจริง | นามสกุล | คะแนน |
|---|---|---|
| Jill | สมิธ | 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">