Thực hành: Viết đoạn mã HTML để tạo:

A. Một bảng kích thước 6 x 4 (ô) có độ rộng bằng 100% chiều rộng của màn hình.

B. 4 cột trong đó cột 1 có độ rộng 40%, các cột 2, 3, 4 có độ rộng 20% chiều rộng bảng.

C. Gộp hai ô 2, 3 và ba ô 4, 5, 6 của cột 1.

D. gộp các ô 3, 4 của cột 3 và cột 5

E. Thiết lập đường viền cho bảng

F. đặt tiêu đề cho bảng lả Bảng 1

Hướng dẫn:

A. Các bước thực hiện lần lượt là: viết cặp thẻ <table style=“width:100% > </table> tạo bảng có độ rộng bằng 100% màn hình. Ở giữa hai thẻ ta viết sáu cặp <tr></tr> tương ứng với sáu dòng; giữ mỗi cặp tr, ta viết bốn cặp <td></td> tương ứng với bốn cột.

Lưu ý:

- Nếu không thêm dữ liệu vào bảng, để nhìn thấy kết quả cần đặt thuộc tính border = "1".

- Để dễ quan sát cấu trúc bảng có thể thêm thuộc tính height cho bảng hoặc bổ sung dữ liệu cho các ô trong bảng.

- Ta có thể sử dụng cặp thẻ <th></th> thay cho cặp <td></td> để xác định vị trí cho ô đầu hàng/cột.

Nên xuống dòng khi sang định nghĩa mới (ô mới, dòng mới) để đoạn mã dễ nhin, dễ kiểm tra.

B. Để cột 1 có độ rộng 40%: thêm style=“width:40%” vào thẻ td đầu tiên của hàng. Thêm style=“width:20%” vào các thẻ td còn lại của hàng.

Lưu ý: Chỉ cần thêm vào 1 hàng, không cần phải thêm vào tất cả các hàng.

C. Để gộp các ô trên cùng cột, tức là một ô sẽ gồm nhiều hàng khác nhau. Ta sử dụng thuộc tính rowspan.

Cụ thể:

– Thêm vào thuộc tính rowspan="2” vào thẻ <td> đầu tiên trong <tr> thứ hai.

– Thêm vào thuộc tính rowspan="3" vào thẻ <td> đầu tiên trong <tr> thứ tư. – Xoá cặp thẻ td đầu tiên trong các thẻ tr thứ ba, thứ năm và thứ sáu (là các ô

đã được gộp vào các ô ở bước trên).

Lưu ý: Nếu không xoá, cấu trúc bảng sẽ bị sai.

D. Để gộp các ô trên cùng hàng, tức là một ô sẽ gồm nhiều cột khác nhau. Ta sử dụng thuộc tính colspan. Trong các hàng thứ ba và thứ năm hiện tại, các ô định nghĩa với thẻ td nằm ở cột 2, 3 và 4. Do vậy ô 3 và 4 trong hai hàng này định nghĩa bởi thẻ td thứ hai và thứ ba.

Cụ thể:

Thêm vào thuộc tính colspan="2" vào thẻ <td> thứ ba trong thẻ tr thứ ba và thứ năm.

– Xoá cặp thẻ td cuối cùng trong các thẻ tr thứ ba và thứ năm.

E. Đường viền của bảng có thể thiết lập bằng cách:

– Thêm thuộc tính border = “1” vào trong thẻ <table style="width:100%” >. – Thêm thuộc tính border trong thuộc tính style – xác định bộ giá trị độ dày và kiểu viền (có thể thêm màu).

Ví dụ: style="border:2px solid"; style="border:1px dotted" hay style="border:2px double blue"...

Lưu ý: Khi sử dụng thuộc tính style, ta phải thêm viền cho từng ô trong bảng.

F. Tạo tiêu đề bằng thẻ caption:

<caption> Bảng 1 </caption>

vào ngay sau thẻ <table>, trước thẻ <tr> đầu tiên.