Bootstrap - Table

Table trong bootstrap bao gồm một lớp đệm và một đường chỉ ngang để phân biệt giữa các dòng.
Thêm .table vào bảng :

Ví dụ :

1. <table class="table">
2. <tr>
3. <th>Firstname</th>
4. <th>Lastname</th>
5. <th>Email</th>
6. </tr>
7. <tr>
8. <td>John</td>
9. <td>Doe</td>
10. <td>john@example.com</td>
11. </tr>
12. <tr>
13. <td>Mary</td>
14. <td>Moe</td>
15. <td>mary@example.com</td>
16. </tr>
17. <tr>
18. <td>July</td>
19. <td>Dooley</td>
20. <td>july@example.com</td>
21. </tr>
22. </table>

Kết quả :

---

Tạo nền xen kẻ

Sử dụng lớp .table-striped để tạo nền xen kẻ trong bảng :

Ví dụ :

1. <table class="table table-striped">
2. <tr>
3. <th>Firstname</th>
4. <th>Lastname</th>
5. <th>Email</th>
6. </tr>
7. <tr>
8. <td>John</td>
9. <td>Doe</td>
10. <td>john@example.com</td>
11. </tr>
12. <tr>
13. <td>Mary</td>
14. <td>Moe</td>
15. <td>mary@example.com</td>
16. </tr>
17. <tr>
18. <td>July</td>
19. <td>Dooley</td>
20. <td>july@example.com</td>
21. </tr>
22. </table>

Kết quả :

---

Tạo đường viền

Sử dụng lớp .table-bordered để tạo đường viền trong bảng :

Ví dụ :

1. <table class="table table-bordered>
2. <tr>
3. <th>Firstname</th>
4. <th>Lastname</th>
5. <th>Email</th>
6. </tr>
7. <tr>
8. <td>John</td>
9. <td>Doe</td>
10. <td>john@example.com</td>
11. </tr>
12. <tr>
13. <td>Mary</td>
14. <td>Moe</td>
15. <td>mary@example.com</td>
16. </tr>
17. <tr>
18. <td>July</td>
19. <td>Dooley</td>
20. <td>july@example.com</td>
21. </tr>
22. </table>

Kết quả :

---

Tạo hiệu ứng hover

Sử dụng lớp .table-hover để tạo hiệu ứng hover, khi di chuột vào một dòng trong bảng thì dòng đó sẽ được tô nền, có thể sử dụng .active để làm nổi bậc một dòng mặc định :

Ví dụ :

1. <table class="table table-hover>
2. <tr>
3. <th>Firstname</th>
4. <th>Lastname</th>
5. <th>Email</th>
6. </tr>
7. <tr class="active">
8. <td>John</td>
9. <td>Doe</td>
10. <td>john@example.com</td>
11. </tr>
12. <tr>
13. <td>Mary</td>
14. <td>Moe</td>
15. <td>mary@example.com</td>
16. </tr>
17. <tr>
18. <td>July</td>
19. <td>Dooley</td>
20. <td>july@example.com</td>
21. </tr>
22. </table>

Kết quả :

---

Tạo bảng đặc

Sử dụng lớp .table-condensed làm cho bảng nhỏ gon hơn bằng cách bỏ bớt các cell padding :

Ví dụ :

1. <table class="table table-condensed>
2. <tr>
3. <th>Firstname</th>
4. <th>Lastname</th>
5. <th>Email</th>
6. </tr>
7. <tr>
8. <td>John</td>
9. <td>Doe</td>
10. <td>john@example.com</td>
11. </tr>
12. <tr>
13. <td>Mary</td>
14. <td>Moe</td>
15. <td>mary@example.com</td>
16. </tr>
17. <tr>
18. <td>July</td>
19. <td>Dooley</td>
20. <td>july@example.com</td>
21. </tr>
22. </table>

Kết quả :

---

Tạo bảng đa màu theo ngữ cảnh

Các lớp màu nền theo ngữ cảnh có thể được sử dụng trong thẻ <tr> hoặc thẻ <td>. Các lớp màu ngữ cảnh :

• .success
• .danger
• .info

Ví dụ :

1. <table class="table>
2. <tr>
3. <th>Firstname</th>
4. <th>Lastname</th>
5. <th>Email</th>
6. </tr>
7. <tr class="success">
8. <td>John</td>
9. <td>Doe</td>
10. <td>john@example.com</td>
11. </tr>
12. <tr class="danger">
13. <td>Mary</td>
14. <td>Moe</td>
15. <td>mary@example.com</td>
16. </tr>
17. <tr class="info">
18. <td>July</td>
19. <td>Dooley</td>
20. <td>july@example.com</td>
21. </tr>
22. </table>

Kết quả :