Bài giảng Thiết kế Web tĩnh - Phần 1: Ngôn ngữ HTML - Chương 4: 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 Cột 1 
 Nội dung trong ô 2 
 Dòng 1 … Cột 2 
 Nội dung trong ô n 
 Nội dung trong ô 1 
 Nội dung trong ô 2 
 … 
 Nội dung trong ô n 
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 Pixelbằng 
  Đị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