Hướng dẫn tạo bảng trong bài viết trên blogspot

Thiết kế Blog giá rẻ 1 Bảng trong HTML được định nghĩa bằng cặp thẻ <table>...</table> Trong một bảng thì được chia thành nhiều cột và hàng. Mỗi hàng được giới hạn hoặc ngắt hàng bởi cặp thẻ <tr>...</tr>, và trong mỗi hàng lại có nhiều Ô tùy theo trường hợp sử dụng cặp thẻ giới hạn giữa các ô là <td></td>Ví dụ: 1 bảng gồm 2 hàng, 3 cột và mỗi hàng gồm có 3 ô.

<table border="1" cellpadding="10">
<tr>
<td>Ô 1</td>
<td>Ô 2</td>
<td>Ô 3</td>
</tr>
<tr>
<td>Ô 4</td>
<td>Ô 5</td>
<td>Ô 6</td>
</tr>
</table>

Như vậy là chúng ta đã tạo được 1 cái bảng đơn giản, nhìn thì hơi thô thôi. Còn nếu các bạn muốn gộp Hàng hoặc Cột lại thì Bạn sẽ thêm các thuộc tính như

rowspan="Số hàng muốn gộp lại"

colspan="Số cột muốn gộp"

Chẳng hạn như bạn muốn gộp Ô 1 và Ô 4 cột lại thành 1 cột thì sẽ dùng rowpan="2" để hợp lại.

<table border="1" cellpadding="10">
<tr>
<td rowspan="2">Ô 1</td>
<td>Ô 2</td>
<td>Ô 3</td>
<td>Ô 3-3</td>
</tr>
<tr>
<td>Ô 5</td>
<td>Ô 6</td>
<td>Ô 7</td>
</tr>
</table>

Hoặc nếu không muốn hợp 2 hàn thành 1 cột như thế thì mình hợp 2 Ô trên cùng một hàng lại

<table border="1" cellpadding="10">
<tr>
<td colspan="2">Ô 1+</td>
<td>Ô 2</td>
<td>Ô 3</td>
</tr>
<tr>
<td>Ô 4</td>
<td>Ô 5</td>
<td>Ô 6</td>
<td>Ô 7</td>
</tr>
</table>

Như vậy là việc Hợp các Cột hoặc Hàng lại cơ bản đã xong. Bây giờ bạn muốn đổ màu cho Ô , Cột hoặc là Hàng mà mình thích thì làm sử dụng thuộc tính bgcolor="#ee8018"

#ee8018 Các bạn thay thế Mã màu phù hợp theo trường hợp hoặc sở thích của bạn. Để lấy được mã màu các bạn xem ở đây. Ví dụ đổ màu cho các Ô như sau:

<table border="1" cellpadding="10">
<tr>
<td colspan="2" bgcolor="#ee8018">Ô 1+</td>
<td bgcolor="#dddddd">Ô 2</td>
<td bgcolor="#544754">Ô 3</td>
</tr>
<tr>
<td bgcolor="black">Ô 4</td>
<td bgcolor="red">Ô 5</td>
<td bgcolor="blue">Ô 6</td>
<td>Ô 7</td>
</tr>
</table>

Và Dưới đây là một số thuộc tính dùng để giúp tạo bảng tốt hơn. Các bạn tham khảo và áp dụng nha.
Thẻ dùng cho <Table>:

- border: Xác định độ dày của khung bao quanh bảng

- bordercolor: Màu của khung bao quanh, viết dưới dạng dấu # và 6 chữ số HEX tiếp theo.

- cellspacing: Xác định khoảng cách giữa các ô trong bảng.

- width: Xác định độ rộng của bảng

- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho toàn bảng

- bgcolor: Xác định màu nền của bảng, viết theo kiểu #XXXXXX (số HEX).

Thẻ dùng cho <td>

- width: Độ rộng của ô

- height: Chiều cao của ô

- colspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 dòng)

- rowspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 cột).

- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho ô

- bgcolor: Xác định màu nền ô, viết theo kiểu #XXXXXX (số HEX).

Về cơ bảng thì Một cấu trúc của bảng đơn giản là thế Nếu các bạn hiểu biết về CSS thì có thể tùy chỉnh cho đẹp hơn nữa.
Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn