Hướng Dẫn Tạo Bảng So Sánh Trên Blogspot - Comparison Table on Blogspot

Tạo Bảng So Sánh Trên Blogspot
Hướng dẫn tạo bảng so sánh trên blogspot nhanh chóng chỉ với 1 vài thao tác đơn giản để giúp bạn hoàn thành 1 bài viết về so sánh hoặc 1 chủ đề nào đó cần có so sánh. Hãy cùng làm theo Mách Dạo Blog nhé!

CÁCH TẠO BẢNG SO SÁNH TRÊN BLOGSPOT

Bảng so sánh để làm gì?
  • So sánh các giá trị 
  • Giúp người dùng dễ nhìn 
Cách tạo bảng so sánh với các bước sau : 

Bước 1 : Đầu tiên các bạn vào bài viết và chọn chế độ HTML -> các bạn copy dòng code này và để nó vào cặp lệnh <style></style> đặt vào cuối bài viết

/* Style the table */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

/* Style table headers and table data */
th, td {
  text-align: center;
  padding: 16px;
}

th:first-child, td:first-child {
  text-align: left;
}

/* Zebra-striped table rows */
tr:nth-child(even) {
  background-color: #f2f2f2
}

.fa-check {
  color: green;
}

.fa-remove {
  color: red;
}

Bước 2 : Tiếp theo thì copy dòng code này, chỉnh sửa lại theo yêu cầu của bạn và dán nó vào nơi mà bạn muốn xuất hiện bảng so sánh -> Xong!

<table>
  <tr>
    <th style="width:50%">Phiên Bản</th>
    <th>Basic</th>
    <th>Pro</th>
  </tr>
  <tr>
    <td>Phiên Bản 1</td>
    <td><i class="fa fa-remove"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>Phiên Bản 2/td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
</table>

**Lưu ý : 
- fa fa-remove : là dấu x đỏ 
- fa fa-check : là dấu tick xanh 

TẠM KẾT 

Qua bài viết cách tạo bảng so sánh trên blogspot giúp bạn tạo ra 1 bảng so sánh hoàn hảo và dễ nhìn và đẹp mắt. Nếu thấy hay thì các bạn hãy để lại bình luận bên dưới nhé. Cảm ơn các bạn đã đọc !

Post a Comment

Previous Post Next Post