Bài 4: Tạo bảng trong HTML

Cấu trúc tổng quát :

<table border="2">
<tr><th>Cột 1</th><th>Cột 2</th></tr>
<tr><td>Cột 1, dòng 1</td><td>Cột 2, dòng 1</td></tr>
<tr><td>Cột 1, dòng 2</td><td>Cột 2, dòng 2</td></tr>
</table>

Kết quả:

Cột 1	Cột 2
Cột 1, dòng 1	Cột 2, dòng 1
Cột 1, dòng 2	Cột 2, dòng 2

1. Thẻ <table>
- Cặp thẻ <table></table> dùng để khai báo 1 bảng

Thuộc tính	Ý nghĩa
bgcolor="color"	Đặt màu nền
background="url"	Đặt hình nền
border=" "	Độ dày của đường viền
bordercolor="color"	Màu của đường viền
cellpadding=" "	Khoảng cách giữa nội dung và đường viền
cellspacing=" "	Khoảng cách giữa các ô
width=" " height=" "	Kích thước chiều ngang và chiều cao
align="center"| "left"| "right"	Căn vị trí của bảng so với toàn website

2. Thẻ <tr>
- Xác định dòng trong bảng, nằm bên trong cặp thẻ <table></table>
Bao nhiêu cặp thẻ <tr> ứng với từng đó dòng trong 1 bảng

Thuộc tính	Ý nghĩa
bgcolor="color"	Đặt màu nền
bordercolor="color"	Màu của đường viền
align="center"| "justify"| "left"| "right"	Căn lề theo phương ngang (giữa | chiều rộng bằng nhau | trái | phải)
valign="bottom"| "middle"| "top"	Căn lề theo phương dọc (dưới | giữa | trên)

3. Thẻ <th>, <td>
- <td></td> ( table data): Thẻ định nghĩa cột trong bảng, chứa dữ liệu của bảng. Cặp thẻ <td></td> nằm bên trong cặp thẻ <tr></tr>
- <th></th> ( table heading): Tương tự cặp thẻ <td></td> tuy nhiên <th> dùng trong trường hợp nếu ô đó chứa tiêu đề của cột. Nội dung trong cặp thẻ này được in đậm và căn giữa tự động.

Thuộc tính	Ý nghĩa
bgcolor="color"	Đặt màu nền
background="url"	Đặt hình nền
bordercolor="color"	Màu của đường viền
align="center"| "justify"| "left"| "right"	Căn lề theo phương ngang (giữa | chiều rộng bằng nhau | trái | phải)
valign="bottom"| "middle"| "top"	Căn lề theo phương dọc (dưới | giữa | trên)
rowspan=" " colspan=" "	Gộp nhiều dòng (cột) lại thành 1
width=" " height=" "	Kích thước chiều ngang và chiều cao

Một số lưu ý:
- Số cặp thẻ <td> (số cột) trong các dòng phải bằng nhau để tránh vỡ khung của bảng
- Đối với ô trống (không có nội dung) nên sử dụng thẻ <br> hoặc &nbsp; thay cho khoảng trống
- colspan=“x”: Gộp x cột tính từ cột đang đặt thuộc tính colspan
- rowspan=“y”: Gộp y hàng tính từ hàng đang xét
( Sau khi gộp phải loại bỏ số dòng( hoặc cột) để cân đối bảng )

Ví dụ:

<table border="5" cellpadding="20" cellspacing="10" width=600" height="400">
     <tr bgcolor="#6699FF">
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
     </tr>
     <tr align="center" valign="top">
         <td>Row 1, Col 1</td>
         <td valign="middle">Row 1, Col 2</td>
         <td valign="bottom">Row 1, Col 3</td>
     </tr>
     <tr align="center" valign="middle">
         <td>Row 2, Col 1</td>
         <td bgcolor="#FFCC00" colspan="2">Row 2, Col 2</td>
     </tr>
</table>

Kết quả:

Header 1	Header 2	Header 3
Row 1, Col 1	Row 1, Col 2	Row 1, Col 3
Row 2, Col 1	Row 2, Col 2