ตาราง 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">