Tạo bảng cho bài viết của blogger và website

Đôi khi bạn muốn có một danh sách trong bài viết của mình nhưng lại không biết làm thế nào để tạo một bảng trong đó. Việc tạo ra một bảng như trong hình không phải việc khó. Bạn chỉ cần làm như sau là có một bảng khá đẹp.

Trước hết ta cần nắm được một số định nghĩa bảng trong HTML. Các bảng này được định nghĩa như sau.

Định nghĩa
Bảng bởi cặp thẻ

<table></table>

Trong 1 bảng (table) được chia làm nhiều dòng , mỗi dòng giới hạn bởi 1 cặp thẻ

<tr></tr>

Trong mỗi dòng lại có các ô , giới hạn bởi cặp thẻ

<td></td>

Chẳng hạn để định nghĩa 1 bảng gồm: có 2 dòng và 4 ô, ta làm như sau:

Bạn viết code dưới đây vào phần HTML trong bài viết của blogger và bạn sẽ được một bảng như hình bên dưới.

   <table border="1">
               <tr><!-- dòng 1 -->
               <td>Buổi</td> <!-- ô 1-->
                    <th>Sáng</th>
                    <th>Chiều</th>
                    <th>Tối</th>
               </tr>
               <tr><!-- dòng 2 -->
                    <th>Công việc</th>
                    <td>Đi học</td>
                    <td>Học tiếng anh</td>
                    <td>Làm bài tập</td>
               </tr>
               </table>

Buổi	Sáng	Chiều	Tối
Công việc	Đi học	Học tiếng anh	Làm bài tập

Nhìn vào bảng hiển thị, các bạn có thể sẽ rõ hơn chức năng của từng thẻ trong bảng, tuy nhiên vẫn còn những thuộc tính chúng ta cần nắm:

Thẻ <TABLE> bao gồm các thuộc tính:

• border  : xác định độ dày đường kẻ bảng, như ví dụ trên là 1px.
• align : dùng để căn lề, có 3 giá trị: left, center, right. Không hỗ trợ trong HTML5
• background: xác định ảnh nền.
• bgcolor : xác định màu nền.Không hỗ trợ trong HTML5
• height, width : xác định chiều cao và độ rộng bảng, giá trị có thể là px(pixels) hoặc %.
• cellspacing : xác định khoảng cách giữa các ô. Không hỗ trợ trong HTML5
• cellpadding: xác định khoảng cách giữa dữ liệu trong ô và các cạnh của ô. Không hỗ trợ trong HTML5.

Mình sẽ lấy 2 ví dụ rất cụ thể. Từ đó các bạn có thể tự suy cho mình những cách viết khác nhé!

Ví dụ 1 Sử dụng màu:

Code:

<style type="text/css">.nobrtable br { display: none }</style>
<div ">
<table border="2" bordercolor="#0033FF" " width="100%" cellpadding="3" cellspacing="3">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table></div>

Bảng tạo được sẽ như sau:

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

Ví dụ 2 Gộp ô

Code:

<table border="1">
<tr>
<th>Cột 1</th>
<th>Cột 2</th>
<th>Cột 3</th>
</tr>
<tr><td rowspan="2">Dòng 1 Ô 1</td>
<td>Dòng 1 Ô 2</td><td>Dòng 1 Ô 3</td></tr>
<tr><td>Dòng 2 Ô 2</td><td>Dòng 2 Ô 3</td></tr>
<tr><td colspan="3">Dòng 3 Ô 1</td></tr>
</table>

Và đây là bảng sau khi viết code vào mục HTML

Cột 1	Cột 2	Cột 3
Dòng 1 Ô 1	Dòng 1 Ô 2	Dòng 1 Ô 3
	Dòng 2 Ô 2	Dòng 2 Ô 3
Dòng 3 Ô 1

Chỉ với vài thao tác đơn giản là bạn có thể tự tạo cho mình những bảng khá đẹp. Với ví dụ trên hi vọng các bạn có thể kẻ bảng giúp cho bài viết độc đáo và đẹp hơn!

Chúc các bạn thành công!