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