Sử Dụng Framework Bootstrap Tạo Bảng (Table)

Bảng mô tả mối quan hệ giữa hàng và cột, là cách tuyệt vời để tổ chức và trình bày dữ liệu.

Bootstrap là framework CSS giúp tạo nội dung nhanh chóng. Bài viết này xem xét cài đặt Bootstrap, khi nào cần bảng, và các ví dụ bảng thực tế với Bootstrap.

Bắt Đầu

Để xem bảng trên trang web, hãy đảm bảo đã có dependency. Demo này không bắt buộc cần Popper.JS và jQuery, nhưng nên thêm vì các component khác sẽ cần. Xem trang Quick Start của Bootstrap.

Cách dễ nhất: dùng CDN cho jQuery, Popper.js, Bootstrap. Chú ý thứ tự thẻ <script>.

Khi Nào Dùng Bảng

Dùng bảng khi muốn tổng hợp nhiều dữ liệu cùng lúc. Dùng Bootstrap Table khi muốn tạo bảng responsive dễ dàng. Bootstrap dùng cấu trúc HTML bảng cơ bản, bạn chỉ cần thêm class CSS của họ và tùy chỉnh.

Tạo Bảng Với Bootstrap

Bảng truyền thống dùng HTML + CSS. Bootstrap giúp có thiết kế responsive nhanh chóng để tập trung vào việc ưu tiên cao hơn.

Khi dùng Bootstrap, hãy mở tài liệu để cấu trúc đúng. Khác với Modal hay Navbar, Bảng không phụ thuộc JS nên được xem là tính năng nội dung (Content) chứ không phải Component. Bạn tìm thấy nó dưới menu Content chứ không phải Components.

Cấu Trúc Cơ Bản

<table>
  <thead>
    <tr><th>Bootstrap Table Demo</th></tr>
  </thead>
  <tbody>
    <tr><th scope="col">No.</th><th scope="col">Drink</th><th scope="col">Price</th></tr>
    <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>

Chạy code trên sẽ thấy bảng cơ bản chỉ có style mặc định của Bootstrap cho toàn văn bản.

Để thêm style cho bảng, chỉ cần thêm class .table vào thẻ <table>.

Đảo Màu Mặc Định (Dark Table)

Thêm .table-dark bên cạnh .table để chuyển sang giao diện tối.

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

Cũng có thể dùng các class màu ngữ cảnh: .table-primary, .table-danger, .table-success, v.v.

Tùy Chỉnh <thead>

Điều khiển màu header riêng biệt bằng .thead-dark hoặc .thead-light trên thẻ <thead>.

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

Sọc (Stripes)

Thêm .table-striped vào <table> để xen kẽ màu các hàng.

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

Viền (Borders)

.table-bordered: thêm viền cho mọi ô. .table-borderless: xóa mọi viền.

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

Hiệu Ứng Hover

Thêm .table-hover vào <table> để các hàng trong <tbody> có hiệu ứng khi chuột di qua.

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

Bảng Responsive

Bọc <table> trong <div class="table-responsive"> để bảng cuộn ngang khi nội dung bị cắt do kích thước màn hình (hoạt động mọi breakpoint).

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

Kết Luận

Có nhiều cách tùy chỉnh bảng bằng Bootstrap kết hợp HTML. Sau khi thành thạo, hãy thử thêm style tùy chỉnh của riêng bạn!