Nội dung bài viết
Giới thiệu nội dung bài viết
Tiếp nối các bài viết chia sẻ về các thuộc tính sử dụng trong lập trình web Bootstrap. Trong bài viết hôm nay, anh sẽ trình bày cho các bạn về chủ đề sử dụng thuộc tính bảng (table) trong Bootstrap. Khi lập trình web, thao tác với một số các trang website, một số các trang web có dạng dữ liệu cần biểu diễn dưới dạng bảng.lập trình web Bootstrap. Trong bài viết hôm nay, anh sẽ trình bày cho các bạn về chủ đề sử dụng thuộc tính bảng (table) trong Bootstrap. Khi lập trình web, thao tác với một số các trang website, một số các trang web có dạng dữ liệu cần biểu diễn dưới dạng bảng.
Để giúp các bạn có thể nắm được cách thao tác với thuộc tính bảng (table) trong Bootstrap để áp dụng hiệu quả vào quá trình làm các dự án web, hôm nay anh sẽ hướng dẫn cụ thể cách làm với bảng như sử dụng striped Rows, tạo border, tạo hiệu ứng, xóa border, sử dụng màu sắc, header, responsive.bảng (table) trong Bootstrap để áp dụng hiệu quả vào quá trình làm các dự án web, hôm nay anh sẽ hướng dẫn cụ thể cách làm với bảng như sử dụng striped Rows, tạo border, tạo hiệu ứng, xóa border, sử dụng màu sắc, header, responsive.
1. Table trong Bootstrap 4
Để sử dụng được table trong bootstrap chúng ta thêm class .table như sau:
Ví dụ như ta có các màu sau.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td></td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td></td> </tr> <tr> <td>July</td> <td>Dooley</td> <td></td> </tr> </tbody> </table> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td></td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td></td> </tr> <tr> <td>July</td> <td>Dooley</td> <td></td> </tr> </tbody> </table> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td></td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td></td> </tr> <tr> <td>July</td> <td>Dooley</td> <td></td> </tr> </tbody> </table> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td></td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td></td> </tr> <tr> <td>July</td> <td>Dooley</td> <td></td> </tr> </tbody> </table> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td></td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td></td> </tr> <tr> <td>July</td> <td>Dooley</td> <td></td> </tr> </tbody> </table> </div> | <div class="container"> <h2>Striped Rows</h2> <p>The .table-striped class adds zebra-stripes to a table:</p> <table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td></td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td></td> </tr> <tr> <td>July</td> <td>Dooley</td> <td></td> </tr> </tbody> </table> </div> | <div class="container"> <h2>Bordered Table</h2> <p>The .table-bordered class adds borders on all sides of the table and the cells:</p> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td></td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td></td> </tr> <tr> <td>July</td> <td>Dooley</td> <td></td> </tr> </tbody> </table> </div> | 5. Xóa border trong table |