Login

Học Bootstrap 4

  Trang Chủ / Tin tức / Học Bootstrap 4

Bảng (Table) trong Bootstrap 4

Bảng biểu (Table) là một phần vô cùng quan trọng trong bất kì Website nào. Hầu như không có website nào không sử dụng đến chúng vì thế, trong bài này, chúng ta hãy cùng nhau tìm hiểu hệ thống Table class trong Bootstrap 4 

Bảng trong Boostrap 4 được định nghĩa bằng cách thêm class .table ở phần tử <table>

Table cơ bản (basic)

Đầu tiên, để có 1 bảng đơn giản trong Bootstrap 4, các bạn sử dụng class .table trong thẻ <table>, như sau:

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  background-color: transparent;
}
 
.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}
 
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}
 
.table tbody + tbody {
  border-top: 2px solid #dee2e6;
}
 
.table .table {
  background-color: #fff;
}

 

<table class="table">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hoàng Long</td>
        <td>Nguyễn</td>
        <td>tieulonglanh@gmail.com</td>
      </tr>
      <tr>
        <td>FullStack</td>
        <td>Academy</td>
        <td>cskh@baobinh.net</td>
      </tr>
      <tr>
        <td>Văn</td>
        <td>Sơn</td>
        <td>vanson@gmail.com</td>
      </tr>
  </table>

Kết quả:



Table có background-color cho các <tr>

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 class .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.

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

Ví dụ:

<table class="table table-striped">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hoàng Long</td>
        <td>Nguyễn</td>
        <td>tieulonglanh@gmail.com</td>
      </tr>
      <tr>
        <td>FullStack</td>
        <td>Academy</td>
        <td>tieulonglanh@gmail.com</td>
      </tr>
      <tr>
        <td>Thu</td>
        <td>Candy</td>
        <td>thuthu@gmail.com</td>
      </tr>
  </table>



 

Table có border ngăn cách

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

Bootstrap 4 quy định class này như sau:

.table-bordered {
  border: 1px solid #dee2e6;
}
 
.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}
 
.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}



Table không có border

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

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}



Hover cho bảng

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ì trang trí 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 <tr>, 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.

.table-hover .table-primary:hover {
  background-color: #9fcdff;
}
 
.table-hover .table-primary:hover &gt; td,
.table-hover .table-primary:hover &gt; th {
  background-color: #9fcdff;
}



Bảng tối màu (màu đen – dark)

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.

.table-dark,
.table-dark &gt; th,
.table-dark &gt; td {
  background-color: #c6c8ca;
}
 
.table-hover .table-dark:hover {
  background-color: #b9bbbe;
}
 
.table-hover .table-dark:hover &gt; td,
.table-hover .table-dark:hover &gt; th {
  background-color: #b9bbbe;
}




Kết luận

Vậy là các bạn đã học được cách sử dụng các class bootstrap để xây dựng bảng biểu (Table) và trang trí, tạo hiệu ứng cho chúng. Hẹn gặp lại các bạn trong bài tiếp theo.

bootstrap bootstrap 4. table bootstrap 4 table bootstrap

Danh Mục Lập Trình

Baobinh.net
TIN LIÊN QUAN
DANH MỤC GIAO DIỆN

Bài viết ngẫu nhiên

Danh mục lập trình