ตาราง PHP Bootstrap ด้วยชุดคำสั่ง Tables

ตาราง PHP Bootstrap ด้วยชุดคำสั่ง Tables บทความนี้สอนการใช้ Bootstrap Framework ร่วมกับ PHP เพื่อแสดงผลตารางจากชุดคำสั่ง Tables ของ Bootstrap ในเว็บไซต์ที่พัฒนาด้วย PHP สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ตาราง PHP Bootstrap ด้วยชุดคำสั่ง Tables

1. ติดตั้ง Bootstrap Framework ผ่าน CDN ประกอบด้วยไฟล์ css และ js โดยวางโค้ดไว้ภายในแท็ก head ของเว็บไซต์

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

2. เขียนโค้ดสร้างตาราง PHP ด้วย Bootstrap ผ่านชุดคำสั่ง Tables

<?php
  echo "
          <table class='table table-striped table-bordered table-hover'>
            <thead>
              <tr>
                <th scope='col'>ลำดับ</th>
                <th scope='col'>ชื่อสินค้า</th>
                <th scope='col'>ราคา</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</th>
                <td>ดินสอ</td>
                <td>5</td>
              </tr>
              <tr>
                <td>2</th>
                <td>ปากกา</td>
                <td>10</td>
              </tr>
            </tbody>
          </table>  
       ";
?>

ตาราง PHP Bootstrap ด้วยชุดคำสั่ง Tables จากตัวอย่างติดตั้ง Bootstrap ผ่าน CDN จากนั้นสร้างตารางด้วยการเรียกใช้ class ของ Bootstrap ร่วมกับคำสั่ง echo ของ PHP โดย class ที่นำมาใช้งานในตัวอย่าง มีรายละเอียดดังนี้

1. class = table คือ class หลักสำหรับสร้างตารางด้วย Bootstrap

2. class = table-striped คือ class ที่ทำให้แถวข้อมูลของตารางมีกาสลับสี (สีขาวกับสีเทาอ่อน)

3. class = table-bordered คือ class สร้างกรอบ หรือเส้นขอบให้กับข้อมูลแต่ละ cell ในตาราง

4. table-hover คือ class ที่ทำให้เมื่อนำเมาส์ไปวางที่แถวข้อมูลใด แถวข้อมูลนั้นสีพื้นหลังจะเปลี่ยน ลักษณะเหมือนเป็น Highlight แถวข้อมูล