Table Bootstrap: Chi tiết cách tạo và tùy chỉnh bảng với Bootstrap

Trong quá trình xây dựng giao diện web, bảng (table) là công cụ không thể thiếu để trình bày dữ liệu một cách có tổ chức và dễ nhìn. Bootstrap giúp việc thiết kế bảng trở nên nhẹ nhàng hơn nhờ vào các class tiện ích được tích hợp sẵn. 

Đọc bài viết này để được hướng dẫn:

• Cách tạo bảng cơ bản trong Bootstrap
• Cách định dạng bảng: màu sắc, viền, căn lề, nhóm dữ liệu
• Các hiệu ứng giúp bảng sinh động
• Tùy chỉnh bảng theo ý muốn
• Bài tập thực hành và giải đáp các câu hỏi thường gặp

Table trong Bootstrap là gì?

Table trong HTML là gì?

Table (bảng) là một cấu trúc HTML dùng để hiển thị dữ liệu dưới dạng hàng và cột, giống như bảng tính Excel. Mỗi bảng bao gồm các phần cơ bản như:

• <table>: Thẻ chính để khai báo bảng
• <tr> (table row): Đại diện cho một hàng
• <th> (table heading): Tiêu đề của cột
• <td> (table data): Dữ liệu trong bảng

Table thường được dùng để hiển thị dữ liệu có cấu trúc rõ ràng như danh sách sản phẩm, bảng điểm, hóa đơn, báo cáo, lịch biểu… hoặc tổ chức dữ liệu dạng lưới, nhất là trong các dashboard quản trị, hệ thống quản lý (CMS, CRM…).

Đọc chi tiết về Hướng dẫn cách tạo và tùy chỉnh Table HTML

Table Bootstrap là gì?

Trong Bootstrap, việc tạo bảng (table) trở nên dễ dàng và đẹp mắt chỉ với một vài class đơn giản. Các bảng được hỗ trợ mặc định với giao diện gọn gàng, rõ ràng, dễ đọc, và bạn có thể mở rộng hoặc tùy chỉnh thêm theo nhu cầu.

Bạn chỉ cần thêm class .table vào thẻ <table> để áp dụng style mặc định của Bootstrap. Ngoài ra còn có hàng loạt class hỗ trợ khác để thay đổi màu sắc, viền, kích thước, canh lề và hiệu ứng tương tác.

Ví dụ về việc tạo một bảng đơn giản, sử dụng class .table để có định dạng mặc định trong Bootstrap:

<table class="table">

   <thead>
     <tr>
       <th scope="col">#</th>
       <th scope="col">First</th>
       <th scope="col">Last</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <th scope="row">1</th>
       <td>Mark</td>
       <td>Otto</td>
     </tr>

     <tr>
       <th scope="row">2</th>
       <td>Jacob</td>
       <td>Thornton</td>
     </tr>

     <tr>
       <th scope="row">3</th>
       <td>John</td>
       <td>Doe</td>
     </tr>
   </tbody>

 </table>

Kết quả:

Các định dạng của Table Bootstrap

Các biến thể của bảng (Variants)

Bootstrap hỗ trợ nhiều biến thể màu sắc cho bảng thông qua việc kết hợp các theme theo cú pháp chung .table-*, giúp bạn thay đổi màu nền (background) của toàn bộ hàng hoặc ô trong bảng.

Mục đích là để phân loại, nhấn mạnh, hoặc biểu thị trạng thái dữ liệu trong bảng (ví dụ: thành công, lỗi, cảnh báo…).

Ví dụ 1: Tạo một bảng theo chủ đề success (áp dụng cho toàn bảng):

<table class="table table-success">

   <thead>
     <tr>
       <th>Họ tên</th>
       <th>Trạng thái</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <td>Minh Anh</td>
       <td>Đã xác nhận</td>
     </tr>

     <tr>
       <td>Hải Đăng</td>
       <td>Đã xác nhận</td>
     </tr>
   </tbody>

 </table>

Trong đó, sử dụng class .table để áp dụng định dạng cho table trong Bootstrap và .table-success để áp dụng màu sắc theo chủ đề success (màu xanh lá) cho toàn bộ bảng.

Kết quả:

Ví dụ 2: Áp dụng chủ đề cho từng hàng:

