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

การสร้างตารางด้วย Bootstrap 4