HTML Tables – Bảng

HTML Tables – Bảng

Các bảng trong HTML được định nghĩa như sau:
Định nghĩa 1 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ó 1 dòng và 3 ô, ta làm như sau:
<table>
<tr>
<td>Ô thứ nhất</td>
<td>Ô thứ 2</td>
<td>Ô thứ 3</td>
</tr>
</table>

Hoặc để định nghĩa một bảng gồm 2 dòng, mỗi dòng 3 ô:
<table>
<tr>
<td>Ô thứ nhất dòng 1</td>
<td>Ô thứ 2 dòng 1</td>
<td>Ô thứ 3 dòng 1</td>
</tr>
<tr>
<td>Ô thứ nhất dòng 2</td>
<td>Ô thứ 2 dòng 2</td>
<td>Ô thứ 3 dòng 2</td>
</tr>
</table>
Chú ý: Số lượng các ô trong các dòng phải bằng nhau, nếu 1 dòng nào đó có số ô khác với dòng khác, bảng sẽ bị “vỡ kế hoạch”. Để khắc phục điều này, ta phải tính trước trong 1 bảng, số lượng tối đa các ô của 1 dòng sẽ là bao nhiêu, sau đó có thể dùng thuộc tính colspan của thẻ <td> để gộp các ô trống trong cùng 1 hàng lại với nhau.

Thuộc tính colspan sẽ chỉ định số lượng các ô được gộp vào nhau trên một hàng.
Chẳng hạn:
<table>
<tr>
<td colspan = “2″ >Chập ô thứ nhất và ô thứ 2 của dòng 1</td>
<td>Ô thứ 3 dòng 1</td>
</tr>
<tr>
<td>Ô thứ nhất dòng 2</td>
<td>Ô thứ 2 dòng 2</td>
<td>Ô thứ 3 dòng 2</td>
</tr>
</table>

Một số thuộc tính có liên quan:
Thẻ 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ẻ <tr>(dòng),<th>(cột), thẻ <th> thì ít dùng, mọi người thường làm theo kiều, trong bảng có dòng, trong dòng có ô, nhìn nó đỡ rối hơn

Thẻ <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í dụ:

Mã nguồn: [Chọn]

<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>

Kết quả

---

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

---

bảng trên thuộc loại hơi rắc rối, một cấu trúc đơn giản hơn nhiều:

Mã nguồn: [Chọn]

<table>
<tr>
<td>Ô 1</td>
<td>Ô 2</td>
</tr>
<tr>
<td>Ô 3</td>
<td>Ô 4</td>
</tr>
</table>

Kết quả:

---

Ô 1	Ô 2
Ô 3	Ô 4

---

Hảy tự làm vài ví dụ cho mình đi ha 

Đọc thêm: http://hocvui.net/html/html-table-bang.html#ixzz1e8uyyluq
Hocvui.net – học những điều cơ bản