Responsive table template – HTML & CSS

Responsive table template - HTML & CSS

Responsive table template – HTML & CSS

Trong bài viết này Hocban.vn Tổng hợp một số mẫu bảng – Responsive table template – HTML & CSS để anh em 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 Hocban.vn simple table template – HTML & CSS 01

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 Ngô Vân Trường 4.9 Quét lớp 1 năm
4 Tuấn Văn Lê 3.4 Đuổ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 chỉnh 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 dãn độ rộng là được.

<table style="height: 139px; width: 100%; border-collapse: collapse; border-style: solid; background-color: #f5fff5;" border="1px solid rgb(96, 125, 139)" cellpadding="1em">
    <tbody>
        <tr style="height: 47px;">
            <td style="width: 6.71425%; background-color: #fff9b3; height: 47px; vertical-align: middle; border: 1px solid #607d8b; text-align: center;"><strong>STT</strong></td>
            <td style="width: 27.5715%; background-color: #fff9b3; height: 47px; border: 1px solid #607d8b; text-align: center;"><strong>Họ và Tên</strong></td>
            <td style="width: 21.5715%; background-color: #fff9b3; height: 47px; vertical-align: middle; border: 1px solid #607d8b; text-align: center;"><strong>Tổng kết cuối năm</strong></td>
            <td style="width: 44.1428%; background-color: #fff9b3; height: 47px; border: 1px solid #607d8b; text-align: center;"><strong>Quyết định của cô giáo Thảo</strong></td>
        </tr>
        <tr style="height: 23px;">
            <td style="width: 6.71425%; height: 23px; vertical-align: middle; background-color: #f2fff3; border: 1px solid #607d8b;">1</td>
            <td style="width: 27.5715%; height: 23px; background-color: #f2fff3; border: 1px solid #607d8b;">Tịnh Văn Nguyễn</td>
            <td style="width: 21.5715%; height: 23px; background-color: #f2fff3; vertical-align: middle; border: 1px solid #607d8b;">6.9</td>
            <td style="width: 44.1428%; height: 23px; background-color: #f2fff3; border: 1px solid #607d8b;">Nhận phiếu bé ngoan tại nhà cô</td>
        </tr>
        <tr style="height: 23px;">
            <td style="width: 6.71425%; height: 23px; vertical-align: middle; background-color: #f2fff3; border: 1px solid #607d8b;">2</td>
            <td style="width: 27.5715%; height: 23px; background-color: #f2fff3; border: 1px solid #607d8b;">Trần Thanh Thị Bình</td>
            <td style="width: 21.5715%; height: 23px; background-color: #f2fff3; vertical-align: middle; border: 1px solid #607d8b;">4.0</td>
            <td style="width: 44.1428%; height: 23px; background-color: #f2fff3; border: 1px solid #607d8b;">Ở lại lớp</td>
        </tr>
        <tr style="height: 23px;">
            <td style="width: 6.71425%; height: 23px; vertical-align: middle; background-color: #f2fff3; border: 1px solid #607d8b;">3</td>
            <td style="width: 27.5715%; height: 23px; background-color: #f2fff3; border: 1px solid #607d8b;">Trần Thanh Thị Bình</td>
            <td style="width: 21.5715%; height: 23px; background-color: #f2fff3; vertical-align: middle; border: 1px solid #607d8b;">4.9</td>
            <td style="width: 44.1428%; height: 23px; background-color: #f2fff3; border: 1px solid #607d8b;">Quét lớp 1 năm</td>
        </tr>
        <tr style="height: 23px;">
            <td style="width: 6.71425%; height: 23px; vertical-align: middle; background-color: #f2fff3; border: 1px solid #607d8b;">4</td>
            <td style="width: 27.5715%; height: 23px; background-color: #f2fff3; border: 1px solid #607d8b;">Tuấn Văn Lê</td>
            <td style="width: 21.5715%; height: 23px; background-color: #f2fff3; vertical-align: middle; border: 1px solid #607d8b;">3.4</td>
            <td style="width: 44.1428%; height: 23px; background-color: #f2fff3; border: 1px solid #607d8b;">Đuổi học</td>
        </tr>
    </tbody>
</table>

#02 Responsive table template 02 column

Mẫu đơn giản với 2 cột: thuộc tính và giá trị như này

Thuộc tính Giá trị
border solid blue 1px;
text-align center;
font-weight bold;

Để sử dụng các bạn cốp bi code sau và dán vào ở chế độ soạn thảo HTML (Blogspot / Text của WordPress) > sau đó chuyển sang chế độ soạn thảo thường để sửa nội dung.

<table style="height: 92px; width: 100%; border-collapse: collapse; border-color: #093654; border-radius: 5px; element.style { height: 92px;">
   <tbody>
      <tr style="height: 23px;">
         <td style="width: 33.3333%; height: 23px; background-color: #ffffd4;"><strong>Thuộc tính</strong></td>
         <td style="width: 33.3333%; height: 23px; background-color: #ffffd4;"><strong>Giá trị</strong></td>
      </tr>
      <tr style="height: 23px;">
         <td style="width: 33.3333%; height: 23px;">border</td>
         <td style="width: 33.3333%; height: 23px;">solid blue 1px;</td>
      </tr>
      <tr style="height: 23px;">
         <td style="width: 33.3333%; height: 23px;">text-align</td>
         <td style="width: 33.3333%; height: 23px;">center;</td>
      </tr>
      <tr style="height: 23px;">
         <td style="width: 33.3333%; height: 23px;">font-weight</td>
         <td style="width: 33.3333%; height: 23px;">bold;</td>
      </tr>
   </tbody>
</table>

Tiếp tục sưu tầm…

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

Không biết bạn đã từng đọc qua các nội dung dưới đây chưa nhỉ ?

guest
0 Comments
Inline Feedbacks
View all comments