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:
<divclass="container"><h2>Basic Table</h2><p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p><tableclass="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>
2. Sử dụng Striped Rows trong Bootstrap 4
Nếu chúng ta muốn trang trí các dòng với màu sắc khác nhau. Ví dụ như các dòng lẻ màu trắng và các dòng chẵn màu đà. Thì ta có thể dùng class .table-striped.
<divclass="container"><h2>Basic Table</h2><p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p><tableclass="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>
2. Sử dụng Striped Rows trong Bootstrap 4
Nếu chúng ta muốn trang trí các dòng với màu sắc khác nhau. Ví dụ như các dòng lẻ màu trắng và các dòng chẵn màu đà. Thì ta có thể dùng class .table-striped.
<divclass="container"><h2>Basic Table</h2><p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p><tableclass="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>
2. Sử dụng Striped Rows trong Bootstrap 4
Nếu chúng ta muốn trang trí các dòng với màu sắc khác nhau. Ví dụ như các dòng lẻ màu trắng và các dòng chẵn màu đà. Thì ta có thể dùng class .table-striped.
<divclass="container"><h2>Basic Table</h2><p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p><tableclass="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>
2. Sử dụng Striped Rows trong Bootstrap 4
Nếu chúng ta muốn trang trí các dòng với màu sắc khác nhau. Ví dụ như các dòng lẻ màu trắng và các dòng chẵn màu đà. Thì ta có thể dùng class .table-striped.
<divclass="container"><h2>Basic Table</h2><p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p><tableclass="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>
2. Sử dụng Striped Rows trong Bootstrap 4
Nếu chúng ta muốn trang trí các dòng với màu sắc khác nhau. Ví dụ như các dòng lẻ màu trắng và các dòng chẵn màu đà. Thì ta có thể dùng class .table-striped.
<divclass="container"><h2>Striped Rows</h2><p>The .table-striped class adds zebra-stripes to a table:</p><tableclass="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>
3. Tạo border trong table
Chúng ta sử dụng class .table-bordered để tạo border cho table như sau:
<divclass="container"><h2>Bordered Table</h2><p>The .table-bordered class adds borders on all sides of the table and the cells:</p><tableclass="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>
4. Tạo hiệu ứng cho các dòng trong table
Chúng ta muốn khi con chuột người dùng di chuyển vào các dòng trong table thì mình làm hiệu ứng sáng dòng đó lên. Thì ta sử dụng class .table-hover
<divclass="container"><h2>Hover Rows</h2><p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p><tableclass="table table-hover"><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
Chúng ta sử dụng class .table-borderless để xóa border trong table
