[HTML] Bài 10: Tạo Bảng Trong HTML

Trước đây khi vẫn chưa sử dụng thẻ DIV để xây dựng bố cục website chúng ta thường sử dụng thẻ Table để xây dựng bố cục website.
Để tạo một bảng trong văn bản HTML ta sử dụng tag <TABLE></TABLE>. Trong thẻ này còn chứa các tag khác mang chức năng định nghĩa các thuộc tính khác trong bảng như dòng, cột...

1. Thẻ TABLE

- Cập Thẻ <TABLE></TABLE> dùng để khai báo một bảng.
- Các thuộc tính: 
+ width: Độ rộng của bảng, thường sử dụng giá trị kích thước có đơn vị % hoặc px
+ height: Chiều cao bảng
+ bgcolor: Định màu nền của bảng
+ background: Định ảnh nền của bảng
+ border: Độ lớn đường viền của bảng
+ bordercolor: Màu của đường viền
+ align: Căn vị trí của bảng so với toàn website. Giá trị: left, right, center
+ cellspacing:  Định độ dày của khung
+ cellpadding: Định khoảng cách từ nội dung đến đường bao của bảng
Ví Dụ:

2. Thẻ TR (Table row)

- Cú Pháp: <tr>..</tr>
- Chức Năng: xác định dòng trong table
- Vị trí: nằm trong cập thẻ Table
Bao nhiêu cặp thẻ <tr> ứng với từng đó dòng trong 1 bảng
- Một số thuộc tính trong thẻ <tr>
+ height: Khai báo chiều cao của dòng( độ lớn dòng)
+ align: Định vị trí nội dung trong dòng( theo chiều ngang): left( trái), right( phải),
center( giữa)
+valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa), bottom( dưới)
Ví Dụ:

<table width="500px" height="200px" border="3" bordercolor="red">
  <tr></tr>
  <tr></tr>
</table> 

3. Thẻ TD (Table Data)

- Thẻ định nghĩa cột trong bảng, chứa dữ liệu của bảng ( table data)
- Cặp thẻ <td></td> nằm bên trong cặp thẻ <tr></tr>
- Một số thuộc tính:
+ width: Độ rộng của cột
+ height: Chiều cao của cột
+ align: Định vị trí nội dung trong cột( theo chiều ngang): left( trái), right( phải),
center( giữa)
+ valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa), bottom( dưới)
Ví Dụ:

4. Thẻ TH

- <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.
Ví dụ:

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

5. Gộp cột, dòng trong bảng 

- Là việc tùy biến bảng bằng việc gộp các cột hay dòng lại với nhau
- 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
Lưu ý:  Sau khi gộp phải loại bỏ số dòng ( hoặc cột) để cân đối bảng
Ví Dụ: đã loại bỏ 1 cột ở dòng thứ 2. Vì dòng 1
đã có 2 dòng được gộp.

Bài Tập sử dụng tag Table xây dựng bố cục trang web sau: