Việc sử dụng bảng trong thiết kế web rất quan trọng, nó giúp cho việc trình bày bảng biểu, bảng thông báo một cách gọn gàng và đẹp mắt. Trong HTML, để sử dụng bảng, các bạn xem bài sau. Với Bootstrap, việc thiết kế bảng trở nên đa dạng và linh hoạt hơn rất nhiều. Trong bài này, tôi sẽ hướng dẫn các bạn sử dụng các thẻ cơ bản liên quan tới tạo và trình bày bảng.
Danh sách bài đã đăng
Bài 1. Giới thiệu Bootstrap
Bài 2. Cách chia cột tương tác với tỷ lệ màn hình trong Bootstrap
Để sử dụng bảng với bootstrap, bạn sử dụng lớp .table như sau:
Ví dụ 1: Tạo bảng đơn giản trong thiết kế web, sử dụng bootstrap
<body>
<div class="container">
<h2>Thiết kế bảng với bootstrap</h2>
<table class="table">
<thead>
<tr>
<th>Họ</th>
<th>Tên</th>
<th>Địa chỉ</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Giang</td>
<td>Linh</td>
<td>Ninh Bình</td>
</tr>
<tr>
<td>Nguyễn Minh</td>
<td>Ngọc</td>
<td>Hà Nội</td>
</tr>
</tbody>
</table>
</div>
</body>
Kết quả:
 |
| Hình 1. Thiết kế bảng với thẻ table trong bootstrap |
<div class="container">
<h2>Bảng với các dòng có màu khác nhau</h2>
<table class="table table-striped">
<thead>
<tr>
<th>STT</th>
<th>Tên môn học</th>
<th>Giảng viên phụ trách</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lập trình web</td>
<td>Nguyễn Minh Hiển</td>
</tr>
<tr>
<td>2</td>
<td>Kỹ thuật lập trình</td>
<td>Nguyễn Minh Hiển</td>
</tr>
<tr>
<td>3</td>
<td>Cơ sở dữ liệu</td>
<td>Nguyễn Minh Ngọc</td>
</tr>
</tbody>
</table>
</div>
Kết quả:
 |
| Hình 2. Thiết kế bảng với thẻ table-striped trong bootstrap |
<div class="container">
<h1>Bảng với thuộc tính đường viền</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>STT</th>
<th>Tên môn học</th>
<th>Số tiết học</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lập trình web</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Kỹ thuật lập trình</td>
<td>45</td>
</tr>
<tr>
<td>3</td>
<td>Cơ sở dữ liệu</td>
<td>30</td>
</tr>
</tbody>
</table>
</div>
Kết quả:
 |
| Hình 3. Thiết kế đường viền bảng với thẻ table-bordered trong bootstrap |
<h1>Tạo bảng có màu sắc đa dạng</h1>
<table class="table">
<thead>
<tr>
<th>STT</th>
<th>Tên học phần</th>
<th>Số tín chỉ</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>Lập trình web</td>
<td>3</td>
</tr>
<tr class="danger">
<td>2</td>
<td>Cơ sở dữ liệu</td>
<td>2</td>
</tr>
<tr class="info">
<td>3</td>
<td>Thiết kế web</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
Kết quả:
 |
| Hình 4. Tạo bảng có màu sắc đa dạng theo ngữ cảnh trong bootstrap |
0 on: "[Bootstrap] Bài 3: Thiết kế bảng với BootStrap"