<table class="table">

   <thead>
     <tr>
       <th>STT</th>
       <th>Sản phẩm</th>
       <th>Trạng thái</th>
     </tr>
   </thead>

   <tbody>
     <tr class="table-success">
       <td>1</td>
       <td>Áo thun</td>
       <td>Còn hàng</td>
     </tr>

     <tr class="table-warning">
       <td>2</td>
       <td>Giày sneaker</td>
       <td>Sắp hết</td>
     </tr>

     <tr class="table-danger">
       <td>3</td>
       <td>Quần jeans</td>
       <td>Hết hàng</td>
     </tr>
   </tbody>

 </table>

Bạn có thể áp dụng từng class theo chủ đề riêng cho từng hàng trong bảng bằng cách sử dụng class .table-* vào từng thẻ <tr>.

Kết quả:

Table borders

Trong một số trường hợp, bạn sẽ muốn bảng có các đường viền rõ ràng để phân tách dữ liệu hoặc làm cho nội dung dễ đọc hơn. Bootstrap cung cấp một số class tiện dụng để thêm hoặc loại bỏ đường viền trong bảng.

Đọc thêm: Border Bootstrap là gì? 10+ cách thiết kế viền đẹp với Bootstrap

Thêm đường viền với .table-bordered

Mặc định, Bootstrap chỉ thêm đường viền ngăn cách các hàng trong bảng, để thêm viền xung quanh toàn bộ bảng và các ô bên trong, bạn có thể sử dụng class .table-bordered vào thẻ <table>.

<table class="table table-bordered">

   <thead>
     <tr>
       <th>#</th>
       <th>Họ</th>
       <th>Tên</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <td>1</td>
       <td>Mark</td>
       <td>Otto</td>
     </tr>

     <tr>
       <td>2</td>
       <td>Jacob</td>
       <td>Thornton</td>
     </tr>
   </tbody>

 </table>

Kết quả:

Tùy chỉnh màu viền bằng .border-*

Để thay đổi màu sắc của đường viền Table, bạn có thể sử dụng các class định dạng border trong Bootstrap theo cú pháp .border-*.

Ví dụ về tạo đường viền màu xanh cho table:

<table class="table table-bordered border-primary">

   <thead>
     <tr>
       <th>#</th>
       <th>Họ</th>
       <th>Tên</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <td>1</td>
       <td>Mark</td>
       <td>Otto</td>
     </tr>

     <tr>
       <td>2</td>
       <td>Jacob</td>
       <td>Thornton</td>
     </tr>
   </tbody>

 </table>

Kết quả:

Loại bỏ viền bằng .table-borderless

Trong trường hợp bạn muốn tạo một Table tối giản, muốn loại bỏ các đường viền, bạn có thể sử dụng class .table-borderless. Ngoài ra bạn có thể kết hợp với Table variant để tạo một table hiện đại.

Ví dụ:

<table class="table table-borderless">

   <thead>
     <tr  class="table-secondary">
       <th>#</th>
       <th>Họ</th>
       <th>Tên</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <td>1</td>
       <td>Mark</td>
       <td>Otto</td>
     </tr>

     <tr  class="table-secondary">
       <td>2</td>
       <td>Jacob</td>
       <td>Thornton</td>
     </tr>

     <tr>
       <td>3</td>
       <td>Jasper</td>
       <td>Tom</td>
     </tr>
   </tbody>

 </table>

Trong đó, sử dụng .table-borderless để loại bỏ đường viền, sử dụng .table-secondary để tạo hàng màu xám xen kẽ, tạo cảm giác tối giản, hiện đại.

Kết quả:

Tùy chỉnh kích thước bảng

Bootstrap có cung cấp class .table-sm để giảm padding (khoảng đệm) giữa nội dung và viền ô, làm cho bảng trông nhỏ gọn hơn, thích hợp cho bảng nhiều dòng hoặc cần hiển thị dữ liệu dày đặc.

Ví dụ:

Đây là hình ảnh một Table Bootstrap mặc định:

Còn đây là Table Bootstrap sử dụng .table-sm để giảm kích thước:

Code:

<table class="table table-sm table-bordered">

   <thead>
     <tr>
       <th>#</th>
       <th>Họ</th>
       <th>Tên</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <td>1</td>
       <td>Mark</td>
       <td>Otto</td>
     </tr>

     <tr>
       <td>2</td>
       <td>Jacob</td>
       <td>Thornton</td>
     </tr>
   </tbody>

 </table>

Phân nhóm bảng

