Chuong 3 - Bảng , khung và biểu mẫu

Vai trò của bảng trong thiết kế web Table phục vụ hai chức năng chính trong thiết kết web: trình bày thông tin dưới dạng cột báo chí, quản lý
Nội dung trích xuất từ tài liệu:
Chuong 3 - Bảng , khung và biểu mẫuChương 3 BẢNG,KHUNGvàBIỂUMẪUI. BẢNG (TABLE)I.1. Vai trò của bảng trong thiết kế web Table phục vụ hai chức năng chính trong thiết kết web: trình bày thông tindưới dạng cột báo chí, quản lý các cách trình bày tư liệu web. Với bảng, chúng tacó thể chia trang web thành các vùng khác nhau và trình bày thông tin lên các vùngđó. Hiện nay, bảng là công cụ chính để thiết kế các trang web. Trong mỗi ô củabảng ta có thể đặt các thông tin như : văn bản, hình ảnh, biểu mẫu (form), đườngkẻ ngang, video, hyperlink, đặt biệt là có thể đặt một bảng khác vốn là kỹ thuậtthông dụng hiện nay. Table là tập hợp các thông tin hay dữ liệu được sắp xếp trong các cột(column) và dòng (row) có liên quan với nhau. Phần tử cơ bản của bảng là ô (cell)I.2. Tạo bảng Để tạo bảng, ta sử dụng thẻ và , kết hợp với các thẻ và để định nghĩa dòng của bảng. Trong mỗi dòng, ta dùng thẻ và để định nghĩa các ô. (TR, TD là chữ viết tắt của Table Row, Table Data)1.2.1. Cú pháp thẻ và bắt buộc phải có--> Với n là là một số nguyên dương chỉ độ rộng tính bằng pixel hay tỷ lệ %của độ rộng của cửa sổ trang web.  Đặt bảng vào giữa trang web : sử dụng thuộc tính ALIGN với giá trịCENTER.  Dàn văn bản xung quanh bảng: sử dụng thuộc tính ALIGN với giá trịLEFT (bảng ở bên trái văn bản) hoặc RIGHT (bảng ở bên phải văn bản). Đây làkỹ thuật để trình bày ảnh và lời chú thích luôn luôn đi đôi với nhau. Ví dụ : Để dừng việc dàn văn bản bên trái hoặc bên phải bảng, ta sử dụng mộttrong các thẻ , hay  Định dạng bảng, ta sử dụng các thuộc tính sau đây: - Border : xác định độ rộng của đường biên của bảng, có giá trị từ 0-6 - BorderColor: Xác định màu của đường biên của bảng và các ô. - BorderColorLight, BorderColorDark: xác định đường biên màu tô bóng của mỗi ô. Thông thường, để tạo sự hài hòa về màu sắc ta chọn BorderColor có giá trị cùng với BorderColorDark và BorderColorLight cùng tông màu với màu nền trang web. - Bgcolor: xác định màu nền của bảng, giá trị là một tên màu hay một số hexa, Thuộc tính này không còn được W3C khuyên dùng, thay vào đó bằng bảng kiểu (style sheet). - Background : xác định ảnh nền của bảng, giá trị là tên một tệp tin hình ảnh - CellSpacing : xác định khoảng cách giữa các ô của bảng - CelPadding : xác định khoảng cách nội dung trong mỗi ô tới các dường biên dọc của nó.. - Style : đây là một kỹ thuật của CSS mà ta sẽ nghiên cứu ở chương sau, dùng để định dạng nội dung trong mỗi ô như Font color, Font style ... Ví dụ :Trung tâm Tin học ABC KẾT QUẢ THI TT Họ và tên sinh viên Kết quả thi Lý thuyết Thực hành 01 Trần Bình Minh 9 10 02 Nguyễn Quang Hùng 27 10 8 1.2.2. Cấu trúc cơ bản một bảng Hình vẽ dưới đây minh họa cấu trúc một bảng và các thuộc tính cơ bản củanó, chú ý rằng giá trị của thuộc tính (table) Border và BorderColor sẽ tác dụng lêncác cell border ngoại trừ những ô nào có khai báo giá trị riêng của nó về hai thuộctính này. Đối với mỗi ô, khi thiết lập giá trị cho hai thuộc tính BorderColorDark vàBorderColorLight sẽ phủ định tác dụng của các giá trị màu đã khai báo trong table,cell.1.2.4. Cú pháp và cách sử dụng thẻ và  Thẻ xác định một phần tử chứa nhiều ô của một dòng, các thuộctính khai báo trong thẻ có tác dụng trên toàn bộ các ô của dòng, nếu các ôkhông có khai báo gì khác. Các thuộc tính của thẻ : BgColor, BorderColor,BorderColorDark, BorderColorLight, Align, vAlign. - Align = left | right | center, xác định cách căn lề giữa nội dung của cácô so với hai biên dọc của mỗi ô. - vAlign =baseline | bottom | middle | top , xác định cách căn lề giữanội dung của các ô so với hai biên ngang của mỗi ô. 28  Thẻ có các thuộc tính như thẻ , ngoài ra thẻ này có các thuộctính riêng : Width xác định độ rộng của ô, giá trị của thuộc tính này là một sốnguyên dương tính bằng pixel hay tỷ lệ % so với độ động của bảng. Nghiên cứu thêm TFOOT, THEAD, CAPTION, TBODY ... trong phần bàitậpI.3. Một ứng dụng của bảng Nhiều trang web hiện nay dùng bảng để thể hiện banner, menu và nội dungtừng đề mục được chọn, ví dụ các trang web của VietNamNet, VNExpress, TuoitreOnline,v.v..., ví dụ web site của báo Tuổi trẻ điện tử, các layout (bố cục) cơ bảnsử dụng bảng như sau: Các nội dung đặt tại mỗi ô của bảng có thể do các kịch bản (script) đượcviết bằng một ngôn ngữ kịch bản nào đó xác định. Đọan mã của trang web đượclược trích như sau : Tuổi Trẻ ...