Kẻ bảng chia ô cho bài viết blogspot ~ Ngoc Anh

Đôi khi làm trang web /blog hay một công việc gì đó cần kẻ bảng chia ô để cho người đọc có thể dễ dàng nhận đc thông tin cần thiết , một phầ...

Blogspot+ HTML+ HTML5

Đôi khi làm trang web /blog hay một công việc gì đó cần kẻ bảng chia ô để cho người đọc có thể dễ dàng nhận đc thông tin cần thiết , một phần cũng để trang trí cho blog của chúng ta được gọn gàng ngăn lắp dễ nhìn dễ hình dung , thì các bạn có thể đọc bài viết sau đâu của minhg để có thể làm được điều đó.

Kẻ bảng chia ô cho bài viết blogspot

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>
<td>Thời gian</td> 
<th>T2</th>
<th>T3</th>
<th>T4</th>
</tr>
<tr>
<th>Công việc</th>
<td>Đi học</td>
<td>Đi làm</td>
<td>Đi chơi</td>
</tr>
</table>

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>Demo ngocanhblog</th>
<th>Demo ngocanhblog</th>
<th>Demo ngocanhblog</th>
</tr>
<tr>
<td>Demo ngocanh</td>
<td>Demo ngocanh</td>
<td>Demo ngocanh</td>
</tr>
<tr>
<td>Demo ngocanh</td>
<td>Demo ngocanh</td>
<td>Demo ngocanh</td>
</tr>
<tr">
<td>Demo ngocanh</td>
<td>Demo ngocanh</td>
<td>Demo ngocanh</td>
</tr>
</table></div>

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

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

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! thủ thuật rất hay phải không các bạn?
với thủ thuật này các bạn có thể làm bất cứ chia ô theo cách bạn muấn.
Chúc các bạn thành công!
Bài viết tham khảo : 7segone.com [ Edit by ngocanhblog ]