ตกแต่งตารางด้วย Bootstrap 5

ใน Bootstrap 5 มีคลาสสำหรับตกแต่งตารางจำนวนหนึ่ง ซึ่งมีรายละเอียดการใช้งานดังนี้

การตกแต่งตารางขั้นพื้นฐาน

สำหรับการตกแต่งตารางขั้นพื้นฐาน ให้ใช้คลาส .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>somchai@dcrub.com</td>
      </tr>
      <tr>
        <td>สมศรี</td>
        <td>มีชัย</td>
        <td>somsri@dcrub.com</td>
      </tr>
      <tr>
        <td>สมใจ</td>
        <td>มีโชค</td>
        <td>somjai@dcrub.com</td>
      </tr>
    </tbody>
  </table>
</div>

ตารางที่ตกแต่งด้วยคลาส .table จะมีระยะห่างระหว่างเนื้อหากับขอบเซลล์พองาม และมีเส้นกั้นระหว่างแต่ละแถว แลดูสวยงามระดับหนึ่ง

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>somchai@dcrub.com</td>
      </tr>
      <tr>
        <td>สมศรี</td>
        <td>มีชัย</td>
        <td>somsri@dcrub.com</td>
      </tr>
      <tr>
        <td>สมใจ</td>
        <td>มีโชค</td>
        <td>somjai@dcrub.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>somchai@dcrub.com</td>
      </tr>
      <tr>
        <td>สมศรี</td>
        <td>มีชัย</td>
        <td>somsri@dcrub.com</td>
      </tr>
      <tr>
        <td>สมใจ</td>
        <td>มีโชค</td>
        <td>somjai@dcrub.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>somchai@dcrub.com</td>
      </tr>
      <tr>
        <td>สมศรี</td>
        <td>ใจใหญ่</td>
        <td>somsri@dcrub.com</td>
      </tr>
      <tr>
        <td>สมใจ</td>
        <td>มีโชค</td>
        <td>somjai@dcrub.com</td>
      </tr>
    </tbody>
  </table>
</div>

กำหนดพื้นหลังสีดำให้ตาราง

ถ้าต้องการกำหนดสีพื้นหลังของตารางเป็นสีดำ สามารถทำได้โดยการใช้คลาส .table-dark จะทำให้พื้นหลังตารางเป็นสีดำ และข้อความเป็นสีขาว

<div class="container mt-3">
  <h2>ตกแต่งตารางด้วย Boostrap 5</h2>
  <p>กำหนดพื้นหลังตารางเป็นสีดำด้วยคลาส .table-dark</p>            
  <table class="table table-dark">
    <thead>
      <tr>
        <th>ชื่อ</th>
        <th>นามสกุล</th>
        <th>อีเมล</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>สมชาย</td>
        <td>ใจดี</td>
        <td>somchai@dcrub.com</td>
      </tr>
      <tr>
        <td>สมศรี</td>
        <td>ใจใหญ่</td>
        <td>somsri@dcrub.com</td>
      </tr>
      <tr>
        <td>สมใจ</td>
        <td>มีโชค</td>
        <td>somjai@dcrub.com</td>
      </tr>
    </tbody>
  </table>
</div>

Dark Striped Table

เราสามารถใช้งานคลาส .table-dark ร่วมกับคลาส .table-striped เพื่อทำให้ตารางที่มีพื้นหลังสือดำมีความโดดเด่นขึ้นมาอีกก็ได้

<div class="container mt-3">
  <h2>ตกแต่งตารางด้วย Boostrap 5</h2>
  <p>ใช้งานคลาส .table-dark .table-striped ร่วมกัน</p>            
  <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>ชื่อ</th>
        <th>นามสกุล</th>
        <th>อีเมล</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>สมชาย</td>
        <td>ใจดี</td>
        <td>somchai@dcrub.com</td>
      </tr>
      <tr>
        <td>สมศรี</td>
        <td>ใจใหญ่</td>
        <td>somsri@dcrub.com</td>
      </tr>
      <tr>
        <td>สมใจ</td>
        <td>มีโชค</td>
        <td>somjai@dcrub.com</td>
      </tr>
    </tbody>
  </table>
</div>

