HomeTin Công Nghệ Phần 6: Bảng biểu

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

Trong nội dung này, bạn sẽ tìm hiểu một số lớp để khái niệm bảng (table) trong Bootstrap 4 cũng như các ví dụ dùng thử kèm theo.

Khái niệm 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 tách màu sáng (dividers). Để khái niệm một bảng dùng Bootstrap, bạn có thể thêm lớp .table ở phần tử table.

<!DOCTYPE htmlvàgt;
<html lang="en">
<headvàgt;
  <titlevàgt;Ví dụ bảng biểu trong Bootstrap 4 --- dammio.comvàlt;/titlevàgt;
  <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>
</headvàgt;
<bodyvàgt;

<div class="container">
  <h2vàgt;Basic Tablevàlt;/h2vàgt;
  <pvàgt;Lớp .table thêm vào một bảng (với các đường phân tách màu sáng) --- dammio.com:</pvàgt;            
  <table class="table">
    <theadvàgt;
      <trvàgt;
        <thvàgt;Tênvàlt;/thvàgt;
        <thvàgt;Họvàlt;/thvàgt;
        <thvàgt;Tin nhắn hộp thư onlinevàlt;/thvàgt;
      </trvàgt;
    </theadvàgt;
    <tbodyvàgt;
      <trvàgt;
        <tdvàgt;Dammiovàlt;/tdvàgt;
        <tdvàgt;Tavàlt;/tdvàgt;
        <tdvàgt;[email protected]</tdvàgt;
      </trvàgt;
      <trvàgt;
        <tdvàgt;Johnvàlt;/tdvàgt;
        <tdvàgt;Sonvàlt;/tdvàgt;
        <tdvàgt;[email protected]</tdvàgt;
      </trvàgt;
      <trvàgt;
        <tdvàgt;Samvàlt;/tdvàgt;
        <tdvàgt;Paradisevàlt;/tdvàgt;
        <tdvàgt;[email protected]</tdvàgt;
      </trvàgt;
    </tbodyvàgt;
  </tablevàgt;
</divvàgt;

</bodyvàgt;
</htmlvàgt;

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

Bạn có thể khái niệm 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 thấy 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 dùng thử, bạn phải nhúng đầy đủ phần head như ví dụ trước hết.

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

XEM THÊM  CẢNH BÁO: 5 dấu hiệu nhận biết để không bị lừa khi ...
XEM THÊM  Mẫu Báo cáo tài chính theo Thông tư 133 mới nhất

Bảng có viền (border)

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

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 thái của phần tử đó sẽ bị thay đổi. Trong bảng, hiệu ứng hover sẽ ứng 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.

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.

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ể phối 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">
  <h2vàgt;Basic Tablevàlt;/h2vàgt;
  <pvàgt;Lớp .table-dark và .table-striped dùng để khái niệm bảng có màu tối, dòng xen kẽ có nền xám --- dammio.com:</pvàgt;            
  <table class="table table-dark table-striped">
    <theadvàgt;
      <trvàgt;
        <thvàgt;Tênvàlt;/thvàgt;
        <thvàgt;Họvàlt;/thvàgt;
        <thvàgt;Tin nhắn hộp thư onlinevàlt;/thvàgt;
      </trvàgt;
    </theadvàgt;
    <tbodyvàgt;
      <trvàgt;
        <tdvàgt;Dammiovàlt;/tdvàgt;
        <tdvàgt;Tavàlt;/tdvàgt;
        <tdvàgt;[email protected]</tdvàgt;
      </trvàgt;
      <trvàgt;
        <tdvàgt;Johnvàlt;/tdvàgt;
        <tdvàgt;Sonvàlt;/tdvàgt;
        <tdvàgt;[email protected]</tdvàgt;
      </trvàgt;
      <trvàgt;
        <tdvàgt;Samvàlt;/tdvàgt;
        <tdvàgt;Paradisevàlt;/tdvàgt;
        <tdvàgt;[email protected]</tdvàgt;
      </trvàgt;
    </tbodyvàgt;
  </tablevàgt;
</divvàgt;

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

Để thêm hiệu ứng hover vào các dòng ở bảng, tất cả 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">
  <h2vàgt;Basic Tablevàlt;/h2vàgt;
  <pvàgt;Lớp .table-dark và .table-striped dùng để khái niệm bảng có màu tối, dòng xen kẽ có nền xám --- dammio.com:</pvàgt;            
  <table class="table table-dark table-hover">
    <theadvàgt;
      <trvàgt;
        <thvàgt;Tênvàlt;/thvàgt;
        <thvàgt;Họvàlt;/thvàgt;
        <thvàgt;Tin nhắn hộp thư onlinevàlt;/thvàgt;
      </trvàgt;
    </theadvàgt;
    <tbodyvàgt;
      <trvàgt;
        <tdvàgt;Dammiovàlt;/tdvàgt;
        <tdvàgt;Tavàlt;/tdvàgt;
        <tdvàgt;[email protected]</tdvàgt;
      </trvàgt;
      <trvàgt;
        <tdvàgt;Johnvàlt;/tdvàgt;
        <tdvàgt;Sonvàlt;/tdvàgt;
        <tdvàgt;[email protected]</tdvàgt;
      </trvàgt;
      <trvàgt;
        <tdvàgt;Samvàlt;/tdvàgt;
        <tdvàgt;Paradisevàlt;/tdvàgt;
        <tdvàgt;[email protected]</tdvàgt;
      </trvàgt;
    </tbodyvàgt;
  </tablevàgt;
