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

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

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