Bài giảng Thiết kế Web tĩnh - Chương IV: Bảng - Trình bày trang

CHƯƠNG IV 
BẢNG - 
TRÌNH BÀY TRANG 
I. BẢNG 
1. Giới thiệu 
 Bảng thường được sử dụng để tạo các văn bản 
dạng nhiều cột hoặc phân chia trang thành 
nhiều vùng khác nhau với những chủ đề khác 
nhau, rất tiện lợi trong thiết kế và trình bày 
trang web 
2. Cách tạo bảng: 
– Tag : chỉ thị một bảng 
– Tag  : xác định một dòng của bảng 
– Tag : xác định một ô chứa dữ liệu của 
bảng. Dữ liệu trong ô có thể là văn bản hoặc hình 
ảnh 
 Nội dung trong ô 1 
 Nội dung trong ô 2 
 Nội dung trong ô n 
 Nội dung trong ô 1 
 Nội dung trong ô 2 
 Nội dung trong ô n 
Cột 1 
Cột 2 Dòng 1 
Dòng 2 
Ví dụ : 
TABLE 
 Cell 1 
 Cell 2 
 Cell 3 
 Cell 4 
3. Các thuộc tính: 
a) Thuộc tính của bảng 
 Thêm khung viền: 
n: độ dày của khung viền tính bằng Pixel 
 Định màu của khung viền và màu nền: 
 Tạo bóng : 
 Bóng đổ ở cạnh dưới và phải của bảng 
 Bóng đổ cạnh trên trái của bảng 
 Ví dụ: 
TABLE 
<TABLE border="5" CellSpacing =10 width=50% 
BorderColorDark=red> 
 Cell 1 
 Cell 2 
 Cell 3 
 Cell 4 
 Định chiều rộng và chiều cao của bảng: 
 n, m là độ rộng và chiều cao tính bằng Pixel 
 Canh lề bảng: 
 Thuộc tính Cellpadding và CellSpacing: 
Khoảng cách giữa đường viền của các ô 
 Khoảng cách giữa đường viền của ô với văn bản 
 Tag Caption: Dùng để tạo tiêu đề cho bảng 
 tiêu đề 
Ví dụ: 
 tiêu đề 
 Cell 1 
 Cell 2 
 Cell 3 
 Cell 4 
b) Thuộc tính của cột 
 Canh lề cho dữ liệu trong ô theo chiều ngang: 
 Canh lề cho dữ liệu trong ô theo chiều đứng: 
 Trộn ô: 
 : trộn n cột 
 : trộn n dòng 
 Tag : Có tác dụng như nhưng làm cho dữ liệu 
trong ô được in đậm và canh giữa 
 Nội dung 
 Ví dụ: 
TABLE 
<TABLE border="5" CellSpacing =10 width=50% height=40% 
BorderColorDark="red" > 
 center 
 top 
 Right 
 Bottom 
Ví dụ: trộn ô 
<Table border="1" bgcolor= “fuschia” 
bordercolor=”red” align=”center” Width=50% 
Height=30%> 
 Properties of Table 
 Colspan 
 Rowspan 
Cell 1 
Cell 2 
 Cell 3 
 Cell 4 
II. TRÌNH BÀY TRANG 
 Trong thực tế, bảng thường được sử dụng để trình 
bày bố cục cho toàn bộ trang web. Nếu muốn thiết kế 
một trang thể hiện văn bản trong cột dạng báo chí 
hoặc phân trang thành những vùng có chủ đề khác 
nhau, thì bảng là một công cụ cần thiết. Một trong 
những nét đặc trưng hữu dụng của bảng đó là trong 
mỗi table cell bạn có thể sử dụng bất kỳ tag HTML 
nào, ví dụ bạn có thể chèn một tag trong một 
cell hoặc một danh sách có thứ tự các mục hoặc có 
thể chèn một bảng con trong một bảng khác 
 Ví dụ : 
 Cần thiết kế trang web gồm nhiều vùng với những chủ 
đề khác nhau như hình dưới đây, thì bảng là công cụ 
rất hiệu quả 
Bước 1: Tạo một table thứ nhất gồm 1 dòng và 2 cột 
 Home Page 
 View the Catalog 
 Place an Order 
Bước 2: tạo table thứ 2 gồm 3 dòng và 2 cột 
Kết quả trình bày trang