สร้างตาราง HTML สวยๆ ด้วย Bootstrap

สร้างตาราง HTML สวยๆ ด้วย Bootstrap บทความนี้สอนวิธีการติดตั้ง Bootstrap และสร้างตาราง HTML สวยๆ ผ่าน class ต่างๆ ที่ทาง Bootstrap เตรียมไว้ให้เพื่อสร้างตาราง พร้อมแสดงผลลัพธ์ออกสู่หน้าจอ มีรายละเอียดดังนี้

ตัวอย่าง สร้างตาราง HTML สวยๆ ด้วย Bootstrap

1. ติดตั้ง CSS และ JS ของ Bootstrap โดยการวางลิงก์ด้านล่างไว้ภายในแท็ก head ของเว็บไซต์

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

2. เขียนโค้ดสร้างตาราง HTML สวยๆ ด้วย Bootstrap ประกอบด้วย 3 columns คือ No, Title และ Price มีการใช้ class table table-striped table-bordered ของ Bootstrap

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th scope="col">No</th>
      <th scope="col">Title</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Computer</td>
      <td>450</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mobile</td>
      <td>300</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Pencil</td>
      <td>100</td>
    </tr>
  </tbody>
</table>