การสร้างตารางด้วย Bootstrap 4
Bootstrap 4 มีคลาสให้เราเลือกใช้สำหรับการสร้างตารางสวย ๆ หลายรูปแบบด้วยกัน
Basic Table ตารางขั้นพื้นฐาน
ถ้าต้องการสร้างตารางแบบเบสิค สามารถใช้คลาส .table ในการสร้างตารางได้เลย
<div class="container">
<table class="table">
<thead>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อีเมล</th>
</tr>
</thead>
<tbody>
<tr>
<td>สุวรรณี</td>
<td>มีใจ</td>
<td>suwannee@example.com</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>massaya@example.com</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>parichat@example.com</td>
</tr>
</tbody>
</table>
</div>- บรรทัดที่ 2 กำหนดคลาส
.tableให้กับเอลิเมนต์<table>
ตารางที่ได้จะเป็นตารางที่มีเส้นกั้นในแนวนอน
Striped Rows ตารางที่แถวคี่กับแถวคู่มีสีต่างกัน
คลาส .table-striped จะทำให้เราได้ตารางที่แถวเลขคี่กับแถวเลขคู่มีสีไม่เหมือนกัน สีของแถวในตารางจะคล้าย ๆ ม้าลาย (zebra-stripes)
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อีเมล</th>
</tr>
</thead>
<tbody>
<tr>
<td>สุวรรณี</td>
<td>มีใจ</td>
<td>suwannee@example.com</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>massaya@example.com</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>parichat@example.com</td>
</tr>
</tbody>
</table>
</div>- บรรทัดที่ 2 เพิ่มคลาส
tableและtable-stripedให้เอลิเมนต์<table>
ตารางที่ได้ แถวเลขคี่แกับแถวเลขคู่จะมีสีพื้นหลังไม่เหมือนกัน
Bordered Table ตารางที่มีเส้นขอบ
คลาส .table-bordered จะทำให้เราได้ตารางที่มีเส้นขอบทุกด้าน
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อีเมล</th>
</tr>
</thead>
<tbody>
<tr>
<td>สุวรรณี</td>
<td>มีใจ</td>
<td>suwannee@example.com</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>massaya@example.com</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>parichat@example.com</td>
</tr>
</tbody>
</table>
</div>- บรรทัดที่ 2 เพิ่มคลาส
tableและtable-borderedให้เอลิเมนต์<table>
ตารางที่ได้จะมีเส้นขอบทุกด้าน
Hover Rows ทำให้แถวที่เมาส์ชี้มีสีเปลี่ยนไป
ถ้าต้องการให้สีพื้นหลังของแถวในตารางที่เมาส์ชี้อยู่มีสีเปลี่ยนไป ให้ใช้คลาส .table-hover
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อีเมล</th>
</tr>
</thead>
<tbody>
<tr>
<td>สุวรรณี</td>
<td>มีใจ</td>
<td>suwannee@example.com</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>massaya@example.com</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>parichat@example.com</td>
</tr>
</tbody>
</table>
</div>- บรรทัดที่ 2 เพิ่มคลาส
tableและtable-hoverให้เอลิเมนต์<table>
เมื่อนำเมาส์ไปชี้ที่แถวใด ๆ ในตาราง สีพื้นหลังของแถวนั้นจะเปลี่ยนเป็นสีเทา
ตารางที่มีพื้นหลังสีดำ
ถ้าต้องการให้ตารางมีพื้นหลังสีดำ ให้ใช้คลาส .table-dark
<div class="container">
<table class="table table-dark">
<thead>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อีเมล</th>
</tr>
</thead>
<tbody>
<tr>
<td>สุวรรณี</td>
<td>มีใจ</td>
<td>suwannee@example.com</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>massaya@example.com</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>parichat@example.com</td>
</tr>
</tbody>
</table>
</div>- บรรทัดที่ 2 เพิ่มคลาส
tableและtable-darkให้เอลิเมนต์<table>
ตารางที่ได้จะมีพื้นหลังมืด
ตารางแบบหลายสไตล์รวมกัน
เราสามารถใช้คลาสต่าง ๆ ดังที่กล่าวมารวมกัน เพื่อให้ได้ผลลัพธ์เป็นตารางที่มีสไตล์หลาย ๆ สไตล์รวมกัน เช่น
เมื่อต้องการตารางพื้นหลังมืดและมีสีพื้นหลังของแถวคี่และคู่ไม่เหมือนกัน ก็ใช้คลาส table-dark และ table-striped ร่วมกัน ดังนี้
<div class="container">
<table class="table table-dark table-striped">
<thead>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อีเมล</th>
</tr>
</thead>
<tbody>
<tr>
<td>สุวรรณี</td>
<td>มีใจ</td>
<td>suwannee@example.com</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>massaya@example.com</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>parichat@example.com</td>
</tr>
</tbody>
</table>
</div>
Borderless Table ตารางที่ไม่มีเส้นขอบ
ถ้าต้องการตารางที่ไม่มีเส้นขอบ ให้ใช้คลาส .table-borderless
<div class="container">
<table class="table table-borderless">
<thead>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อีเมล</th>
</tr>
</thead>
<tbody>
<tr>
<td>สุวรรณี</td>
<td>มีใจ</td>
<td>suwannee@example.com</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>massaya@example.com</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>parichat@example.com</td>
</tr>
</tbody>
</table>
</div>- บรรทัดที่ 2 เพิ่มคลาส
tableและtable-borderlessให้เอลิเมนต์<table>
ตารางที่ได้จะไม่มีเส้นขอบ
Contextual Classes
เราสามารถใช้ Contextual Classes กำหนดสีพื้นหลังให้กับตารางทั้งตาราง แถวทั้งแถว หรือแต่ละคอลัมน์ได้ ซึ่งคลาสที่ใช้ได้มีดังนี้ .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light และ .table-dark
<div class="container">
<table class="table">
<thead>
<tr>
<th>ชื่อคลาส</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>table-primary</td>
</tr>
<tr class="table-success">
<td>table-success</td>
</tr>
<tr class="table-danger">
<td>table-danger</td>
</tr>
<tr class="table-info">
<td>table-info</td>
</tr>
<tr class="table-warning">
<td>table-warning</td>
</tr>
<tr class="table-active">
<td>table-active</td>
</tr>
<tr class="table-secondary">
<td>table-secondary</td>
</tr>
<tr class="table-light">
<td>table-light</td>
</tr>
<tr class="table-dark text-dark">
<td>table-dark</td>
</tr>
</tbody>
</table>
</div>
กำหนดสีพื้นให้หัวตาราง
เราสามารถใช้คลาส .thead-dark เพื่อกำหนดสีดำให้เป็นสีพื้นหลังของหัวตาราง และใช้คลาส .thead-light เพื่อกำหนดสีเทาให้เป็นสีพื้นหลังของหัวตาราง โดยกำหนดคลาสไว้ในเอลิเมนต์ <thead>
<div class="container">
<table class="table">
<thead class="thead-dark">
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อีเมล</th>
</tr>
</thead>
<tbody>
<tr>
<td>สุวรรณี</td>
<td>มีใจ</td>
<td>suwannee@example.com</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>massaya@example.com</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>parichat@example.com</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อีเมล</th>
</tr>
</thead>
<tbody>
<tr>
<td>สุวรรณี</td>
<td>มีใจ</td>
<td>suwannee@example.com</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>massaya@example.com</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>parichat@example.com</td>
</tr>
</tbody>
</table>
</div>- บรรทัดที่ 3 กำหนดคลาส
table-darkไว้ในเอลิเมนต์<thead> - บรรทัดที่ 29 กำหนดคลาส
table-lightไว้ในเอลิเมนต์<thead>
จะได้ตารางที่แถวหัวตารางมีสีพื้นหลังตามที่กำหนด
Small table ตารางขนาดเล็ก
ถ้าต้องการตารางขนาดเล็กกว่าปกติ ให้ใช้คลาส table-sm ซึ่งจะทำให้ได้ตารางขนาดเล็กกว่าปกติ โดยจะตัดระยะห่างระหว่างเซลล์ลงครึ่งหนึ่ง
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อีเมล</th>
</tr>
</thead>
<tbody>
<tr>
<td>สุวรรณี</td>
<td>มีใจ</td>
<td>suwannee@example.com</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>massaya@example.com</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>parichat@example.com</td>
</tr>
</tbody>
</table>
</div>- บรรทัดที่ 2 กำหนดคลาส
tableและtable-smให้กับเอลิเมนต์<table>
ตารางที่ได้จะมีขนาดเล็กกว่าปกติ เพราะถูกตัดระยะห่างระหว่างเซลล์ไปครึ่งหนึ่ง
Responsive Tables ตารางที่เหมาะต่อการแสดงผลบนทุกอุปกรณ์
ถ้าต้องการทำตารางแบบ Responsive ที่เหมาะแก่การแสดงผลบนทุกอุปกรณ์ ให้ใช้คลาส .table-responsive ซึ่งจะทำให้มีสกรอลบาร์แนวนอนปรากฏขึ้นมาเมื่อแสดงผลบนอุปกรณ์ที่มีความกว้างน้อยกว่า 992px โดยให้แทรกคลาสดังกล่าวไว้ในเอลิเมนต์ <div> ซึ่งครอบเอลิเมนต์ <table> อีกที
<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>ลำดับ</th>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อายุ</th>
<th>บ้านเลขที่</th>
<th>บ้าน</th>
<th>ตำบล</th>
<th>อำเภอ</th>
<th>จังหวัด</th>
<th>รหัสไปรษณีย์</th>
<th>เบอร์โทร</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>แอนนา</td>
<td>พิท</td>
<td>35</td>
<td>1021</td>
<td>หนองตาด</td>
<td>ตูมใหญ่</td>
<td>คูเมือง</td>
<td>บุรีรัมย์</td>
<td>31190</td>
<td>044-567890</td>
</tr>
</tbody>
</table>
</div>
</div>- บรรทัดที่ 2 แทรกคลาส
table-responsiveให้เอลิเมนต์<div>ที่อยู่รอบนอกครอบเอลิเมนต์<table>อยู่
เมื่อแสดงผลบนหน้าจอที่มีความกว้างมากกว่าหรือเท่ากับ 992px ตารางจะแสดงผลตามปกติ
แต่เมื่อแสดงผลบนอุปกรณ์ที่มีความกว้างของหน้าจอน้อยกว่า 992px ด้านล่างของตารางจะมีสกรอลบาร์ปรากฏขึ้นมาเพื่อให้เลื่อนดูข้อมูลในตารางได้
อย่างไรก็ตาม เราสามารถกำหนดได้ว่า จะให้ตารางแสดงสกรอลบาร์เมื่อแสดงผลบนหน้าจอขาดเท่าใด โดยใช้คลาสเหล่านี้
| คลาส | ขนาดหน้าจอ |
.table-responsive-sm | < 576px |
.table-responsive-md | < 768px |
.table-responsive-lg | < 992px |
.table-responsive-xl | < 1200px |
![[แพ็คคู่] MizuMi B3 AHA Intense White Body Booster 250 g เซรั่มผิวกาย บำรุงผิวล้ำลึก เสริมชั้นผิวให้ผิวเรียบเนียน](https://th-live-01.slatic.net/p/4ab78d5dab1589b55eb2ddcb340bd0bb.jpg)
![5 รีม Quality Orange 70 แกรม ] กระดาษถ่ายเอกสาร ขนาด A4/500 แผ่น ต่อรีม](https://th-live-01.slatic.net/p/df768cfa623a125811b047b207b99ce2.jpg)
- Bootstrap 4 Get Started
- Bootstrap 4 Container
- Bootstrap 4 Grid Basic
- Bootstrap 4 Typography
- Bootstrap 4 Colors
- Bootstrap 4 Tables
- Bootstrap 4 Images
- Bootstrap 4 Jambotron
- Bootstrap 4 Alerts
- Bootstrap 4 Buttons
- Bootstrap 4 Button Groups
- Bootstrap 4 Badges
- Bootstrap 4 Progress Bars
- Bootstrap 4 Spinners
- Bootstrap 4 Pagination
- Bootstrap 4 List Groups
- Bootstrap 4 Cards
- Bootstrap 4 Dropdowns
- Bootstrap 4 Collapse
- Bootstrap 4 Navs
- Bootstrap 4 Navbars
- Bootstrap 4 Forms
- Bootstrap 4 Toasts
- Bootstrap 4 Scrollspy
- Bootstrap 4 Utilities
- Bootstrap 4 Flex
- Bootstrap 4 Icons
- Bootstrap 4 Media Objects
- Bootstrap 4 Filters
- Bootstrap 4 Grid System
- Bootstrap 4 Grid Stacked to horizontal
- Bootstrap 4 Grid Extra Small
- Bootstrap 4 Grid Small
- Bootstrap 4 Grid Medium
- Bootstrap 4 Grid Large
- Bootstrap 4 Grid Extra Large
- Bootstrap 4 Grid Examples
- Bootstrap 4 Inputs
- Bootstrap 4 Input Groups
- Bootstrap 4 Custom Forms
- Bootstrap 4 Carousel
- Bootstrap 4 Modal
- Bootstrap 4 Tooltip
- Bootstrap 4 Popover