Khi làm việc với bảng chứa nhiều dữ liệu, việc phân nhóm rõ ràng giữa phần tiêu đề, phần nội dung và phần tổng kết là rất quan trọng để giúp người dùng dễ đọc, dễ theo dõi. Bootstrap hỗ trợ các thẻ HTML phân nhóm chuẩn như:

• <thead>: phần tiêu đề cột
• <tbody>: phần nội dung dữ liệu
• <tfoot>: phần tổng kết (nếu có)

Bootstrap cung cấp lớp .table-group-divider để làm nổi bật ranh giới giữa các nhóm bằng việc tạo đường viền dày hơn, đậm hơn. Ví dụ để phân tích giữa quản trị viên và người dùng trong 1 bảng:

<table class="table">

   <thead>
     <tr>
       <th>#</th>
       <th>Tên</th>
       <th>Vai trò</th>
     </tr>
   </thead>

    <tbody>
     <tr>
       <td>1</td>
       <td>Admin 1</td>
       <td>Quản trị viên</td>
     </tr>
   </tbody>

    <tbody class="table-group-divider">
     <tr>
       <td>2</td>
       <td>User A</td>
       <td>Người dùng</td>
     </tr>

     <tr>
       <td>3</td>
       <td>User B</td>
       <td>Người dùng</td>
     </tr>
   </tbody>

 </table>

Kết quả:

Canh chỉnh lề cho bảng

Trong các bảng HTML thông thường, việc canh chỉnh nội dung theo chiều dọc đôi khi không nhất quán và gây khó chịu cho người dùng khi hiển thị dữ liệu không đồng đều. Bootstrap giúp bạn kiểm soát tốt hơn việc căn chỉnh nội dung trong ô thông qua các class tiện dụng.

Ví dụ, để canh dưới cho nội dung tiêu đề, và canh giữa cho dòng 1, canh top cho dòng 2 ta làm như sau:

<table class="table">

     <thead>
       <tr class="align-bottom" style="height: 100px;">
         <th>Vị trí</th>
         <th>Mô tả</th>
       </tr>
     </thead>

     <tbody>
       <tr class="align-middle" style="height: 100px;">
         <td>Căn giữa (Middle)</td>
         <td>Nội dung được căn giữa theo chiều dọc.</td>
       </tr>

       <tr class="align-top" style="height: 100px;">
         <td>Căn Trên (Top)</td>
         <td>Nội dung được canh sát cạnh trên ô.</td>
       </tr>
     </tbody>

   </table>

Kết quả:

Tạo điểm nhấn cho Table trong Bootstrap (Accented Tables)

Striped tables

Ví dụ trường hợp bạn muốn tạo màu xen kẽ giữa các hàng hoặc các cột trong bảng để nội dung bảng trong dễ nhìn hơn, thay vì áp dụng class màu sắc cho từng hàng/cột, bạn có thể sử dụng các class định dạng striped table của Bootstrap.

Striped rows: Sọc xen kẽ hàng

Class .table-striped được sử dụng để tự động tạo màu nền xám cho các hàng ở vị trí lẻ để tạo hiệu ứng sọc xen kẽ (chỉ tính các hàng nằm trong <tbody>). Ví dụ:

<table class="table table-striped">

   <thead>
     <tr>
       <th>#</th>
       <th>Họ</th>
       <th>Tên</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <td>1</td>
       <td>Mark</td>
       <td>Otto</td>
     </tr>

     <tr>
       <td>2</td>
       <td>Jacob</td>
       <td>Thornton</td>
     </tr>

     <tr>
       <td>3</td>
       <td>Jasper</td>
       <td>Tom</td>
     </tr>
   </tbody>

 </table>

Kết quả:

Striped columns: Sọc xen kẽ cột

Để tạo hiệu ứng xen kẽ cho các cột thay vì hàng, bạn có thể sử dụng class .table-striped-columns:

<table class="table table-striped-columns">

   <thead>
     <tr>
       <th>#</th>
       <th>Họ</th>
       <th>Tên</th>
       <th>Chức vụ</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <td>1</td>
       <td>Mark</td>
       <td>Otto</td>
       <td>Admin</td>
     </tr>

     <tr>
       <td>2</td>
       <td>Jacob</td>
       <td>Thornton</td>
       <td>User</td>
     </tr>
   </tbody>

 </table>

Kết quả:

Hiệu ứng hover

