[Bootstrap 4] Phần 6: Bảng biểu

Trong bài viết này, bạn sẽ tìm hiểu một số lớp để định nghĩa bảng (table) trong Bootstrap 4 cũng như các ví dụ demo kèm theo.

Định nghĩa bảng biểu cơ bản

Các bảng trong phiên bản Bootstrap 4 chứa các đường phân chia màu sáng (dividers). Để định nghĩa một bảng dùng Bootstrap, bạn có thể thêm lớp .table ở phần tử table.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ bảng biểu trong Bootstrap 4 --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic Table</h2>
  <p>Lớp .table thêm vào một bảng (với các đường phân chia màu sáng) --- dammio.com:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Son</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Sam</td>
        <td>Paradise</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Màu nền cho các dòng

Bạn có thể định nghĩa màu nền nhạt xen kẽ các dòng chẵn, lẻ bằng cách thêm lớp .table-striped để giúp người dùng dễ nhìn và nhận biết thông tin khác biệt giữa các dòng trong bảng. Từ phần này trở đi, các ví dụ chỉ hiển thị phần mã HTM bảng biểu, khi demo, bạn phải nhúng đầy đủ phần head như ví dụ đầu tiên.

<div class="container">
  <h2>Basic Table</h2>
  <p>Lớp .table-striped thêm vào một bảng để hiển thị màu nền các dòng lẻ --- dammio.com:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Son</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Sam</td>
        <td>Paradise</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Ở ví dụ trên, bạn có thể thấy dòng lẻ (1, 3) có nền màu xám.

Bảng có viền (border)

Để thêm viền bao quanh bảng, bạn có thể thêm lớp .table-bordered.

<div class="container">
  <h2>Basic Table</h2>
  <p>Lớp .table-bordered để định nghĩa viền bao quanh bảng --- dammio.com:</p>            
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Son</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Sam</td>
        <td>Paradise</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Dòng chứa hiệu ứng hover

Hiệu ứng hover là hiệu ứng khi bạn rê chuột lên một phần tử HTML nào đó thì phong cách của phần tử đó sẽ bị thay đổi. Trong bảng, hiệu ứng hover sẽ áp dụng cho các dòng, khi người dùng rê chuột lên một dòng bất kỳ thì dòng đó sẽ có màu nền màu xám nhạt. Để thêm hiệu ứng hover vào các dòng, bạn có thể thêm lớp .table-hover.

<div class="container">
  <h2>Basic Table</h2>
  <p>Lớp .table-hover để định nghĩa hiệu ứng hover cho các dòng --- dammio.com:</p>            
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Son</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Sam</td>
        <td>Paradise</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Bảng có màu đen/tối

Nếu muốn bảng có màu đen hoặc màu tối, bạn có thể thêm lớp .table-dark, khi đó màu chữ sẽ là màu trắng để độc giả có thể nhìn thấy nội dung.

<div class="container">
  <h2>Basic Table</h2>
  <p>Lớp .table-dark dùng để định nghĩa bảng có màu tối --- dammio.com:</p>            
  <table class="table table-dark">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Son</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Sam</td>
        <td>Paradise</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Bảng có màu nền tối ở các dòng

Tương tự như phần màu nền xám cho các dòng, bạn có thể kết hợp 2 lớp .table-dark và .table-striped để tạo ra bảng có nền tối, các nền cho các dòng xen kẽ màu xám.

<div class="container">
  <h2>Basic Table</h2>
  <p>Lớp .table-dark và .table-striped dùng để định nghĩa bảng có màu tối, dòng xen kẽ có nền xám --- dammio.com:</p>            
  <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Son</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Sam</td>
        <td>Paradise</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Bảng tối có hiệu ứng hover

Để thêm hiệu ứng hover vào các dòng ở bảng, chúng ta có thể dùng lớp .table-hover. Khi đó, mỗi dòng của bảng khi rê chuột lên thì sẽ có nền màu xám nhạt.

<div class="container">
  <h2>Basic Table</h2>
  <p>Lớp .table-dark và .table-striped dùng để định nghĩa bảng có màu tối, dòng xen kẽ có nền xám --- dammio.com:</p>            
  <table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Son</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Sam</td>
        <td>Paradise</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Bảng không viền

Nếu bạn muốn tạo 1 bảng không có viền, kể cả bên trong và bên ngoài, hãy dùng lớp .table-borderless.

<div class="container">
  <h2>Basic Table</h2>
  <p>Lớp .table-borderless dùng để tạo bảng không có viền trong và ngoài --- dammio.com:</p>            
  <table class="table table-borderless">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Son</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Sam</td>
        <td>Paradise</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Các lớp bối cảnh

