
การสร้างตารางด้วย 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 |
- 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