Để tạo hiệu ứng hightlight cho từng dòng trong bảng khi rê chuột vào, bạn có thể sử dụng class .table-hover. Với class này, Bootstrap sẽ tự động thêm hiệu ứng highlight nhẹ khi người dùng rê chuột qua các hàng trong phần <tbody>. 

Ví dụ:

<table class="table table-hover">

   <thead>
     <tr>
       <th>#</th>
       <th>Họ</th>
       <th>Tên</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <td>1</td>
       <td>Mark</td>
       <td>Otto</td>
     </tr>

     <tr>
       <td>2</td>
       <td>Jacob</td>
       <td>Thornton</td>
     </tr>
   </tbody>

 </table>

Kết quả:

• Khi rê chuột vào hàng số 1

• Khi rê chuột vào hàng số 2

Active tables

Trong nhiều tình huống, bạn cần làm nổi bật một hàng hoặc ô cụ thể, chẳng hạn để đánh dấu dòng đang được chọn, hoặc thể hiện trạng thái “active” (đang hoạt động). Bootstrap hỗ trợ sẵn class .table-active cho mục đích này.

• Dùng cho cả hàng:

     <tr class="table-active">
       <td>1</td>
       <td>Mark</td>
       <td>Otto</td>
     </tr>

• Dùng cho một ô riêng biệt:

       <td class="table-active">Thornton</td>

Kết quả:

Responsive Tables trong Bootstrap

Trong trường hợp bạn làm việc với bảng có nhiều cột, việc giữ bảng hiển thị đẹp và không vỡ bố cục (đặc biệt là trên thiết bị nhỏ như điện thoại) là một thử thách. Bootstrap giải quyết vấn đề này bằng cách cung cấp tính năng responsive table cực kỳ đơn giản và hiệu quả.

Bạn chỉ cần bọc bảng trong một thẻ div có class .table-responsive, Bootstrap sẽ tự động cho phép bảng cuộn ngang nếu nội dung vượt quá chiều rộng của màn hình.

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

Khi bảng có quá nhiều cột, người dùng sẽ thấy thanh cuộn ngang xuất hiện – giúp giao diện không bị vỡ mà vẫn xem được đầy đủ dữ liệu.

Responsive theo breakpoint

Bootstrap còn cho phép bạn chỉ áp dụng responsive table ở một số kích thước màn hình nhất định, thông qua các class:

Ví dụ, để bảng cuộn ngang từ màn hình ≥ 768px trở xuống, còn từ 768px trở lên thì bảng hiển thị bình thường:

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

Đọc thêm: Responsive trong Bootstrap: Hướng dẫn từ cơ bản đến nâng cao

Tùy chỉnh Table Bootstrap

Bootstrap cung cấp sẵn rất nhiều class giúp bạn tạo bảng đẹp mắt một cách nhanh chóng. Tuy nhiên, đôi khi bạn sẽ cần tùy chỉnh thêm để phù hợp với giao diện, chức năng, hoặc phong cách thiết kế riêng của dự án. Dưới đây là những cách phổ biến để tùy chỉnh bảng trong Bootstrap:

Kết hợp nhiều class để thay đổi giao diện bảng

Bạn có thể kết hợp các lớp tiện ích có sẵn của Bootstrap để thoải mái tạo ra những bảng với định dạng theo ý thích, vừa gọn gàng, vừa dễ đọc. Ví dụ:

<table class="table table-striped table-hover table-bordered table-sm">

   <thead>
     <tr class="table-primary">
       <th>#</th>
       <th>Họ</th>
       <th>Tên</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <td>1</td>
       <td>Mark</td>
       <td>Otto</td>
     </tr>

     <tr>
       <td>2</td>
       <td>Jacob</td>
       <td >Thornton</td>
     </tr>

     <tr>
       <td>3</td>
       <td>Jasper</td>
       <td >Tom</td>
     </tr>
   </tbody>

 </table>

Nội dung này sẽ tạo ra bảng với:

• Kích thước gọn hơn nhờ .table-sm
• Tạo hiệu ứng xen kẽ hàng bằng .table-striped
• Bổ sung toàn bộ đường viền bằng .table-bordered
• Đổi màu header bằng .table-primary

Kết quả:

Tuỳ chỉnh màu sắc bảng

Theo mặc định, bạn có thể sử dụng table variants có sẵn như .table-primary, .table-danger, .table-success, hoặc cũng có thể tự định nghĩa màu sắc bằng CSS. Ví dụ:

