ViệtBootstrap 5 cung cấp các công cụ và class tiện ích mạnh mẽ để định dạng và tùy chỉnh bảng, giúp bảng trở nên đẹp mắt và dễ đọc hơn. Từ việc tạo bảng cơ bản đến bảng có màu sắc, đường viền và bố cục nâng cao, Bootstrap giúp bạn tối ưu hóa cách hiển thị dữ liệu một cách trực quan và nhất quán. Trong bài viết này, CodeTutHub sẽ hướng dẫn bạn cách sử dụng và tùy chỉnh bảng trong Bootstrap 5 với các ví dụ cụ thể.
1. Table trong Bootstrap 5
Để tạo bảng trong Bootstrap 5, bạn cần sử dụng class table để định dạng các phần tử <table>. Class table giúp thêm khoảng cách giữa các hàng và làm bảng dễ đọc hơn.
Ví dụ table cơ bản
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Tên</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>nva@example.com</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị B</td>
<td>ttb@example.com</td>
</tr>
</tbody>
</table>Trong ví dụ trên, class table đã giúp bảng có khoảng cách hợp lý, làm cho các hàng và cột dễ đọc.
2. Bảng có đường viền (table-bordered)
Bạn có thể sử dụng class table-bordered để thêm đường viền xung quanh bảng và các ô, tạo nên giao diện rõ ràng và gọn gàng hơn.
Ví dụ bảng có đường viền
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Tên</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>nva@example.com</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị B</td>
<td>ttb@example.com</td>
</tr>
</tbody>
</table>3. Bảng có màu nền xen kẽ (table-striped)
Class table-striped giúp tạo màu nền xen kẽ cho các hàng, làm cho bảng dễ theo dõi hơn, đặc biệt là khi bảng có nhiều dữ liệu.
Ví dụ table có màu nền xen kẽ
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Tên</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>nva@example.com</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị B</td>
<td>ttb@example.com</td>
</tr>
</tbody>
</table>4. Bảng có hiệu ứng khi di chuột (table-hover)
Khi muốn làm nổi bật hàng khi di chuột qua, bạn có thể sử dụng class table-hover. Hiệu ứng này rất hữu ích khi cần làm nổi bật các hàng để người dùng dễ dàng tập trung vào dòng dữ liệu hiện tại.
Ví dụ bảng có hiệu ứng khi di chuột
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Tên</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>nva@example.com</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị B</td>
<td>ttb@example.com</td>
</tr>
</tbody>
</table>5. Bảng tối giản không viền (table-borderless)
Nếu bạn muốn tạo một bảng không có đường viền giữa các ô, hãy sử dụng class table-borderless. Class này giúp tạo bảng tối giản, đặc biệt hữu ích cho các bố cục hiện đại và gọn gàng.
Ví dụ bảng không viền
<table class="table table-borderless">
<thead>
<tr>
<th>#</th>
<th>Tên</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>nva@example.com</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị B</td>
<td>ttb@example.com</td>
</tr>
</tbody>
</table>6. Bảng nhỏ gọn (table-sm)
Class table-sm thu nhỏ kích thước của bảng, làm cho bảng nhỏ gọn hơn. Đây là lựa chọn tuyệt vời khi muốn tối ưu hóa không gian trên giao diện có nhiều bảng hoặc dữ liệu.
Ví dụ table nhỏ gọn
<table class="table table-sm">
<thead>
<tr>
<th>#</th>
<th>Tên</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>nva@example.com</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị B</td>
<td>ttb@example.com</td>
</tr>
</tbody>
</table>7. Căn chỉnh và màu sắc cho table
Bootstrap 5 cung cấp các class để dễ dàng căn chỉnh và thêm màu sắc cho bảng, làm nổi bật các thông tin quan trọng.
- table-dark: Tạo bảng với nền tối.
- table-light: Tạo bảng với nền sáng (mặc định).
- text-center: Căn giữa nội dung các cột.
- text-end: Căn phải nội dung các cột.
Ví dụ table nền tối
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
<th>Tên</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>nva@example.com</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị B</td>
<td>ttb@example.com</td>
</tr>
</tbody>
</table>8. Table cuộn ngang cho dữ liệu lớn
Khi hiển thị bảng có nhiều cột và nội dung lớn, class table-responsive giúp bảng cuộn ngang trên các màn hình nhỏ, giữ cho giao diện không bị tràn.
Ví dụ table cuộn ngang
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Tên</th>
<th>Email</th>
<th>Địa chỉ</th>
<th>Số điện thoại</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>nva@example.com</td>
<td>123 Đường A, TP.HCM</td>
<td>0123456789</td>
</tr>
</tbody>
</table>
</div>9. Kết luận
Với các class tiện ích của Bootstrap 5 dành cho bảng, bạn có thể dễ dàng tùy chỉnh và tối ưu hóa bảng để hiển thị dữ liệu một cách đẹp mắt và dễ theo dõi. Từ bảng cơ bản, bảng có đường viền, màu nền xen kẽ cho đến bảng cuộn ngang, bạn có thể xây dựng nhiều loại bảng phù hợp với nhu cầu hiển thị dữ liệu. Hãy thử áp dụng các ví dụ trong bài viết để tạo bảng chuyên nghiệp cho trang web của bạn!