Hoverable Dark Table

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

<div class="container mt-3">
  <h2>ตกแต่งตารางด้วย Boostrap 5</h2>
  <p>ใช้งานคลาส .table-dark .table-hover ร่วมกัน</p>            
  <table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>ชื่อ</th>
        <th>นามสกุล</th>
        <th>อีเมล</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>สมชาย</td>
        <td>ใจดี</td>
        <td>somchai@dcrub.com</td>
      </tr>
      <tr>
        <td>สมศรี</td>
        <td>ใจใหญ่</td>
        <td>somsri@dcrub.com</td>
      </tr>
      <tr>
        <td>สมใจ</td>
        <td>มีโชค</td>
        <td>somjai@dcrub.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>somchai@dcrub.com</td>
      </tr>
      <tr>
        <td>สมศรี</td>
        <td>ใจใหญ่</td>
        <td>somsri@dcrub.com</td>
      </tr>
      <tr>
        <td>สมใจ</td>
        <td>มีโชค</td>
        <td>somjai@dcrub.com</td>
      </tr>
    </tbody>
  </table>
</div>

กำหนดสีพื้นหลังให้ตาราง แถว หรือเซลล์

เราสามารถกำหนดสีพื้นหลังให้ตารางทั้งตาราง แถวทั้งแถว หรือแต่ละเซลล์ ได้ โดยใช้ Contextual classes เหล่านี้ .table-primary, .table-success, .table-danger, .table-info, .table-warning, .table-active, .table-secondary, .table-light และ .table-dark

โดยถ้าต้องการกำหนดสีให้ตารางทั้งตาราง ให้กำหนดคลาสภายในแท็ก <table> ถ้าต้องการกำหนดสีให้แถว ให้กำหนดคลาสในแท็ก <tr> แต่ถ้าต้องการกำหนดสีให้เซลล์แบบเจาะจง ให้กำหนดคลาสภายในแท็ก <td>

<div class="container mt-3">
  <h2>ตกแต่งตารางด้วย Boostrap 5</h2>
  <p>กำหนดสีให้ตาราง แถว หรือเซลล์</p>            
  <table class="table">
    <thead>
      <tr>
        <th>ชื่อ</th>
        <th>นามสกุล</th>
        <th>อีเมล</th>
        <th>คลาส</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-primary">
        <td>สมชาย</td>
        <td>ใจดี</td>
        <td>somchai@dcrub.com</td>
        <td>table-primary</td>
      </tr>
      <tr class="table-success">
        <td>สมศรี</td>
        <td>ใจใหญ่</td>
        <td>somsri@dcrub.com</td>
        <td>table-success</td>
      </tr>
      <tr class="table-danger">
        <td>สมชัย</td>
        <td>ใจดีล้วน</td>
        <td>somjai@dcrub.com</td>
        <td>table-danger</td>
      </tr>
      <tr class="table-info">
        <td>สมส่วน</td>
        <td>ใจตรง</td>
        <td>somsuan@dcrub.com</td>
        <td>table-info</td>
      </tr>
      <tr class="table-warning">
        <td>สมทรง</td>
        <td>ใจตั้ง</td>
        <td>somsong@dcrub.com</td>
        <td>table-warning</td>
      </tr>
      <tr class="table-active">
        <td>สมหวัง</td>
        <td>ใจทรนง</td>
        <td>somwang@dcrub.com</td>
        <td>table-active</td>
      </tr>
      <tr class="table-secondary">
        <td>สมประสงค์</td>
        <td>ใจดียิ่ง</td>
        <td>somprasong@dcrub.com</td>
        <td>table-secondary</td>
      </tr>
      <tr class="table-light">
        <td>สมหญิง</td>
        <td>ใจเพชร</td>
        <td>somying@dcrub.com</td>
        <td>table-light</td>
      </tr>
      <tr class="table-dark">
        <td>สมเจตต์</td>
        <td>ใจงาม</td>
        <td>somdej@dcrub.com</td>
        <td>table-dark</td>
      </tr>
    </tbody>
  </table>
</div>

หรือจะใช้คลาสดังกล่าวด้านบนนั้นตกแต่งหัวตารางก็ได้เช่นกัน โดยให้กำหนดคลาสดังกล่าวภายในแท็ก <thead>

