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

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

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