แสดงตาราง
| ชื่อจริง | นามสกุล | จุด |
|---|
| จิลล์ | ช่างเหล็ก | 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">
ลองตัวเอง» ถ้าคุณต้องการที่เฉพาะเจาะจงสีโฉบเพิ่มใด ๆ ของ W3-hover เรียนแต่ละ <tr> องค์ประกอบ:
| ชื่อจริง | นามสกุล | จุด |
|---|
| จิลล์ | ช่างเหล็ก | 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">
ลองตัวเอง»
ตาราง XLarge
| ชื่อจริง | นามสกุล | จุด |
|---|
| จิลล์ | ช่างเหล็ก | 50 |
| วันก่อนวันหยุด | แจ็คสัน | 94 |
| อาดัม | จอห์นสัน | 67 |
ตัวอย่าง
<table class="w3-table w3-bordered w3-striped w3-xlarge">
ลองตัวเอง»
ตาราง XXLarge
| ชื่อ | จุด |
|---|
| จิลล์สมิ ธ | 50 |
| อีฟแจ็คสัน | 94 |
| อดัมจอห์นสัน | 67 |
| บ่อ Nilson | 35 |
ตัวอย่าง
<table class="w3-table w3-bordered w3-striped w3-xxlarge">
ลองตัวเอง»
ตาราง XXXLarge
| ชื่อ | จุด |
|---|
| ช่างเหล็ก | 50 |
| แจ็คสัน | 94 |
| จอห์นสัน | 67 |
| Nilson | 35 |
ตัวอย่าง
<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
ลองตัวเอง»
ตารางที่จัมโบ้
| ชื่อ | จุด |
|---|
| ช่างเหล็ก | 50 |
| แจ็คสัน | 94 |
| จอห์นสัน | 67 |
| Nilson | 35 |
ตัวอย่าง
<table class="w3-table w3-bordered w3-striped w3-jumbo">
ลองตัวเอง»