Tạo danh sách từ css cho bài viết trong blog

Trên một bài blog, có những nội dung sẽ dễ đọc và dễ hiểu hơn khi chúng trình bày chúng dưới dạng bảng. Hôm nay mình giới thiệu các bạn cách tạo bảng trong bài viết từ css có cả hiệu ứng khi dê chuột nữa.

Các bạn có thể xem demo ở bên dưới.

#Demo

Họ	Tên đệm	Tên
Bùi	Quốc	Khánh
Nguyễn	Văn	Tân
Khanh98	blogspot	com

#Cách làm

1. Đăng nhập Blogger
2. > Mẫu > Chỉnh sửa HTML
3. > Tìm thẻ ]]></b:skin>
4. > Dán code dưới vào trên thẻ vừa tìm

table { width: 640px; } /* Make table wider */

td, th { border: 1px solid #CCC; } /* Add borders to cells */

table {

width: 640px;

border-collapse: collapse;

border-spacing: 0;

}

td, th { border: 1px solid #CCC; }

table {

color: #333; /* Lighten up font color */

font-family: Helvetica, Arial, sans-serif; /* Nicer font */

width: 640px;

border-collapse:

collapse; border-spacing: 0;

}



td, th { border: 1px solid #CCC; height: 30px; } /* Make cells a bit taller */



th {

background: #F3F3F3; /* Light grey background */

font-weight: bold; /* Make sure they're bold */

}



td {

background: #FAFAFA; /* Lighter grey background */

text-align: center; /* Center our text */

}

table {

color: #333;

font-family: Helvetica, Arial, sans-serif;

width: 640px;

border-collapse:

collapse; border-spacing: 0;

}



td, th {

border: 1px solid transparent; /* No more visible border */

height: 30px;

transition: all 0.3s;  /* Simple transition for hover effect */

}



th {

background: #DFDFDF;  /* Darken header a bit */

font-weight: bold;

}



td {

background: #FAFAFA;

text-align: center;

}



/* Cells in even rows (2,4,6...) are one color */

tr:nth-child(even) td { background: #F1F1F1; } 



/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */

tr:nth-child(odd) td { background: #FEFEFE; } 



tr td:hover { background: #666; color: #FFF; } /* Hover cell effect! */

#Cách sử dụng

Khi viết bài mà muốn sử dụng bảng thì hãy chuyển sang chế độ viết HTML và dán code dưới vào, thay thế và sử chữa cho phù hợp với bạn. Nên đối chiếu code và demo cho dễ hiểu.

<table>
<tbody>
<tr>
    <th>Họ</th>
    <th>Tên đệm</th>
    <th>Tên</th>
</tr>
<tr>
    <td>Bùi</td>
    <td>Quốc&nbsp;</td>
    <td>Khánh</td>
</tr>
<tr>
    <td>Nguyễn</td>
    <td>Văn</td>
    <td>Tân</td>
</tr>
<tr>
    <td>Khanh98</td>
    <td>blogspot</td>
    <td>com</td>
</tr>
</tbody></table>

• Sử dụng thẻ <th> nội dung </th> khi muốn thêm nội dung cho ô là một tiêu đề
• Sử dụng thẻ <td> nội dung </td> khi muốn thêm nội dung vào ô
• Sử dụng thẻ <tr> nội dụng </tr> khi muốn thêm hàng