home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

สร้างตาราง (Table) ด้วย Bootstrap Framework: คู่มือครบถ้วน

ตาราง (Table) ใช้แสดงความสัมพันธ์ระหว่างแถวและคอลัมน์ เป็นวิธีจัดระเบียบข้อมูลที่ชัดเจน Bootstrap เป็น CSS Framework ช่วยสร้างตาราง Responsive ได้อย่างรวดเร็ว บทความนี้ครอบคลุมการตั้งค่า Bootstrap ความจำเป็นของตาราง และตัวอย่างการปรับแต่งสไตล์ต่างๆ

การเตรียมพร้อม

สำหรับตารางพื้นฐาน ไม่จำเป็นต้องใช้ JavaScript (jQuery, Popper.js) แต่แนะนำให้เพิ่มไว้เพื่อใช้งาน Component อื่นๆ ในอนาคต ใช้ CDN สำหรับ Bootstrap CSS เท่านั้นก็เพียงพอ จำไว้: ลำดับ <script> สำคัญ หากรวม JS

เมื่อไหร่ควรใช้ตาราง

  • ต้องการแสดงข้อมูลจำนวนมากแบบมีโครงสร้าง
  • ต้องการตาราง Responsive แบบไม่ต้องเขียน CSS เอง

Bootstrap ใช้โครงสร้าง HTML ตารางมาตรฐาน เพียงเพิ่มคลาส CSS ของ Bootstrap เข้าไป

ข้อมูลตารางอยู่ในเมนู Content (ไม่ใช่ Components) ใน Sidebar ของเอกสาร

ตัวอย่างตารางพื้นฐาน

<table class="table">
  <thead>
    <tr><th scope="col">No.</th><th scope="col">Drink</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><td scope="row">#1</td><td>Iced Tea</td><td>$3.25</td></tr>
    <tr><td scope="row">#2</td><td>Fountain Soda</td><td>$3.00</td></tr>
    <tr><td scope="row">#3</td><td>Coffee</td><td>$2.00</td></tr>
    <tr><td scope="row">#4</td><td>Latte</td><td>$4.25</td></tr>
  </tbody>
</table>

เพิ่มคลาส .table ให้ <table> เพื่อสไตล์พื้นฐานและ Responsive

1. Invert สี (Dark Mode)

เพิ่ม .table-dark เพื่อสลับเป็นธีมสีเข้ม

<table class="table table-dark">...</table>

2. สีหัวตาราง (Thead Styles)

ใช้ .thead-light หรือ .thead-dark บน <thead> แยกจาก body

<table class="table table-danger">
  <thead class="thead-light">...</thead>
  <tbody>...</tbody>
</table>

3. Striped Rows (แถบสลับสี)

เพิ่ม .table-striped ให้ <table>

<table class="table table-striped table-warning">...</table>

4. Borders (ขอบ)

  • .table-bordered – เพิ่มขอบทุกด้านของเซลล์
  • .table-borderless – ลบขอบทั้งหมด
<table class="table table-primary table-bordered">...</table>

5. Hover Effect

เพิ่ม .table-hover ให้ <table> แถวใน <tbody> จะมีเอฟเฟกต์เมื่อ hover

<table class="table table-hover table-primary table-bordered">...</table>

6. Responsive Table

ห่อ <table> ด้วย <div class="table-responsive"> ทำให้ตารางเลื่อนแนวนอนได้เมื่อจอเล็ก

<div class="table-responsive">
  <table class="table ...">...</table>
</div>

สรุป

Bootstrap มีคลาสมากมายสำหรับปรับแต่งตาราง: สี แถบ ขอบ Hover และ Responsive หลังจากเชี่ยวชาญแล้ว คุณสามารถผสมผสานกับ CSS ของตัวเองเพื่อสร้างตารางที่สวยงามและใช้งานได้จริง