Chỉ vài dòng code đơn giản sử dụng bootstrap 3 chúng ta đã có thể dễ dàng tạo ra một bảng (table). Tạo bảng trong Bootstrap 3 vô cùng dễ dàng và cũng rất dễ dàng tinh chỉnh với table html thông thường. Dưới đây là cách tạo bảng và các thao tác với bảng trong Bootstrap 3 các bạn nhé!
Tạo table với boostrap 3
Để tạo một table đơn giản nhưng đẹp mắt trong bootstrap 3 thì ta chỉ cần tuân theo cấu trúc HTML Table bình thường, đồng thời thêm một class="table" vào. Một lưu ý nữa lớp .table trong bootstrap nó sẽ tự nhận diện hai group thead dùng hiển thị title và tbody dùng hiển thị nội dung nên bạn phải tuân thủ theo cấu trúc này nhé.
Ví dụ: Hiển thị một table đơn giản với bootstrap 3 (Xem Demo)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Simple Tables</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.example{
margin: 20px;
}
</style>
</head>
<body>
<div class="example">
<div class="container">
<div class="row">
<h2>Bảng (Table) đơn giản</h2>
<table class="table">
<thead>
<tr>
<th>STT</th>
<th>Họ Tên</th>
<th>Giới tính</th>
<th>Email</th>
<th>Địa chỉ</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Vô Danh</td>
<td>Nam</td>
<td>vodanh@mail.com</td>
<td>192 Trần Duy Hưng</td>
</tr>
<tr>
<td>2</td>
<td>Hoài Tâm</td>
<td>Nam</td>
<td>hoaitam998@mail.com</td>
<td>113 Nguyễn Trãi</td>
</tr>
<tr>
<td>3</td>
<td>Quốc Sư</td>
<td>Nam</td>
<td>quocsunhuke@mail.com</td>
<td>19 Hồ Tùng Mậu</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>Kết quả như sau:
Lớp .table-striped:
Class (lớp) .table-striped thêm các nền vạch ngang cho các dòng trong bảng
Ví dụ:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 Simple Tables</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> .example{ margin: 20px; } </style> </head> <body> <div class="example"> <div class="container"> <div class="row"> <h2 style="color:magenta;">Bảng (Table) sử dụng table-striped</h2> <table class="table table-striped"> <thead> <tr> <th>STT</th> <th>Họ Tên</th> <th>Giới tính</th> <th>Email</th> <th>Địa chỉ</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Vô Danh</td> <td>Nam</td> <td>vodanh@mail.com</td> <td>192 Trần Duy Hưng</td> </tr> <tr> <td>2</td> <td>Hoài Tâm</td> <td>Nam</td> <td>hoaitam998@mail.com</td> <td>113 Nguyễn Trãi</td> </tr> <tr> <td>3</td> <td>Quốc Sư</td> <td>Nam</td> <td>quocsunhuke@mail.com</td> <td>19 Hồ Tùng Mậu</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
Kết quả
Lớp table-bordered:
Class table-bordered cho phép thêm viền ở các cạnh của bảng và ô.
Ví dụ:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 Simple Tables</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> .example{ margin: 20px; } </style> </head> <body> <div class="example"> <div class="container"> <div class="row"> <h2 style="color:orange;">Bảng (Table) sử dụng table-bordered</h2> <table class="table table-bordered"> <thead> <tr> <th>STT</th> <th>Họ Tên</th> <th>Giới tính</th> <th>Email</th> <th>Địa chỉ</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Vô Danh</td> <td>Nam</td> <td>vodanh@mail.com</td> <td>192 Trần Duy Hưng</td> </tr> <tr> <td>2</td> <td>Hoài Tâm</td> <td>Nam</td> <td>hoaitam998@mail.com</td> <td>113 Nguyễn Trãi</td> </tr> <tr> <td>3</td> <td>Quốc Sư</td> <td>Nam</td> <td>quocsunhuke@mail.com</td> <td>19 Hồ Tùng Mậu</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
Kết quả như sau:
Lớp .table-hover:
Class .table-hover đị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.
Lớp .table-condensed:
Class .table-condensed làm bảng hẹp hơn bằng cách giảm các padding xuống 1 nửa.
Lớp .table-condensed
Stylesheet & Responsive màu sắc cho table
Stylesheet (Tô màu cho các dòng trong bảng)
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.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Simple Tables</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.example{
margin: 20px;
}
</style>
</head>
<body>
<div class="example">
<div class="container">
<div class="row">
<h2 style="color:orange;">Tô màu cho Bảng (Table)</h2>
<table class="table table-bordered">
<thead>
<tr class="active">
<th>STT</th>
<th>Họ Tên</th>
<th>Giới tính</th>
<th>Email</th>
<th>Địa chỉ</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>Vô Danh</td>
<td>Nam</td>
<td>vodanh@mail.com</td>
<td>192 Trần Duy Hưng</td>
</tr>
<tr class="info">
<td>2</td>
<td>Hoài Tâm</td>
<td>Nam</td>
<td>hoaitam998@mail.com</td>
<td>113 Nguyễn Trãi</td>
</tr>
<tr class="warning">
<td>3</td>
<td>Quốc Sư</td>
<td>Nam</td>
<td>quocsunhuke@mail.com</td>
<td>19 Hồ Tùng Mậu</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>Kết quả:
Lớp .table-responsive:
Class .table-responsive giúp chúng ta 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>
Kết quả:
Lời kết:
Vậy là chúng ta đã biết cách tạo bảng và stylesheet table trong bootstrap 3 rồi đấy. Hy vọng các bạn sẽ lựa chọn cho mình kiểu table ưng ý nhất, hẹn gặp các bạn ở các bài tiếp theo nhé!