<style>
 .table-custom {
   background-color: #f0f9ff;
 }
</style>

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

Thay đổi font, padding, border bằng CSS

Nếu bạn muốn tinh chỉnh chi tiết hơn (ví dụ: tăng khoảng cách giữa các ô, đổi font chữ, bo góc viền…), bạn có thể viết CSS riêng hoặc ghi đè lại class Bootstrap. Ví dụ:

<style>
.custom-table td {
 padding: 1.5rem;
 font-family: 'Roboto', sans-serif;
 border-radius: 4px;
}
</style>

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

Bài tập Table Bootstrap

Bài tập 1 (Dễ)

Tạo bảng danh sách các bài viết gồm các cột: #, Tiêu đề, Tác giả, Ngày đăng.

Yêu cầu bảng có:

• Giao diện sáng
• Hiệu ứng hover khi rê chuột
• Một hàng được đánh dấu là nổi bật bởi vì là bài viết đang được xem nhiều

Hình ảnh tham khảo:

<table class="table table-light table-hover">

   <thead>
     <tr>
       <th>#</th>
       <th>Tiêu đề</th>
       <th>Tác giả</th>
       <th>Ngày đăng</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <td>1</td>
       <td>Làm chủ Flexbox trong 10 phút</td>
       <td>Hoàng Minh</td>
       <td>25/05/2025</td>
     </tr>

     <tr class="table-active">
       <td>2</td>
       <td>Top 10 plugin VSCode cho Frontend</td>
       <td>Lan Hương</td>
       <td>24/05/2025</td>
     </tr>

     <tr>
       <td>3</td>
       <td>Responsive layout với Bootstrap 5</td>
       <td>Phúc Lợi</td>
       <td>22/05/2025</td>
     </tr>
   </tbody>

 </table>

Bài tập 2 (Trung bình)

Tạo bảng hiển thị giỏ hàng gồm: STT, Tên sản phẩm, Số lượng, Đơn giá, Thành tiền. Yêu cầu bảng có:

• Kích thước gọn phù hợp cho bảng nhiều dòng
• Các hàng được xen kẽ màu sắc để dễ phân biệt
• Có 1 dòng tổng cộng được tách rõ và có màu nổi bật để dễ nhận biết

Hình ảnh:

<table class="table table-striped table-sm">

   <thead>
     <tr>
       <th>STT</th>
       <th>Sản phẩm</th>
       <th>Số lượng</th>
       <th>Đơn giá</th>
       <th>Thành tiền</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <td>1</td>
       <td>Chuột không dây Logitech</td>
       <td>2</td>
       <td>250.000đ</td>
       <td>500.000đ</td>
     </tr>

     <tr>
       <td>2</td>
       <td>Bàn phím cơ DareU</td>
       <td>1</td>
       <td>850.000đ</td>
       <td>850.000đ</td>
     </tr>
   </tbody>

   <tbody class="table-group-divider">
     <tr class="table-success fw-bold">
       <td colspan="4" class="text-end">Tổng cộng</td>
       <td>1.350.000đ</td>
     </tr>
   </tbody>

 </table>

Bài tập 3 (Khó)

Tạo bảng danh sách nhân viên với các cột: #, Họ tên, Phòng ban, Chức vụ, Ghi chú. Yêu cầu:

• Bảng cần cuộn ngang khi trên màn hình nhỏ
• Có phân nhóm giữa trưởng phòng so với các nhân viên khác
• Canh giữa nội dung toàn bảng
• Cột “Ghi chú” có nội dung dài → canh xuống dưới
• Một nhân viên nổi bật được đánh dấu

Hình ảnh:

<div class="table-responsive">
   <table class="table align-middle">

     <thead>
       <tr>
         <th>#</th>
         <th>Họ tên</th>
         <th>Phòng ban</th>
         <th>Chức vụ</th>
         <th>Ghi chú</th>
       </tr>
     </thead>

     <tbody>
       <tr>
         <td>1</td>
         <td>Nguyễn Văn A</td>
         <td>Kinh doanh</td>
         <td>Trưởng phòng</td>
         <td class="align-bottom">
           Quản lý toàn bộ hoạt động của team kinh doanh, triển khai chiến lược bán hàng.
         </td>
       </tr>
     </tbody>

     <tbody class="table-group-divider">
       <tr class="table-active">
         <td>2</td>
         <td>Trần Thị B</td>
         <td>Marketing</td>
         <td>Nhân viên</td>
         <td class="align-bottom">
           Phụ trách nội dung và social media.
         </td>
       </tr>

       <tr>
         <td>3</td>
         <td>Lê Quốc C</td>
         <td>IT</td>
         <td>Dev Backend</td>
         <td class="align-bottom">
           Xử lý server và bảo trì hệ thống nội bộ.
         </td>
       </tr>
     </tbody>

   </table>
 </div>

