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

1: Cấu trúc bảng.

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àng 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 thử sử dụng sof jcpicker. 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 : dvt.com.vn

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!