Nếu bạn có một bảng dữ liệu, có thể là danh sách các chương trình khuyến mãi, hay bảng điểm thi của học sinh, bảng thông tin khách hàng, ... Bạn muốn đưa bảng dữ liệu này vào bài viết trên trang Blog của bạn, thì phải làm cách nào?
Trong bài viết này, tôi sẽ hướng dẫn các bạn từ A đến Z cách thêm một bảng dữ liệu vào bài viết, và cách tùy chỉnh giao diện của bảng để bảng có thêm phần bắt mắt hơn.
1. Cách thêm một bảng vào bài viết Blogspot
Để chèn một bảng dữ liệu lên bài viết, bạn có thể dùng 1 trong 2 cách như sau:
Cách 1: Chèn bảng dữ liều từ Google Sheet
Nếu bạn có sẵn bảng dữ liệu trên Google Sheet, đã định dạng sẵn. Thì việc đơn giản là bạn chỉ cần Copy và Paste trực tiếp lên bài viết.
Cách 2: Chèn bảng dữ liệu bằng cách thêm code HTML
Nếu bạn đã có kiến thức về HTML, thì có thể thêm 1 bảng dữ liệu trực tiếp trên bài viết bằng cách thêm các đoạn code HTML vào. Để thêm một bằng dữ liệu bằng code HTML, trước tiên bạn chuyển chế độ viết sang HTML view, sau đó dán đoạn code HTML tạo bảng sau đây vào:
<table> <thead> // header of table <tr> // row 1 of header <th></th> <th></th> <th></th> </tr> </thead> <tbody> // body of table <tr> // row 1 of body table <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> </tr> <tr> // row 2 of body table <td>row 2, cell 1</td> <td>row 2, cell 2</td> <td>row 2, cell 3</td> </tr> </tbody> <tfoot> //footer of table <tr> // row 1 of footer <td></td> <td></td> <td></td> </tr> </tfoot> </table>
- <thead></thead>: là phần header của bảng, và cũng là dòng đầu tiên trong bảng dữ liệu của bạn.
- <tbody></tbody>: là phần thân của bảng, được tính từ dòng đầu tiên sau header đến cuối bảng dữ liệu (hoặc gần cuối bảng nếu bạn có footer). Phần này để các bạn liệt kê chi tiết các mục trong bảng dữ liệu.
- <tfoot></tfoot>: là chân của bảng, được tính từ sau dòng cuối cùng của body đến hêt bảng dữ liệu. Thông thường phần này được dùng để làm phần tổng kết giá tiền của báo giá, hoặc ghi chú, ...
Đoạn code HTML trên chỉ là khung sườn của bảng dữ liệu, chưa có định dạng phần header, định dạng đường viền, ... Để thêm các định dạng bạn phải dùng CSS để tạo thêm cho bảng. Các bạn có thể chèn đoạn CSS sau đây ở đầu mỗi bài viết:
<style>
table{
width: 100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td{
padding: 2px 7px;
}
td:first-child {
width: 20%;
vertical-align: middle;
}
td:nth-child(2) {
width: 20%;
text-align: center;
vertical-align: middle;
}
td:nth-child(3) {
vertical-align: middle;
}
</style>
Ta được bảng dữ liệu như sau:
| header row 1, cell 1 | header row 1, cell 2 | header row 1, cell 3 |
|---|---|---|
| row 1, cell 1 | row 1, cell 2 | row 1, cell 3 |
| row 2, cell 1 | row 2, cell 2 | row 2, cell 3 |
| footer row 1, cell 1 | footer row 1, cell 1 | footer row 1, cell 1 |
2. Cách tạo mẫu báo giá dùng HTML & CSS
Bây giờ chúng ta cùng tạo một bảng báo giá như hình bên dưới trên bài biết bằng cách dùng HTML và CSS:
Chúng ta hãy phân tách bảng ra thành cách thành phần trước khi dùng code tạo nhé. Phần màu xanh dương chúng ta sẽ đưa vào header, phần màu xanh lá đưa vào footer, và phần còn lại sẽ là body của bảng.
<table class="mystyle">
<thead>
<tr>
<th colspan="6">BẢNG BÁO GIÁ LINH KIỆN</th>
</tr>
<tr>
<th>Stt</th>
<th>Tên linh kiện</th>
<th>ĐVT</th>
<th>Đơn giá</th>
<th>SL</th>
<th>Thành tiền</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lưới Lọc Máy Lạnh Panasonic VU LỚN</td>
<td>Cái</td>
<td>37,000</td>
<td>10</td>
<td>370,000</td>
</tr>
<tr>
<td>2</td>
<td>Lưới Lọc Máy Lạnh Panasonic VU NHỎ</td>
<td>Cái</td>
<td>25,000</td>
<td>10</td>
<td>250,000</td>
</tr>
<tr>
<td>3</td>
<td>Lưới Lọc Máy Lạnh Panasonic (30x32)</td>
<td>Cái</td>
<td>41,000</td>
<td>20</td>
<td>820,000</td>
</tr>
<tr>
<td>4</td>
<td>Lưới Lọc Máy Lạnh Panasonic (32x32)</td>
<td>Cái</td>
<td>65,000</td>
<td>20</td>
<td>1,300,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5"><b>TỔNG CỘNG</b></td>
<td><b>2,740,000</b></td>
</tr>
</tfoot>
</table>
Ta được bảng như hình sau:
Tiếp theo ta sẽ dùng CSS để định dạng màu nền, độ rộng cột, canh trái phải chữ, ... sao cho hoàn chỉnh. Chúng ta sẽ thêm CSS vào id="mystyle" cho bảng, và sẽ không ảnh hưởng đến các bảng khác. Ở đây tôi đã tạo sẵn một đoạn CSS cho bảng như sau:
<style>
table{
width: 100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td{
padding: 2px 7px;
}
td:first-child {
width: 20%;
vertical-align: middle;
}
td:nth-child(2) {
width: 20%;
text-align: center;
vertical-align: middle;
}
td:nth-child(3) {
vertical-align: middle;
}
#mystyle tr{
line-height: 36px;
}
#mystyle thead tr{
background-color: #0071c1;
color: #fff;
}
#mystyle thead tr:first-child {
font-size: 20px;
}
#mystyle thead tr:nth-child(2) td:nth-child(2) {
text-align: left !important;
}
#mystyle td:first-child {
width: 7%;
vertical-align: middle;
text-align: center;
}
#mystyle td:nth-child(2) {
width: 40%;
text-align: left;
vertical-align: middle;
}
#mystyle td:nth-child(3) {
vertical-align: middle;
width: 7%;
text-align: center;
}
#mystyle td:nth-child(4) {
vertical-align: middle;
width: 12%;
text-align: center;
}
#mystyle td:nth-child(5) {
vertical-align: middle;
width: 7%;
text-align: center;
}
#mystyle td:nth-child(6) {
vertical-align: middle;
text-align: right;
}
#mystyle tfoot td:nth-child(2) {
vertical-align: middle;
text-align: right;
}
</style>
Bảng sau khi được định dạng bằng CSS:
| BẢNG BÁO GIÁ LINH KIỆN | |||||
|---|---|---|---|---|---|
| Stt | Tên linh kiện | ĐVT | Đơn giá | SL | Thành tiền |
| 1 | Lưới Lọc Máy Lạnh Panasonic VU LỚN | Cái | 37,000 | 10 | 370,000 |
| 2 | Lưới Lọc Máy Lạnh Panasonic VU NHỎ | Cái | 25,000 | 10 | 250,000 |
| 3 | Lưới Lọc Máy Lạnh Panasonic (30x32) | Cái | 41,000 | 20 | 820,000 |
| 4 | Lưới Lọc Máy Lạnh Panasonic (32x32) | Cái | 65,000 | 20 | 1,300,000 |
| TỔNG CỘNG | 2,740,000 | ||||
Tags:
Blogger