<div class="container mt-3">
  <h2>ตกแต่งตารางด้วย Boostrap 5</h2>
  <p>ตกแต่งสีหัวตารางด้วย Contextual Classes</p>            
  <table class="table">
    <thead class="table-success">
      <tr>
        <th>ชื่อ</th>
        <th>นามสกุล</th>
        <th>อีเมล</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>สมชาย</td>
        <td>ใจดี</td>
        <td>somchai@dcrub.com</td>
      </tr>
      <tr>
        <td>สมศรี</td>
        <td>ใจใหญ่</td>
        <td>somsri@dcrub.com</td>
      </tr>
      <tr>
        <td>สมชัย</td>
        <td>ใจดีล้วน</td>
        <td>somjai@dcrub.com</td>
      </tr>      
    </tbody>
  </table>
</div>

ทำให้ตารางเล็กลง

ถ้าเห็นว่าตารางของ Bootstrap มีขนาดใหญ่เกินไป ก็สามารถทำให้เล็กลงอีกนิดหน่อยก็ได้ โดยใช้คลาส .table-sm ซึ่งเมื่อใช้คลาสนี้ Bootstrap จะลดระยะห่าง (padding) ภายในเซลล์แต่ละเซลล์ลงครึ่งหนึ่ง

<div class="container mt-3">
  <h2>ตกแต่งตารางด้วย Boostrap 5</h2>
  <p>ทำให้ตารางเล็กลงด้วยคลาส .table-sm</p>            
  <table class="table table-bordered table-sm">
    <thead>
      <tr>
        <th>ชื่อ</th>
        <th>นามสกุล</th>
        <th>อีเมล</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>สมชาย</td>
        <td>ใจดี</td>
        <td>somchai@dcrub.com</td>
      </tr>
      <tr>
        <td>สมศรี</td>
        <td>ใจใหญ่</td>
        <td>somsri@dcrub.com</td>
      </tr>
      <tr>
        <td>สมชัย</td>
        <td>ใจดีล้วน</td>
        <td>somjai@dcrub.com</td>
      </tr>      
    </tbody>
  </table>
</div>

Responsive Tables

โดยปกติตารางจะแสดงพอดีกับขนาดหน้าจอ แต่ถ้าข้อมูลในตารางมีจำนวนหลายคอลัมน์หรือมีความยาวมากเกินไป ตารางก็จะถูกบีบให้พอดีกับหน้าจออยู่ดี ซึ่งข้อมูลก็จะถูกแบบจนแออัดยัดเยียดไปด้วย ทำให้แลดูไม่สวยงาม

แต่เราสามารถทำตารางให้เป็นแบบ Responsive ได้ โดยการสร้างแท็ก <div> ขึ้นมาครอบแท็ก <table> ไว้ แล้วกำหนดคลาส .table-responsive กำกับแท็ก <div> นั้น

การทำดังนี้จะทำให้ตารางสามารถแสดงผลล้นขนาดหน้าจอได้ และมี Scrollbar ปรากฏอยู่ด้านล่าง สำหรับเลื่อนดูข้อมูล ในกรณีที่ข้อมูลในตารางเยอะจนไม่สามารถแสดงตารางพอดีกับหน้าจอได้

ตัวอย่างการใช้งาน Responsive Table

<div class="container mt-3">
  <h2>ตกแต่งตารางด้วย Boostrap 5</h2>
  <p>สร้าง Responsive Table ด้วยคลาส .table-responsive</p>       
  <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>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>สมชาย</td>
          <td>ใจดี</td>
          <td>somchai@dcrub.com</td>
          <td>40</td>
          <td>345/45789</td>
          <td>โนนหินแห่</td>
          <td>ขุหลุ</td>
          <td>ตระกาลพืชผล</td>
          <td>อุบลราชธานี</td>
          <td>99999</td>
        </tr>
        <tr>
          <td>สมศรี</td>
          <td>ใจใหญ่</td>
          <td>somsri@dcrub.com</td>
          <td>40</td>
          <td>345/45789</td>
          <td>โนนหินแห่</td>
          <td>ขุหลุ</td>
          <td>ตระกาลพืชผล</td>
          <td>อุบลราชธานี</td>
          <td>99999</td>
        </tr>
        <tr>
          <td>สมชัย</td>
          <td>ใจดีล้วน</td>
          <td>somjai@dcrub.com</td>
          <td>40</td>
          <td>345/45789</td>
          <td>โนนหินแห่</td>
          <td>ขุหลุ</td>
          <td>ตระกาลพืชผล</td>
          <td>อุบลราชธานี</td>
          <td>99999</td>
        </tr>      
      </tbody>
    </table>
  </div>    
