Bài giảng Thiết kế Web HTML, CSS3

THIẾT KẾ WEBSITE CHƯƠNG SỬ DỤNG BẢNG (TABLE) @ThS Lê Văn Phong Thiết kế Web 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) Thiết kế Web 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 2.3.1 Thiết kế bảng biểu - Table - Table cấu trúc gồm nhiều hàng giao với nhiều cột (kỹ thuật thiết kế bố cục trang) Cần phát thảo cấu trúc bảng trước thiết kế Nội dung tiêu đề bảng Nội dung tiêu đề cột 1 Nội dung tiêu đề cột 2 Nội dung dịng Nội dung dịng @ThS Lê Văn Phong Thiết kế Web 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 2.3.1 Thiết kế bảng biểu – Table(tt) Định dạng Table Tạo đường viền Thiết lập độ rộng canh lề bảng N1, n2: Độ rộng tính pixel Hoặc % kích thước cửa sổ “Center” / ”Left”/ ”Right” Thiết kế Web 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 2.3.1 Thiết kế bảng biểu – Table(tt) Định dạng Table Xác lập màu, ảnh cho bảng, hàng, Thuộc tính Ý nghĩa Màu cho toàn bảng, hàng, ô, tiêu đề Ảnh cho tịan bảng, hàng, ơ, tiêu đề @ThS Lê Văn Phong Thiết kế Web 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 2.3.1 Thiết kế bảng biểu – Table(tt)  Định dạng Table Định dạng Thuộc tính 60 Ý nghĩa Canh theo chiều ngang: Left, Right, Center Canh theo chiều dọc: Top, Bottom, Middle Canh hàng tiêu đề theo chiều ngang Canh hàng tiêu đề theo chiều dọc Canh theo chiều ngang ô hàng Canh theo chiều dọc ô hàng CellSpacing=“n” Khoảng cách ô CellPadding=“n” Khỏang cách quanh nội dung ô Pixel @ThS Lê Văn Phong Thiết kế Web 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 2.3.1 Thiết kế bảng biểu – Table(tt) Định dạng Table Trộn ơ: Dùng thuộc tính RowSpan ColSpan cho thẻ TD/TH @ThS Lê Văn Phong Thiết kế Web 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 2.3.1 Thiết kế bảng biểu – Table(tt) Định dạng Table Trộn ô: Thuộc tính Ý nghĩa Tạo có độ cao n hàng Tạo có độ rộng n cột Tạo tiêu đề có độ cao n hàng Tạo tiêu đề có độ rộng n cột @ThS Lê Văn Phong Thiết kế Web Bài tập thực hành thiết kế trang Web bán giày dép @ThS Lê Văn Phong Thiết kế Web 10 @ThS Lê Văn Phong Thiết kế Web ... có độ rộng n cột @ThS Lê Văn Phong Thiết kế Web Bài tập thực hành thiết kế trang Web bán giày dép @ThS Lê Văn Phong Thiết kế Web 10 @ThS Lê Văn Phong Thiết kế Web ... Phong Thiết kế Web 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 2.3.1 Thiết kế bảng biểu – Table(tt) Định dạng Table Trộn ơ: Dùng thuộc tính RowSpan ColSpan cho thẻ TD/TH @ThS Lê Văn Phong Thiết kế Web 2.3 THIẾT...2.3 THIẾT KẾ BẢNG BIỂU (TABLE) Thiết kế Web 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 2.3.1 Thiết kế bảng biểu - Table - Table cấu trúc gồm nhiều hàng giao với nhiều cột (kỹ thuật thiết kế bố cục