[Bootstrap] Phần 5: Bảng

Trong bài viết này, chúng ta sẽ học các các trang trí cho bảng trong Bootstrap.

Lớp .table: Lớp này để định nghĩa 1 bảng với các phong cách mặc định trong Bootstrap. Chúng ta xét đến đoạn mã sau:

<div class="container">
  <h2>Basic Table</h2>
  <p>Lớp .table thêm các phong cách cơ bản (padding và các dòng ngăn cách ngang) cho 1 bảng:</p>
  <table class="table">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Lớp .table-striped: Lớp này thêm các nền vạch ngang cho các dòng trong bảng

<div class="container">
  <h2>Các dòng vạch ngang</h2>
  <p>Lớp .table-striped thêm các nền vạch ngang cho bảng</p>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Lớp table-bordered: cho phép thêm viền ở các cạnh của bảng và ô.

<div class="container">
  <h2>Viền cho bảng</h2>
  <p>Lớp .table-bordered thêm các viền cho tất cả ô trong bảng</p>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Lớp .table-hover: Lớp định nghĩa phong cách khi rê chuột lên các dòng trong bảng, mặc định dòng được tô màu xám khi rê chuột lên.

<div class="container">
  <h2>Các dòng Hover</h2>
  <p>Lớp .table-hover cho phép kích hoạt trạng thái hover cho các dòng trong bảng</p>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Lớp .table-condensed: Lớp này làm bảng hẹp hơn bằng cách giảm các padding xuống 1 nửa.

Tô màu cho các dòng trong bảng
Trong phần này, chúng ta sử dụng các lớp .active, .success, .info, .warning, .danger để tô màu cho các dòng, cột và ô trong bảng ở vị trí phần tử td hoặc tr.

<div class="container">
  <h2>Các lớp ngữ cảnh</h2>
  <p>Dùng các lớp .active, .success, .info, .warning, .danger để tô màu cho bảng</p>
  <table class="table">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr class="danger">
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr class="info">
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Lớp .table-responsive: Lớp này giúp tạo ra 1 bảng đáp ứng thích hợp cho tất cả giao diện màn hình khác nhau mà không có sự thay đổi.

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

Như vậy, trong bài này, chúng ta đã học được các lớp cơ bản để định nghĩa cho phong cách bảng ở Bootstrap.