Bootstrap - Bảng: Hướng dẫn thân thiện cho người mới bắt đầu

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng lặn vào thế giới tuyệt vời của các bảng Bootstrap. Đừng lo lắng nếu bạn chưa bao giờ viết mã trước đây - tôi sẽ là người bạn thân thiện dẫn đường cho bạn trong hành trình này, và chúng ta sẽ cùng nhau bước từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể tạo ra những bảng đẹp, đáp ứng như một chuyên gia!

Bảng Bootstrap là gì?

Trước khi chúng ta bắt đầu, hãy nói về bảng Bootstrap là gì. Hãy tưởng tượng bạn đang sắp xếp những cuốn sách yêu thích của mình trên kệ sách. Bảng Bootstrap giống như kệ sách đó, nhưng cho trang web của bạn! Chúng giúp bạn trình bày thông tin một cách ngăn nắp, tổ chức mà dễ dàng cho người truy cập của bạn đọc và hiểu.

Bảng đơn giản

Hãy bắt đầu từ những điều cơ bản. Dưới đây là cách bạn tạo một bảng Bootstrap đơn giản:

<table class="table">
<thead>
<tr>
<th>Tên</th>
<th>tuổi</th>
<th>Thành phố</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>London</td>
</tr>
</tbody>
</table>

Mã này tạo ra một bảng với ba cột: Tên, Tuổi và Thành phố. Phần <thead> xác định các tiêu đề bảng, và <tbody> chứa dữ liệu thực tế. class="table" là gì làm cho nó có phép màu Bootstrap!

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

Bootstrap cung cấp các phong cách khác nhau cho bảng của bạn. Nó giống như chọn các outfit khác nhau cho dữ liệu của bạn! Dưới đây là một số biến thể:

<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

Chỉ cần thêm các class này vào thẻ <table> của bạn để thay đổi tổng thể外观 của bảng. Đó là dễ dàng!

Bảng cóAccent

Muốn làm cho một số hàng hoặc ô nổi bật? Bootstrap có thể giúp bạn:

<table class="table">
<thead>
<tr>
<th>Cột 1</th>
<th>Cột 2</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>Hàng hoạt động</td>
<td>Đ standout</td>
</tr>
<tr>
<td>Hàng thông thường</td>
<td class="table-primary">Ô cóAccent</td>
</tr>
</tbody>
</table>

Class table-active làm nổi bật toàn bộ hàng, trong khi các class như table-primary có thể được sử dụng trên các ô riêng lẻ.

Hàng và cột có vạch kẻ

Nhớ những cuốn sổ có vạch kẻ như zebra mà bạn từng có trong trường không? Bạn cũng có thể làm điều tương tự với bảng của mình!

Đối với hàng có vạch kẻ:

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

Và đối với cột có vạch kẻ:

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

Hàng có thể tương tác

Muốn bảng của bạn trở nên tương tác? Hãy làm cho các hàng sáng lên khi bạn di chuột qua chúng:

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

Nó giống như phép thuật - hãy thử nó ra!

Bảng có viền và bảng không viền

Bạn có thể thêm viền vào bảng của mình:

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

Hoặc loại bỏ chúng hoàn toàn:

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

Bảng nhỏ

Để có một外观 nhỏ gọn hơn, sử dụng class table-sm:

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

Nó hoàn hảo cho khi bạn cần phù hợp rất nhiều dữ liệu trong một không gian nhỏ!

Phân cách nhóm bảng

Muốn nhóm dữ liệu của bạn? Sử dụng class table-group-divider:

<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dữ liệu 1</td>
<td>Dữ liệu 2</td>
</tr>
</tbody>
<tbody class="table-group-divider">
<tr>
<td>Dữ liệu 3</td>
<td>Dữ liệu 4</td>
</tr>
</tbody>
</table>

Điều này thêm một phân cách可见 giữa các nhóm thân bảng.

Căn chỉnh theo chiều dọc

Bạn có thể kiểm soát cách nội dung căn chỉnh theo chiều dọc trong các ô:

<table class="table table-sm table-bordered">
<tbody>
<tr class="align-bottom">
<td>Ô này và các hàng lân cận được căn chỉnh dưới</td>
<td>Bottom</td>
<td class="align-top">Ô này được căn chỉnh trên</td>
</tr>
</tbody>
</table>

Sử dụng align-middle cho căn chỉnh giữa và align-top cho căn chỉnh trên.

Bảng đáp ứng

Làm cho bảng của bạn trông đẹp trên tất cả các thiết bị với class table-responsive:

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

Điều này cho phép bảng của bạn cuộn theo chiều ngang trên các màn hình nhỏ hơn. Nó giống như cho bảng của bạn siêu năng lực để thích ứng với bất kỳ kích thước màn hình nào!

Ngoại bì

Bạn thậm chí có thể đặt bảng trong bảng! Dưới đây là cách:

<table class="table table-striped">
<thead>
<tr>
<th>Tên</th>
<th>Chi tiết</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hàng cha</td>
<td>
<table class="table table-sm">
<tr>
<td>Hàng nhúng 1</td>
</tr>
<tr>
<td>Hàng nhúng 2</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

Nó giống như những con búp bê Nga nhúng vào nhau, nhưng với bảng!

Giải phẫu của một bảng

Hãy phân tích các phần của một bảng:

Đầu bảng

<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
...
</table>

Phần <thead> chứa các tiêu đề cột của bạn.

Đế bảng

<table class="table">
...
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>

Sử dụng <tfoot> cho các footer của bảng, rất tốt cho các摘要 hoặc tổng số.

Caption

Thêm một tiêu đề cho bảng với <caption>:

<table class="table">
<caption>Danh sách người dùng</caption>
...
</table>

Nó giống như cho bảng của bạn một thẻ tên!

Kết luận

Và thế là bạn đã học cách tạo và thiết kế bảng bằng Bootstrap. Nhớ rằng, thực hành làm cho hoàn hảo, vì vậy đừng ngại thử nghiệm với các kết hợp khác nhau của các class này. Trước khi bạn biết điều đó, bạn sẽ tạo ra các bảng không chỉ tổ chức dữ liệu hiệu quả mà còn trông tuyệt vời!

Chúc các bạn may mắn và bảng của bạn luôn được bootstrapped một cách đẹp mắt!

Credits: Image by storyset