Câu hỏi thường gặp về Table Bootstrap

Có thể kết hợp nhiều lớp định dạng bảng cùng lúc không?

Hoàn toàn được. Bootstrap được thiết kế rất linh hoạt, cho phép bạn kết hợp nhiều lớp (class) để tạo bảng phù hợp với nhu cầu. Bạn có thể tùy chọn class theo đúng giao diện mong muốn mà không lo bị xung đột.

Ví dụ:

<table class="table table-striped table-bordered table-hover table-sm">
   ...
 </table>

Điều này sẽ tạo ra 1 bảng với:

• .table: Bắt buộc, để áp dụng style bảng cơ bản
• .table-striped: Tạo sọc xen kẽ
• .table-bordered: Thêm viền cho ô
• .table-hover: Hiệu ứng khi rê chuột
• .table-sm: Thu gọn bảng

Làm thế nào để thay đổi màu sắc của bảng?

Để thay đổi màu sắc của Table trong Bootstrap, bạn có thể sử dụng 2 cách sau:

Dùng biến thể bảng có sẵn với .table-*: 

Bootstrap cung cấp sẵn các biến thể bảng để đổi màu nền như:

• .table-primary: Làm nổi bật các hàng hoặc bảng quan trọng, tiêu đề chính, hoặc phần dữ liệu cốt lõi.
• .table-success: Biểu thị trạng thái tốt, hoàn thành, xác nhận thành công, hợp lệ.
• .table-danger: Dùng để cảnh báo lỗi, trạng thái thất bại, hoặc điều gì đó cần người dùng chú ý.
• .table-warning: Biểu thị thông tin cảnh báo, tạm thời, cần kiểm tra lại.
• .table-info: Dùng để hiển thị thông tin bổ sung, trung lập, không mang tính cảnh báo hay lỗi.
• .table-dark: Thường dùng để làm bảng nổi bật trong theme tối, hoặc trong các khu vực quản trị, dashboard.
• .table-light: Tạo cảm giác nhẹ nhàng, hiện đại. Thường dùng cho theme sáng hoặc các bảng không cần màu sắc trạng thái.

Tùy chỉnh bằng CSS:

Trong trường hợp bạn muốn sử dụng màu sắc không nằm trong các biến thể có sẵn của Bootstrap, bạn có thể bổ sung nó bằng class CSS tùy chỉnh và áp dụng cho table. Ví dụ:

<style>
.my-custom-table {
 background-color: #f0f9ff;
}
</style>

<table class="table my-custom-table">
 ...
</table>

Làm thế nào để căn chỉnh nội dung theo chiều dọc trong bảng?

Bootstrap hỗ trợ các class vertical alignment để canh nội dung theo chiều dọc như sau:

• .align-top: Căn nội dung lên trên cùng
• .align-middle: Căn giữa theo chiều dọc
• .align-bottom: Căn xuống dưới cùng.

Bạn có thể áp dụng các class này vào:

• Cả bảng: 

<table class="table align-middle">

• Một hàng:

<tr class="align-bottom">

• Một ô: 

<td class="align-top">

Tổng kết

Table trong Bootstrap là công cụ mạnh mẽ giúp lập trình viên trình bày dữ liệu một cách trực quan, dễ đọc và dễ quản lý. Với hệ thống class tiện ích đa dạng từ viền, màu sắc, canh lề đến hiệu ứng tương tác và khả năng responsive, Bootstrap giúp việc xây dựng bảng trở nên nhanh chóng, chuẩn đẹp mà không cần viết nhiều CSS thủ công. Qua bài viết này, ITviec hi vọng bạn đã nắm vững cách sử dụng, tuỳ chỉnh và kết hợp các tính năng của table trong Bootstrap để tạo ra những bảng dữ liệu chuyên nghiệp, phù hợp với mọi loại giao diện web từ cơ bản đến nâng cao.