</div>

เมื่อแสดงผลบนอุปกรณ์ที่มีขนาดหน้าจอเล็กจนไม่พอแสดงผลข้อมูลในตารางได้ทั้งหมด ตารางจะแสดงผลล้นหน้อจอออกไป และมี Scrollbar ปรากฏอยู่ด้านล่าง เพื่อใช้สำหรับเลื่อนดูข้อมูลที่เหลือได้

นอกจากนี้ เรายังสามารถกำหนดได้ว่า จะให้ตารางแสดงผลแบบ Responsive เมื่อแสดงผลบนอุปกรณ์ขนาดใด โดยการระบุรหัสแสดงขนาดอุปกรณ์ต่อท้ายคล้าน .table-responsive ดังนี้

คลาส .table-responsive-sm สำหรับกำหนดให้ตารางแสดงผลแบบ Responsive เมื่อแสดงผลบนอุปกรณ์ขนาดที่มีความละเอียดหน้าจอน้อยกว่า 576px
คลาส .table-responsive-md สำหรับกำหนดให้ตารางแสดงผลแบบ Responsive เมื่อแสดงผลบนอุปกรณ์ที่มีความละเอียดหน้าจอน้อยกว่า 768px
คลาส .table-responsive-lg สำหรับกำหนดให้ตารางแสดงผลแบบ Responsive เมื่อแสดงผลบนอุปกรณ์ที่มีความละเอียดหน้าจอน้อยกว่า 992px
คลาส .table-responsive-xl สำหรับกำหนดให้ตารางแสดงผลแบบ Responsive เมื่อแสดงผลบนอุปกรณ์ที่มีความละเอียดหน้าจอน้อยกว่า 1200px
คลาส .table-responsive-xxl สำหรับกำหนดให้ตารางแสดงผลแบบ Responsive เมื่อแสดงผลบนอุปกรณ์ที่มีความละเอียดหน้าจอน้อยกว่า 1400px

<div class="container mt-3">
  <h2>ตกแต่งตารางด้วย Boostrap 5</h2>
  <p>สร้าง Responsive Table ด้วยคลาส .table-responsive</p>       
  <div class="table-responsive-md"> 
    <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>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>สมชาย</td>
          <td>ใจดี</td>
          <td>somchai@dcrub.com</td>
          <td>40</td>
          <td>345/45789</td>
          <td>โนนหินแห่</td>
          <td>ขุหลุ</td>
          <td>ตระกาลพืชผล</td>
          <td>อุบลราชธานี</td>
          <td>99999</td>
        </tr>        
      </tbody>
    </table>
  </div>    
</div>

Bootstrap 5 Tooltip
Bootstrap 5 Popover
Bootstrap 5 Toasts
Bootstrap 5 Scrollspy
Bootstrap 5 Offcanvas
Bootstrap 5 Utilities
Bootstrap 5 Flex
Bootstrap 5 Forms
Bootstrap 5 Select
Bootstrap 5 Checkboxes and Radio buttons
Bootstrap 5 Range
Bootstrap 5 Input Groups
Bootstrap 5 Form Floating Labels
Bootstrap 5 Form Validation
Bootstrap 5 Grid System
Bootstrap 5 Grid Stacked to horizontal
Bootstrap 5 Grid Extra Small
Bootstrap 5 Grid Small
Bootstrap 5 Grid Medium
Bootstrap 5 Grid Large
Bootstrap 5 Grid Extra Large
Bootstrap 5 Grid XXL
Bootstrap 5 Grid Examples

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

ตกแต่งตารางด้วย Bootstrap 5