การตกแต่งตารางขั้นพื้นฐาน
สำหรับการตกแต่งตารางขั้นพื้นฐาน ให้ใช้คลาส .table กำกับแท็ก <table> ดังนี้

<div class="container mt-3"> <h2>ตกแต่งตารางด้วย Boostrap 5</h2> <p>ตกแต่งตารางขั้นพื้นฐานด้วยคลาส .table</p> <table class="table"> <thead> <tr> <th>ชื่อ</th> <th>นามสกุล</th> <th>อีเมล</th> </tr> </thead> <tbody> <tr> <td>วรเทพ</td> <td>วันกาล</td> <td>worathape.wan@gmail.com</td> </tr> <tr> <td>worathape</td> <td>wankan</td> <td>notecyber@notecyber.com</td> </tr> <tr> <td>note</td> <td>cyber</td> <td>krunotecyber@notecyber.com</td> </tr> </tbody> </table> </div>

ผลลัพธ์

Striped Rows แยกสีพื้นหลังแถวคู่แถวคี่
         เราสามารถใช้คลาส .table-striped เพื่อตกแต่งสีพื้นหลังของแถวคู่กับแถวคี่ในตารางให้แตกต่างกัน (zebra-stripes) เพื่อง่ายต่อการดูข้อมูล

<div class="container mt-3"> <h2>ตกแต่งตารางด้วย Boostrap 5</h2> <p>ตกแต่งตารางขั้นพื้นฐานด้วยคลาส .table-striped</p> <table class="table table-striped"> <thead> <tr> <th>ชื่อ</th> <th>นามสกุล</th> <th>อีเมล</th> </tr> </thead> <tbody> <tr> <td>วรเทพ</td> <td>วันกาล</td> <td>worathape.wan@gmail.com</td> </tr> <tr> <td>worathape</td> <td>wankan</td> <td>notecyber@notecyber.com</td> </tr> <tr> <td>note</td> <td>cyber</td> <td>krunotecyber@notecyber.com</td> </tr> </tbody> </table> </div>

 

ผลลัพธ์

Bordered Table กำหนดเส้นขอบตาราง
         ถ้าต้องการให้ตารางมีเส้นขอบ สามารถทำได้โดยใช้คลาส .table-bordered ดังนี้

<div class="container mt-3"> <h2>ตกแต่งตารางด้วย Boostrap 5</h2> <p>กำหนดเส้นขอบตารางด้วยคลาส .table-bordered</p> <table class="table table-bordered"> <thead> <tr> <th>ชื่อ</th> <th>นามสกุล</th> <th>อีเมล</th> </tr> </thead> <tbody> <tr> <td>วรเทพ</td> <td>วันกาล</td> <td>worathape.wan@gmail.com</td> </tr> <tr> <td>worathape</td> <td>wankan</td> <td>notecyber@notecyber.com</td> </tr> <tr> <td>note</td> <td>cyber</td> <td>krunotecyber@notecyber.com</td> </tr> </tbody> </table> </div>

 

ผลลัพธ์

กำหนด Hover Rows ให้ตาราง
         ถ้าต้องการให้ตารางมีเอฟเฟ็กต์ ไฮไลต์แถวที่นำเมาส์ไปชี้ สามารถทำได้โดยใช้คลาส .table-hover โดยเมื่อใช้คลาสนี้ จะมีผลทำให้ เมื่อนำเมาไปชี้แถวใด ๆ ในตาราง พื้นหลังของแถวนั้นจะเป็นสีเทา ช่วยทำให้รู้ได้ว่า ตอนนี้เรากำลังโฟกัสที่แถวไหนอยู่ี้

<div class="container mt-3"> <h2>ตกแต่งตารางด้วย Boostrap 5</h2> <p>ไฮไลต์แถวที่ชี้ในตารางด้วยคลาส .table-hover</p> <table class="table table-hover"> <thead> <tr> <th>ชื่อ</th> <th>นามสกุล</th> <th>อีเมล</th> </tr> </thead> <tbody> <tr> <td>วรเทพ</td> <td>วันกาล</td> <td>worathape.wan@gmail.com</td> </tr> <tr> <td>worathape</td> <td>wankan</td> <td>notecyber@notecyber.com</td> </tr> <tr> <td>note</td> <td>cyber</td> <td>krunotecyber@notecyber.com</td> </tr> </tbody> </table> </div>

 

ผลลัพธ์

Borderless Table ตารางไร้เส้นขอบ
         ถ้าต้องการให้ตารางเป็นตารางโล่ง ๆ ไม่มีเส้นขอบ ไม่มีเส้นกั้น และดูไม่เหมือนตาราง แต่ก็อยู่ในรูปแบบของตาราง สามารถใช้คลาส .table-borderless มาตกแต่งได้

<div class="container mt-3"> <h2>ตกแต่งตารางด้วย Boostrap 5</h2> <p>ลบเส้นขอบและเส้นกั้นในตาราง ด้วยคลาส .table-borderless</p> <table class="table table-borderless"> <thead> <tr> <th>ชื่อ</th> <th>นามสกุล</th> <th>อีเมล</th> </tr> </thead> <tbody> <tr> <td>วรเทพ</td> <td>วันกาล</td> <td>worathape.wan@gmail.com</td> </tr> <tr> <td>worathape</td> <td>wankan</td> <td>notecyber@notecyber.com</td> </tr> <tr> <td>note</td> <td>cyber</td> <td>krunotecyber@notecyber.com</td> </tr> </tbody> </table> </div>

 

ผลลัพธ์

Borderless Table ตารางไร้เส้นขอบ
         ถ้าต้องการให้ตารางเป็นตารางโล่ง ๆ ไม่มีเส้นขอบ ไม่มีเส้นกั้น และดูไม่เหมือนตาราง แต่ก็อยู่ในรูปแบบของตาราง สามารถใช้คลาส .table-borderless มาตกแต่งได้

<div class="container mt-3"> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Default</td> <td>Defaultson</td> <td>def@somemail.com</td> </tr> <tr class="table-primary"> <td>Primary</td> <td>Joe</td> <td>joe@example.com</td> </tr> <tr class="table-success"> <td>Success</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr class="table-danger"> <td>Danger</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr class="table-info"> <td>Info</td> <td>Dooley</td> <td>july@example.com</td> </tr> <tr class="table-warning"> <td>Warning</td> <td>Refs</td> <td>bo@example.com</td> </tr> <tr class="table-active"> <td>Active</td> <td>Activeson</td> <td>act@example.com</td> </tr> <tr class="table-secondary"> <td>Secondary</td> <td>Secondson</td> <td>sec@example.com</td> </tr> <tr class="table-light"> <td>Light</td> <td>Angie</td> <td>angie@example.com</td> </tr> <tr class="table-dark"> <td>Dark</td> <td>Bo</td> <td>bo@example.com</td> </tr> </tbody> </table> </div>

 

ผลลัพธ์