</divvàgt;

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.

XEM THÊM  Tự Học Bảng Chữ Cái Hiragana Trong Tiếng Nhật, Học Bảng Chữ Cái Hiragana Trong Tiếng Nhật
XEM THÊM  Bảng 1 Một Số Nguyên Tố Hóa Học Lớp 8, Bảng Hóa Trị Và Công Thức Hóa 8

Các lớp hoàn cảnh

Tương tự như khái niệm hoàn 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 hoàn cảnh (Contextual Classes) để khái niệm màu sắc cho bảng. Các lớp này có thể dùng cho toàn thể bảng (table), các dòng (tr) hoặc các ô trong bảng (td).

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

  • .table-primary: màu sắc, hướng dẫn một hàng động trọng yếu
  • .table-success: màu xanh lá, hướng dẫn các hành động tích cực hoặc thành công
  • .table-danger: màu đỏ, hướng dẫn nhắc nhở hoặc hành động nguy hiểm
  • .table-info: màu xanh sáng, hướng dẫn hành động thông tin
  • .table-warning: màu cam, hướng dẫn nhắc nhở cần lưu ý
  • .table-active: màu xám, hướng 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, nêu ra một hành động ít trọng yếu
  • .table-light: màu nền xám sáng
  • .table-dark: màu nền tối

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

Để khái niệm 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 này 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.

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">
  <h2vàgt;Bảng hẹpvàlt;/h2vàgt;
  <pvàgt;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.comvàlt;/pvàgt;
  <table class="table table-bordered table-sm">
    <theadvàgt;
      <trvàgt;
        <thvàgt;Tênvàlt;/thvàgt;
        <thvàgt;Họvàlt;/thvàgt;
        <thvàgt;Tin nhắn hộp thư onlinevàlt;/thvàgt;
      </trvàgt;
    </theadvàgt;
    <tbodyvàgt;
      <trvàgt;
        <tdvàgt;Dammiovàlt;/tdvàgt;
        <tdvàgt;Tavàlt;/tdvàgt;
        <tdvàgt;[email protected]</tdvàgt;
      </trvàgt;
      <trvàgt;
        <tdvàgt;Dammiovàlt;/tdvàgt;
        <tdvàgt;Tavàlt;/tdvàgt;
        <tdvàgt;[email protected]</tdvàgt;
      </trvàgt;
      <trvàgt;
        <tdvàgt;Dammiovàlt;/tdvàgt;
        <tdvàgt;Tavàlt;/tdvàgt;
        <tdvàgt;[email protected]</tdvàgt;
      </trvàgt;
    </tbodyvàgt;
  </tablevàgt;
</divvàgt;

Bảng thỏa mãn

Với nhu cầu thiết kế website thỏa mãn trên các kích thước màn hình ở các thiết bị khác nhau (máy tính, desktop, tablet, mobile) thì lớp .table-responsive sẽ giúp bảng biểu hiển thị trên toàn bộ 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 chúng ta nên dùng lớp này để khái niệm cho bảng biểu.

XEM THÊM  Bài tập xác suất thống kê hay có lời giải chi tiết
XEM THÊM  Làng văn hóa 54 dân tộc Việt Nam hình ảnh, bảng giá dịch vụ mới 2021

Lớp .table-responsive sẽ tạo ra một bảng thỏa mãn: 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 nhỏ hơn 992px. Còn khi kích thước màn hình to 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...
  </tablevàgt;
</divvàgt;

Ngoài ra, tùy thuộc vào kích thước màn hình, bạn có thể khái niệm khi nào cần dùng thanh cuộc với 4 lớp:

  • .table-responsive-sm: nhỏ hơn 576px
  • .table-responsive-md: nhỏ hơn 768px
  • .table-responsive-lg: nhỏ hơn 992px
  • .table-responsive-xl: nhỏ hơn 1200px

Ví dụ khái niệm bảng thỏa mãn nếu kích thước nhỏ hơn 576px.

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

Tổng kết

Nội dung đã nêu cách sử dụng các lớp để khái niệm cho phong thái bảng biểu trong Bootstrap 4, hơi một tí khác biệt so với Bootstrap 3. Mời bạn tiếp tục, theo dõi nội dung tiếp theo.

Xem thêm bài viết thuộc chuyên mục: Tin Công Nghệ
RELATED ARTICLES

Most Popular

Recent Comments