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>[email protected]</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>[email protected]</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>[email protected]</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>[email protected]</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>[email protected]</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>[email protected]</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>[email protected]</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>[email protected]</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>[email protected]</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>[email protected]</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>[email protected]</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>[email protected]</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>[email protected]</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>[email protected]</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>[email protected]</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>[email protected]</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>[email protected]</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>[email protected]</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>[email protected]</td>
</tr>
<tr>
<td>มัสยา</td>
<td>รุ่งเรือง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ปาริฉัตร</td>
<td>แสงรวี</td>
<td>[email protected]</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 |