Tương tự như định nghĩa bối cảnh màu sắc văn bản ở bài trước, bạn cũng có thể dùng các lớp bối cảnh (Contextual Classes) để định nghĩa màu sắc cho bảng. Các lớp này có thể dùng cho toàn bộ bảng (table), các dòng (tr) hoặc các ô trong bảng (td).

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Các lớp bối cảnh</h2>
  <p>Các lớp bối cảnh dùng để định nghĩa màu sắc cho bảng, các dòng hoặc các ô. Các lớp sử dụng bao gồm: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light và .table-dark:</p>
  <table class="table">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>      
      <tr class="table-primary">
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-success">
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-danger">
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-info">
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-warning">
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-active">
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-secondary">
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-light">
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Trong ví dụ trên, các lớp bối cảnh sử dụng là:

.table-primary: màu sắc, chỉ dẫn một hàng động quan trọng
.table-success: màu xanh lá, chỉ dẫn các hành động tích cực hoặc thành công
.table-danger: màu đỏ, chỉ dẫn cảnh báo hoặc hành động nguy hiểm
.table-info: màu xanh sáng, chỉ dẫn hành động thông tin
.table-warning: màu cam, chỉ dẫn cảnh báo cần chú ý
.table-active: màu xám, chỉ dẫn màu xám dùng cho hiệu ứng hover trên dòng hoặc ô của bảng
.table-secondary: màu xám, chỉ ra một hành động ít quan trọng
.table-light: màu nền xám sáng
.table-dark: màu nền tối

Liên quan: [Bootstrap 4] Phần 17: Phân trang ảo cho bảng biểu (Table) bằng Bootstrap 4 và DataTables

Màu sắc ở các cột tiêu đề bảng

Để định nghĩa màu nền và màu chữ cho các cột tiêu đề, bạn có 2 lớp lựa chọn đó là: .thead-dark dùng cho nền tối chữ trắng và .thead-light dùng cho nền xám nhạt và chữ đen.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Màu sắc các cột tiêu đề</h2>
  <p>Lớp .thead-dark có thể thêm ở màu nền đen vào các cột tiêu đề, và lớp .thead-light thêm vào các cột tiêu đề nền xám:</p>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Bảng có độ rộng các dòng nhỏ

Lớp .table-sm giúp tạo bảng với các dòng hẹp bằng cách thu gọn độ padding giữa các ô chỉ còn 50%.

<div class="container">
  <h2>Bảng hẹp</h2>
  <p>Lớp .table-sm dùng để tạo bảng nhỏ với với độ padding giữa các ô giảm một nửa: --- dammio.com</p>
  <table class="table table-bordered table-sm">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Dammio</td>
        <td>Ta</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Bảng đáp ứng

Với nhu cầu thiết kế website đáp ứng trên các kích thước màn hình ở các thiết bị khác nhau (laptop, desktop, tablet, mobile) thì lớp .table-responsive sẽ giúp bảng biểu hiển thị trên tất cả màn hình mà không bị bể giao diện. Hơn nữa, trong quá trình thiết kế website, chúng tôi cũng khuyên bạn nên dùng lớp này để định nghĩa cho bảng biểu.

Lớp .table-responsive sẽ tạo ra một bảng đáp ứng: một thanh cuộn ngang được thêm vào bảng nếu kích thước màn hình trình duyệt bé hơn 992px. Còn khi kích thước màn hình lớn hơn 992px thì không có gì thay đổi.

<div class="table-responsive">
  <table class="table">
    nội dung bảng biểu cần địn nghĩa...
  </table>
</div>

Ngoài ra, tùy theo kích thước màn hình, bạn có thể định nghĩa khi nào cần dùng thanh cuộc với 4 lớp:

.table-responsive-sm: bé hơn 576px
.table-responsive-md: bé hơn 768px
.table-responsive-lg: bé hơn 992px
.table-responsive-xl: bé hơn 1200px

Ví dụ định nghĩa bảng đáp ứng nếu kích thước bé hơn 576px.

<div class="table-responsive-sm">
  <table class="table">
    nội dung bảng --- dammio.com
  </table>
</div>

Kết luận

Bài viết đã nêu cách sử dụng các lớp để định nghĩa cho phong cách bảng biểu trong Bootstrap 4, hơi một chút khác biệt so với Bootstrap 3. Mời bạn tiếp tục, theo dõi bài viết tiếp theo.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2018). [Bootstrap 4] Phần 6: Bảng biểu. https://www.dammio.com/2018/08/19/bootstrap-4-phan-6-bang-bieu.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[Bootstrap 4] Phần 6: Bảng biểu}, year = {2018}, url = {https://www.dammio.com/2018/08/19/bootstrap-4-phan-6-bang-bieu}, urldate = {2025-03-21} }

Kết nối