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

STTHọ và TênTổng kết cuối nămQuyết định của cô giáo Thảo
1Tịnh Văn Nguyễn6.9Nhận phiếu bé ngoan tại nhà cô
2Trần Thanh Thị Bình4.0Ở lại lớp
3Ngô Vân Trường4.9Quét lớp 1 năm
4Tuấ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ínhGiá trị
bordersolid blue 1px;
text-aligncenter;
font-weightbold;

Để 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

Đây là các bài viết Google đề xuất cho bạn:


Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )