Trong bài viết này Hocban. vn Tổng hợp một số mẫu bảng – Mẫu bảng đáp ứng – HTML & CSS để bạn chèn vào trong bài viết. Và để tối ưu hiển thị trên di động thì tốt nhất ta nên để tầm 3 đến 4 cột nội dung thôi, nhiều quá sẽ xấu
#01 Họcban. vn mẫu bảng đơn giản – HTML & CSS 01
STTHọ và TênTổng kết cuối nămQuyết định của cô giáo Thảo1Tịnh Văn Nguyễn6. 9 Nhận phiếu bé ngoan tại nhà cô2Trần Thanh Thị Bình4. 0Ở lại lớp3Ngô Vân Trường4. 9Quét lớp 1 năm4Tuấn Văn Lê3. 4Đổi họcĐây là Code HTML và CSS mẫu để anh em chèn vào bài viết ở chế độ Text >> muốn sửa anh em chỉ cần chuyển qua tab Visual [trực quan] sửa lại nội dung và kéo giãn độ rộng là được
STT | Họ và Tên | Tổng kết cuối năm | Quyết định của cô giáo Thảo |
1 | Tịnh Văn Nguyễn | 6.9 | Nhận phiếu bé ngoan tại nhà cô |
2 | Trần Thanh Thị Bình | 4.0 | Ở lại lớp |
3 | Trần Thanh Thị Bình | 4.9 | Quét lớp 1 năm |
4 | Tuấn Văn Lê | 3.4 | Đuổi học |
#02 Mẫu bảng đáp ứng 02 cột
Đơn giản mẫu với 2 cột. property and value as this
Thuộc tínhGiá trịborder
đậm màu xanh 1px;text-align
giữa;font-weight
đậm;Để sử dụng các bạn cố định mã bi sau và dán vào chế độ soạn thảo HTML [Blogspot / Văn bản của WordPress] > sau đó chuyển sang chế độ soạn thảo thông thường để chỉnh sửa nội dung
Bảng phản hồi sẽ hiển thị thanh cuộn ngang nếu màn hình quá nhỏ để hiển thị đầy đủ nội dung
Tên HọĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmJillSmith505050505050505050505050EveJackson949494949494949494949494AdamJohnson676767676767676767676767
Thêm một phần tử vùng chứa [như
] với overflow-x:auto
xung quanh phần tử để làm cho phần tử phản hồi nhanh
Thí dụ
bảng nội dung
Tự mình thử »
Ghi chú. Trong OS X Lion [trên Mac], thanh cuộn được ẩn theo mặc định và chỉ hiển thị khi được sử dụng [mặc dù "tràn. cuộn" được đặt]