Người Viết : ViKiMi Editor
Hiển thị Responsive Table trong trình bày website luôn luôn làm cho website đạt độ chuẩn. Và việc xử lý các hiển thị cho Table trong lập trình website là không thể thiếu. Hằng ngày, con người vẫn cần hàng nghìn dữ liệu bảng cần hiển thị đúng. Tuy rằng hiển thị dưới dạng bảng đã quá cổ điển, nhưng sự cổ điển này là không thể thiếu được.
Các dữ liệu dạng Table cần được xử lý và hiển thị trên Website để đạt được kết quả các Table này luôn hiển thị tốt nhất trên các thiết bị. Đó là tính Responsive Table trong hiển thị Website. Để thực hiện được điều này chúng ta có cá hiển thị phải có kết quả hiển thị như dưới :
HIỂN THỊ TRÊN DESKTOP
HIỂN THỊ TRÊN MOBILE
Sự tuyệt vời khi thực hiện xử lý responsive table trong lập trình web là rất hoàn hảo. Trong nhiều trường hợp đã đem lại cho bạn các cách thể hiện mà không phải khi nào bạn cũng có thể xử lý được bằng cách khác. Nhất là trong việc hiển thị nhiều dữ liệu với khung hình hiển thị quá nhỏ. Các bảng dữ liệu như bảng dữ liệu thi đấu trong các kỳ đại hội luôn cần phải hiển thị dưới dạng thể hiện Responsive Table.
CÁCH 1 : HIỂN THỊ RESPONSIVE TABLE VỚI BOOTSTRAP
+ Để tạo một responsive table với bootstrap không khó khăn. Chúng ta chỉ cần tạo một Thẻ Div sẽ chứa Table muốn thể hiện tính Responsive.
+ Với Thẻ Div này chúng ta sẽ sử dụng Class .table-responsive để giúp hiển thị scrollbar cho responsive table
Lưu ý : Với kiển thức cơ bản về CSS và HTML thì bạn sẽ dễ nắm bắt Bootstrap hơn.
Cách Responsive Table hiển thị lên màn hình các thiết bị khi sử dụng bằng lập trình Bootstrap là :
+ Với các thiết bị có chiều rộng màn hình hiển thị nhỏ hơn 768 px thì Table sẽ cuộn/ scroll theo chiều ngang.
+ Với các thiết bị có độ rộng màn hình hiển thị lớn hơn hoặc bằng 768 px thì sẽ không có Scrollbar.
MÃ CODE VỚI HTML VÀ BOOTSTRAP
<div class="container">
<h2>BẢNG DỮ LIỆU CẦN HIỂN THỊ</h2>
<p>ĐÂY LÀ BẢNG DỮ LIỆU HIỂN THỊ
RESPONSIVE TABLE, VỚI CÁC THIẾT BỊ CÓ ĐỘ RỘNG MÀN HÌNH NHỎ HƠN 768PX THÌ SẼ XUẤT
HIỆN BẢNG CUỘN THEO CHIỀU NGANG; VỚI CÁC THIẾT BỊ CÓ ĐỘ RỘNG MÀN HÌNH LỚN HƠN
HOẶC BẰNG 768PX THÌ TABLE VẪN HIỂN THỊ BÌNH THƯỜNG VÀ KHÔNG CÓ THANH CUỘN: </P>
<div class="table-responsive"> <!—Thêm class table-responsive cho DIV -->
<table class="table"> <!—Thêm class table cho bảng Table -->
<thead>
<tr>
<th>No</th>
<th>Đội bóng</th>
<th>Trận Thắng</th>
<th>Trận Thua</th>
<th>Bàn Thắng</th>
<th>Tổng điểm</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>HAGL</td>
<td>5</td>
<td>1</td>
<td>6</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>HaNoi FC</td>
<td>4</td>
<td>2</td>
<td>5</td>
<td>12</td>
</tr>
<tr>
<td>3</td>
<td>SG FC</td>
<td>4</td>
<td>2</td>
<td>5</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>
</div>
Kết quả hiển thị trên thiết bị DESKTOP
Kết quả hiển thị trên MOBILE
Cách hiển thị Responsive Table sử dụng Bootstrap rất đơn giản và thuận tiện. Chúng ta thấy rằng Bootstrap Framework đem lại nhiều tính năng hữu ích.
CÁCH 2 : HIỂN THỊ RESPONSIVE TABLE THÔNG THƯỜNG
+ Để tạo một responsive table một cách thông thường và không sử dụng bootstrap chúng ta cần xử lý css với thuộc tính Overflow-x. Chúng ta chỉ cần tạo một Thẻ Div sẽ chứa Table muốn thể hiện tính Responsive.
+ Thẻ Div này chúng ta sẽ sử dụng CSS style với thuộc tính Overflow-x : Auto để giúp hiển thị scroll bar cho responsive table.
Đây là cách hiển thị Responsive Table thông thường không cần Bootstrap. Tất nhiên đây là cách cũ và nó không thể hoàn hảo bằng khi bạn xử lý hiển thị với Bootstrap. Với cách thông thường này thì Thanh Scrollbar sẽ xuất hiện khi màn hình quá nhỏ để có thể hiển thị hết nội dung của Table.
MÃ CODE VỚI HTML VÀ CSS
<div style="overflow-x:auto;">
<table>
<tr>
<th>No</th>
<th>Đội Bóng</th>
<th>Points</th>
<th>Giải Đấu</th>
<th>Quốc Nội</th>
<th>Quốc Tế</th>
<th>Châu Lục</th>
<th>Kết Thúc</th>
<th>Đang Thi Đấu</th>
<th>Hạng Đấu</th>
<th>Phong Độ</th>
<th>CUP</th>
</tr>
<tr>
<td>1</td>
<td>HAGL</td>
<td>50</td>
<td>V-League</td>
<td>VietNam</td>
<td>AFC</td>
<td>ASIA</td>
<td>CHƯA</td>
<td>Diễn Ra</td>
<td>Chuyên Nghiệp</td>
<td>LÊN</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>HN FC</td>
<td>50</td>
<td>V-League</td>
<td>VietNam</td>
<td>AFC</td>
<td>ASIA</td>
<td>CHƯA</td>
<td>Diễn Ra</td>
<td>Chuyên Nghiệp</td>
<td>LÊN</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>SG FC</td>
<td>50</td>
<td>V-League</td>
<td>VietNam</td>
<td>AFC</td>
<td>ASIA</td>
<td>CHƯA</td>
<td>Diễn Ra</td>
<td>Chuyên Nghiệp</td>
<td>LÊN</td>
<td>3</td>
</tr>
</table>
</div>
Hiển thị chưa có Scrollbar
Hiển thị có Scrollbar
CHÚNG TA THẤY CÁCH HIỂN THỊ RESPONSIVE TABLE THẬT ĐƠN GIẢN VÀ ĐEM LẠI HIỆU QUẢ THIẾT KẾ WEBSITE. VỚI RESPONSIVE TABLE SE KHÔNG CÒN TRỞ NGẠI VỚI HIỂN THỊ DỮ LIỆU DẠNG BẢNG QUÁ LỚN, VỚI CÁC LOẠI THIẾT BỊ KHÁC NHAU ĐỀU ĐEM LẠI TÍNH KHẢ DỤNG DÀNH CHO GIAO DIỆN NGƯỜI DÙNG.
ĐẶC BIỆT VỚI LẬP TRÌNH BOOTSTRAP THÌ RESPONSIVE TABLE HOÀN TOÀN CHO CHÚNG TA CÁI NHÌN MỚI VỀ THIẾT KẾ DESIGN WEBSITE THẬT TIỆN LỢI DỄ DÀNG.
