Session 05

Chương 5

Bảng (Tables)

Mục đích bài học Kết thúc chương này, bạn có thể:    

Hiểu những nét cơ bản về bảng Tạo bảng ở chế độ chuẩn (standard) và chế độ bố cục (Layout) Định dạng bảng sử dụng các thuộc tính của bảng Xuất dữ liệu từ bảng

5.1

Cơ bản về bảng (Table )

Việc xây dựng một trang web không có nghĩa chỉ là lắp ráp các thành phần nội dung lại với nhau rồi đưa lên máy chủ Web. Mà nó là cả một nghệ thuật đòi hỏi nhiều sự suy nghĩ. Việc bố trí nội dung và hình ảnh trên trang web cũng quan trọng không kém nội dung của thông tin trên trang web đó. Bảng là một cách để sắp xếp nội dung trên trang web một cách hiệu quả và có cấu trúc. Trong HTML, bạn có thể tạo bảng ở chế độ bố cục (layout) hoặc chế độ chuẩn (Standard). 5.1.1

Chế độ chuẩn (Standard View)

Nhấn vào tab Layout trên thanh công cụ Insert. Và bạn sẽ thấy như sau:

Hình 5.1 Trong thanh công cụ Insert, thẻ layouttab Layout được kích hoạt Ở giữa thẻtrên tab Layout ta sẽ thấy hiển thị chế độ chuẩn (Standard View) và chế độ bố cục (Layout View). Cả hai chế độ này đều liên quan đến những tính năng về bảng trong Dreamweaver. Như bạn thấy ở hình 5.1 nghĩa là chúng ta đang ở chế độ chuẩn (Standard view), và bạn có thể chèn một bảng bình thường vào trang web của mình (dùng lệnh Insert Table trong thẻ tab Tables của thanh công cụ Insert). Để chuyển sang chế độ chuẩn, bạn chọn menu View Table View Standard View hoặc nhấn vào nút Standard View trên thẻ tab Layout của thanh công cụ Insert. 5.1.2

Chế độ bố cục (Layout View)

Dreamweaver MX cung cấp cho bạn nhiều cách khác nhau để tạo ra bố cục cho trang web. Nhìn chung, các bảng dạng HTML thường được dùng để cố định vị trí của các thành phần trên trang web như văn bản, hình ảnh và những thành phần khác, nhưng vì bảng vốn được tạo ra để hiển thị nội dung dạng cột và dòng cho nên ta cảm thấy khó khăn khi dùng bảng để bố trí nội dung trên trang Web.

1

Bảng (Tables)

Vì thế, chế độ bố cục được đưa ra để đơn giản hóa việc sử dụng bảng trong việc tạo bố trí cho trang web vì nó rất thân thiện và dễ dàng thao tác. Chế độ bố cục có thể dùng để thiết kế các trang web dùng bảng như là bộ khung chính của trang, và nhờ đó tránh được các sự cố thường gặp khi tạo bảng một cách bình thường. Ví dụ, ở chế độ bố cục bạn có thể dễ dàng vẽ các ô layout trên trang web của mình và bạn còn có thể di chuyển các ô đó tới nơi nào cũng được. Bạn còn có thể tạo ra các bảng với kích thước cố định hoặc tự động co giản theo cửa sổ trình duyệt. Lưu ý: Ở chế độ bố cục, bạn không thể sử dụng công cụ Insert Table hoặc Draw Layer. Để dùng được những công cụ này, bạn cần phải chuyển về chế độ chuẩn (Standard) trước. Để chuyển về chế độ chuẩn, nhấn vào nút Standard View trên thẻ Layout của thanh công cụ Insert hoặc chọn menu View  Table View  Standard View.

Hình 5.2 thẻ Tab Layout trên thanh Insert Bạn vẽ bảng sử dụng nút vẽ ô Layout (Draw Layout Cell) và nút vẽ bảng Layout (Draw Layout Table) trên thẻ Layout của thanh công cụ Insert. 5.2

Chèn bảng

Việc chèn bảng trong Dreamweaver rất đơn giản. Bạn có thể vẽ bảng ở cả 2 chế độ chuẩn và bố cục. Trước khi bắt đầu tạo bảng, bạn cần nắm rõ một số khái niệm cơ bản sau đây.

 Dòng (Rows) – Bạn có thể tạo nhiều dòng trong một bảng. Dòng là những ô được sắp xếp từ trên xuống dưới trong bảng của bạn.

 Cột (Columns) – Bạn có thể tạo nhiều cột trong bảng. Cột là những ô được sắp xếp từ trái sang phải.

 Độ rộng (Width) – độ rộng của toàn bộ bảng có thể được xác định bằng thuộc tính này. Nó là độ rộng theo chiều ngang của bảng.

 Đường viền khung (Border) – thuộc tính này xác định độ dày của đường viền xung quanh bảng (độ dày được tính bằng đơn vị Pixel).

 Cell Padding – Đây là khoảng cách xung quanh nội dung của ô. Cell Padding và Cell Spacing điều khiển khoảng cách giữa các ô và nội dung của các ô trong bảng.

 Cell Spacing – Đây là khoảng cách giữa các ô trong bảng. Để tạo ra bảng ở chế độ chuẩn, thực hiện các bước sau đây:

2

Bảng (Tables)

1. Để vẽ bảng ở chế độ chuẩn. nhấn vào nút Draw Insert Table. 2. Hộp thoại Insert Table sẽ xuất hiện. 3. Gõ vào số dòng (Rows) và cột (Columns); độ rộng của bảng ở đơn vị % hoặc Pixel. 4. Nếu bạn không muốn bảng có khung viền thì thiết lập Border=0. 5. Thiết lập giá trị cho Cell Padding và Cell Spacing. 6. Nhấn OK. 7. Bạn sẽ thấy một bảng mới được chèn vào ở chế độ chuẩn.

Hình 5.3 Hộp thoại Insert Table

3

Bảng (Tables)

Hình 5.4 Bảng được vẽ ở chế độ chuẩn Lưu ý:  Bạn không thể vẽ bảng bên cạnh các nội dung đã có trên trang web. Nếu bạn muốn vẽ bảng thì bạn nên tạo một khoảng trống vừa đủ ở phía dưới nội dung rồi mới vẽ bảng.  Bạn không thể vẽ bảng đè lên trên bảng khác.  Để vẽ nhiều hơn 1 bảng mà không muốn nhấn nút Draw Layout Table nhiều lần, đầu tiên bạn nhấn nút Ctrl rồi mới nhấn chuột vào nút Draw Layout Table, sau đó vẫn giữ nút Ctrl rồi vẽ các bảng.

4

Bảng (Tables)

Khi đã tạo xong bảng, bạn có thể di chuyển chuột lên trên đường khung của bảng và bạn sẽ thấy ký hiệu con chuột sẽ chuyển thành ký hiệu 2 đầu mũi tên cho phép bạn co dãn độ rộng, chiều cao của bảng. Những bảng mà bạn muốn dùng để bố trí trang web (ví dụ như bảng chứa thanh menu, chứa phần tiêu đề hoặc các văn bản trên trang web) thường có khung viền (border) là 0 để ta không thấy được bảng trên trang web. 5.3

Định dạng bảng

Thêm, xóa, trộn hoặc tách ô, dòng và cột cũng tương đối phức tạp. Cách tốt nhất để làm quen với những việc này là ta tạo ra một bảng và thao tác trên đó. Khi bạn vẽ bảng ở chế độ bố cục (Layout view), những thuộc tính của bảng sẽ xuất hiện trong hộp Property như hình 5.5.

Hình 5.5 Thuộc tính của bảng Layout Bạn có thể thiết lập các thuộc tính sau đây của bảng:

 Fixed: Khi chọn tùy chọn này nghĩa là bạn xác định bảng được vẽ ở độ rộng cố định. Bạn có thể thay đổi độ rộng của bảng bằng cách nhập số (pixel) vào trong text field.

 AutoStretch: Nếu bạn muốn bảng tự động co giản tùy theo kích thước của trình duyệt thì bạn nên chọn tùy chọn AutoStretch

 Height: Đây là chiều cao của bảng tính bằng đơn vị pixels.  Bg: Với thuộc tính này bạn có thể xác lập màu nền của bảng.  CellPad: Cell Padding là khoảng cách giữa nội dung của ô và đường khung của ô đó. Khi bạn tăng giá trị ở đây, bạn sẽ thấy khoảng cách giữa nội dung và đường khung của ô sẽ tăng lên.

 CellSpace: Cell Spacing là khoảng cách giữa các ô kế cận nhau trong bảng.  Clear Row Heights: Xóa bỏ độ cao đã thiết lập cho tất cả các ô trong bảng. Dreamweaver tự thiết lập độ cao cho các ô để bạn bố trí khi vẽ bảng, ngay cả đối với các ô rỗng. Vì thế, bạn chỉ nên nhấn vào nút này sau khi đã đặt nội dung vào trong ô, nếu không những ô rỗng sẽ bị thu hẹp.

 Make Widths Consistent: Thay đổi độ rộng của ô trong mã HTML cho phù hợp với độ rộng khi hiển thị nội dung trên trang web. Ví dụ nếu bạn đã thiết lập độ rộng cho ô là 200 pixels và sau khi thêm nội dung vào trong ô này thì ta thấy ô cần phải rộng 250 pixels thì mới chứa đủ phần nội dung, lúc đó ta sẽ thấy xuất hiện 2 con số ở trên cùng của bảng hiển thị 200 (độ rộng trong mã HTML) và (250) trong ngoặc đơn (kích thước hiển thị trên trang). Khi nhấn nút

5

Bảng (Tables)

Making Widths Consistent sẽ làm thay đổi giá trị trong mã HTML thành 250, phù hợp với độ rộng sẽ hiển thị.

 Remove All Spacers: Xóa bỏ tất cả những hình trong suốt dùng để điều khiển khoảng cách trong bố cục từ bảng layout.

 Remove Nesting: Loại bỏ các bảng lồng trong bảng khác mà không bị mất nội dung của bảng. Để chỉnh sửa hoặc thay đổi bảng (ví dụ: di chuyển, thêm ô, dòng, cột, trộn ô, tách ô…) bạn có thể hoặc là nhấn chuột vào bảng rồi nhấn phím phải chuột để chọn vào menu Table trong menu popup, hoặc chọn vào menu Modify > Table. Lưu ý: Bạn có thể thay đổi giá trị mặc định của màu viền của ô hoặc của bảng, màu nền của bảng, những hình spacerkhông gian ảnh … bằng cách chọn vào menu EditPreferences. Trong hộp thoại Preferences - Ở hộp Category bạn chọn Layout View. Ở đây bạn có thể định nghĩa các thuộc tính phù hợp với yêu cầu của bạn.

Hình 5.6 Định dạng bảng sử dụng các thuộc tính của bảng Lưu ý: Dreamweaver tự động hít nhập (snap) các cạnh của một ô mới vào các cạnh ô lân cận. (do các ô Layout không được đè lên nhau.) các cạnh của ô còn tự động hít nhập vào cạnh của các bảng bao quanh khi bạn vẽ các ô đó gần với đường viền của bảng. Để tạm thời bỏ tính năng hít nhập của Dreamweaver, giữ phím Alt rồi vẽ ô. 5.3.1

Để vẽ những ô LayoutCác bước vẽ những ô Layout

Để tạo bảng ở chế độ bố cục (Layout View), thực hiện các bước sau

1. Chọn Layout View từ thanh công cụ Insert, ở thẻtrên tab Layout.

6

Bảng (Tables)

2. Đầu tiên click chuột vào nút Draw Layout Cell nằm ở thẻtrên tab Layout trên thanh công cụ Insert.

3. Con trỏ chuột sẽ chuyển thành dấu cộng (+). Bạn click chuột vào vị trí mà bạn cần vẽ ô và kéo chuột để vẽ ra một ô layout như ở hình 5.7.

4. Ô layout sẽ được thể hiện bằng đường khung màu xanh dương (blue). Độ rộng của từng ô sẽ được hiển thị phía trên cùng của cột

5. Nếu bạn vẽ những ô layout trong một trang web trống, Dreamweaver sẽ tự động tạo ra một bảng layout bao quanh ô layout mà bạn vừa vẽ.

Hình 5.7 Ô Layout Lưu ý: Để xem thuộc tính của các ô Layout trong hộp Property, nhấn chuột vào cạnh của các ô Layout. 5.3.2

Thuộc tính của ô Layout

Thuộc tính của ô có thể được thay đổi bằng hộp Property. Ta thấy thuộc tính của ô layout như ở hình 5.8. Mỗi một ô có các thuộc tính độ rộng, chiều cao, màu nền và canh lề của riêng nó. Bạn có thể thiết lập các thuộc tính của ô layout trong hộp Property như chiều cao, độ rộng, màu nền và canh lề của nội dung trong ô.

Hình 5.8 Thuộc tính của ô Layout

 Fixed: Thiết lập ô layout trở thành ô có độ rộng cố định tính bằng pixels.

7

Bảng (Tables)

 AutoStretch: Làm cho ô layout co giản theo kích thước của trình duyệt.  Bg: Màu nền của ô. Nhấn vào nút mũi tên để chọn màu trong hộp màu.  Horz: Thiết lập canh lề theo chiều ngang cho nội dung bên trong ô, có thể canh trái, phải hoặc canh giữa hoặc mặc định.

 Vert: Thiết lập canh lề theo chiều đúng, có các giá trị Top, Middle, Bottom, Baseline hoặc default. chế độ baseline canh lề dựa the đường căn văn bản của tất cả các ô trong dòng. Ở hình 5.9 văn bản ở các ô không được canh lề. Ở hình 5.10, ta đã áp dụng các cách canh lề khác nhau cho văn bản trong ô.

Hình 5.9 Canh lề mặc định

Hình 5.10 Các kiểu canh lề khác nhau

8

Bảng (Tables)

 No Wrap: Tùy chọn này tránh tình trạng chữ bị xuống dòng khi nội dung dài hơn độ rộng của ô. Ô layout sẽ tự động giản ra để phù hợp với độ dài của văn bản và sẽ không tự động xuống dòng mới. 5.3.3

Bảng lồng nhau (Nesting Tables)

Một bảng lồng nhau nghĩa là một bảng nằm bên trong một ô của một bảng khác như ở hình 5.11. Nói một cách đơn giản thì nó là một bảng nằm trong một bảng khác. Bạn có thể sửa đổi bảng lồng như bất kỳ một bảng bình thường khác. Tuy nhiên, độ rộng của nó không được vượt quá độ rộng của ô chứa nó.

Hình 5.11 Bảng lồng nhau (Nested Tables)

Hình 5.12 Văn bản và hình ảnh được chèn vào trong bảng lồng nhau Để lồng một bảng vào trong một ô của bảng khác, ta làm như sau 1.

Nhấn vào trong một ô của một bảng đã có sẳn.

9

Bảng (Tables)

2.

Chọn menu Insert  Table hoặc nhấn vào nút Insert Table trong thẻ tab Tables của thanh công cụ Insert.

3.

Hộp thoại Insert Table sẽ xuất hiện. Ở đây bạn có thể xác định số dòng, cột, độ rộng và thuộc tính đường khung của bảng. 5.3.4

Dữ liệu dạng bảng (Tabular Data)

 Nhập dữ liệu từ nguồn ngoài vào bảng (import) Nếu bạn đã có sẳn dữ liệu từ các ứng dụng khác, mà bạn muốn đưa dữ liệu đó vào trang web của mình, thì Dreamweaver MX có một tùy chọn cho việc này. Dữ liệu dạng bảng đã được tao sẳn trong các ứng dụng khác (ví dụ: Microsoft Excel) và được lưu thành dạng file text định giới (delimited) (nghĩa là các nội dung của cột sẽ được phân ra bằng các ký tự định giới như dấu phẩy (,) dấu chấm (.) dấu chấm phẩy (;) hoặc các ký tự định giới bất kỳ nào khác…) có thể được chuyển vào trong Dreamweaver và định dạng thành bảng. Lưu ý: Để chuyển file về dạng định giới trong Excel, ta chọn Save as, trong hộp thoại này ta sẽ chọn loại định dạng cần lưu như Text (tab delimited), Formatted Text (Space delimited)… Cần phải xác định cẩn thận ký tự định giới, nếu không bảng sẽ không được chính xác khi nhập vào Dreamweaver. Các bước để nhập dữ liệu dạng bảng vào Dreamweaver MX: 1. Chọn menu File  Import  Tabular Data Hoặc 2. Chọn menu Insert  Table Objects  Import Tabular Data Hộp thoại Import Tabular Data sẽ hiển thị như ở hình 5.13. 3. Bạn có thể thiết lập các tùy chọn sau trong hộp thoại: • Data File: Nhấn nút Browse để chọn tập tin nguồn chứa dữ liệu cần nhập vào. • Delimiter: Xác định ký tự định giới sử dụng trong tập tin nguồn. Nếu bạn chọn giá trị ‘other’, thì sẽ có một text box xuất hiện để bạn nhập vào ký tự định giới bất ký. • Table Width: Cho phép bạn xác định độ rộng của bảng sẽ được tạo ra.. Bạn chọn Fit to Data nếu bạn muốn các cột trong bảng rộng vừa đủ để chứa dữ liệu nhập vào. Bạn chọn Set nếu bạn muốn xác định độ rộng chính xác của bảng tính bằng pixels hoặc tính theo đơn vị %. • Cell Padding: là số pixel nằm ở giữa nội dung và đường viền của ô. • Cell Spacing: là số pixel nằm giữa những ô cận kề nhau. • Format Top Row: Bạn có thể áp dụng định dạng cho dòng đầu tiên như: No formatting, Bold, Italic và Bold Italic. • Border: Xác định độ dày của đường viền tính theo pixels. 4. Nhấn OK. Dữ liệu sẽ được nhập vào trong Dreamweaver.

10

Bảng (Tables)

Hình 5.13 Hộp thoại Import Tabular Datanhập dữ liệu dạng bảng

5.3.5

Sắp xếp dữ liệu trong bảng

Nếu bạn đã có một bảng chứa dữ liệu mà cần phải sắp xếp theo chữ cái hoặc chữ số với thứ tự tăng dần hoặc giảm dần thì bạn có thể sử dụng tính năng Sort Table của Dreamweaver MX. Tính năng này giúp cho việc sắp xếp dữ liệu được nhanh chóng và tùy biến. Để dùng tính năng này, bạn cần phải chọn toàn bộ bảng, hoặc một cột hoặc một dòng nào đó.. Ta xem cách thức sắp xếp bảng như sau: Chọn menu Commands  Sort Table Hộp thoại Sort Table xuất hiện như hình 5.14. 2. Bạn có thể thiết lập các tùy chọn sau đây trong hộp thoại Sort Table: • Sort By: Chỉ định sắp xếp theo cột nào. • Order: Xác định bạn muốn sắp xếp chữ cái, chữ số theo thứ tự tăng dần hay giảm dần. • Then By/Order: Bạn có thể dùng mục này để sắp xếp trên nhiều cột. • Sort Includes First Row: Xác định dòng đầu tiền của bảng có đưa vào phần dữ liệu cần sắp xếp hay không. Nếu dòng đầu tiên là dòng tiêu đề cột thì ta không nên đưa vào phần dữ liệu cần sắp xếp. • Sort THEAD Rows (If Any): Xác định sắp xếp tất cả các dòng ở vùng THEAD của bảng () (nếu có) sử dụng cùng một điều kiện ở phần thân của bảng. (Chú ý: các dòng ở phần THEAD sẽ vẫn nằm ở vùng THEAD và vẫn ở vị trí trên cùng của bảng sau khi sắp xếp). • Sort TFOOT Rows (If Any): Xác định sắp xếp tất cả các dòng ở vùng TFOOT () (nếu có) sử dụng cùng một điều kiện ở phần thân của bảng. (Các dòng ở vùng TFOOT vẫn nằm ở vùng TFOOT và vẫn ở vị trí dưới cùng của bảng sau khi sắp xếp). 1.

Keep TR Attributes With Sorted Row: Chỉ định rằng các thuộc tính của dòng (như là màu nền, font chữ…) sẽ vẫn ở cùng vị trí với nội dung sau khi sắp xếp. Nếu bảng của bạn được định dạng bằng 2 màu xen kẻ kẽ giữa từng dòng thì không nên chọn tùy chọn này để giữ nguyên định dạng của bảng. Nếu thuộc tính của dòng dùng để phân biệt nội dung của dòng đó (ví dụ: dòng màu xanh chứa thông tin của khách hàng A, màu đỏ chứa thông tin của khách hàng B) thì ta mới cần dùng thuộc tính này. 11

Bảng (Tables)

3. Nhấn nút OK hoặc Apply Dữ liệu trong bảng sẽ được sắp xếp lại theo những tùy chọn mà bạn đã thiết lập trong hộp thoại Sort Table.

Hình 5.14 Hộp thoại Sort Table

5.3.6

Xuất dữ liệu từ bảng

Ngược lại với việc nhập dữ liệu dạng bảng, chúng ta còn có thể xuất dữ liệu dạng bảng từ Dreamweaver sang các ứng dựng khác, mà hỗ trợ loại dữ liệu đó. Bạn có thể xuất các dữ liệu đã có trong bảng của Dreamweaver thành một file văn bản định giới sử dụng các ký tự định giới như ký tự tabs, dấu phẩy, dấu chấm, dấu chấm phẩy, ký tự khoảng trắng.

Hình 5.15 Hộp thoại Export Table Để xuất dữ liệu từ Dreamweaver: 1. Đặt con trỏ vào bất kỳ ô nào trong bảng. 2. Chọn menu File  Export  Table. Hộp thoại Export Table xuất hiện như ở hình 5.15

12

Bảng (Tables)

3. Trong hộp thoại này, thiết lập tùy chọn như sau: • Delimiter: Chỉ định ký tự định giới sẽ dùng trong tập tin định giới sẽ được xuất ra. • Line Breaks: Chỉ định hệ điều hành (Windows, Macintosh hoặc Unix) mà sẽ sử dụng để mở tập tin được xuất ra. Các hệ điều hành khác nhau có cách thức khác nhau để xác định vị trí kết thúc của tập tin văn bản 4. Nhấn Export. Hộp thoại Export Table As… sẽ xuất hiện. 5. Trong hộp thoại này, gõ tên của tập tin sẽ chứa dữ liệu được xuất ra. 6. Nhấn nút Save. Tập tin định giới với tên vừa được nhập ở hộp thoại Export Table As…sẽ được tạo ra.

13

Bảng (Tables)

Tóm tắt

 Trong chế độ bố cục (Layout View) bạn không thể dùng công cụ chèn bảng (Insert Table) hoặc vẽ layer (Draw Layer).

 Trong chế độ chuẩn (Standard view), bạn có thể chèn một bảng bình thường vào trong trang web của bạn (dùng lệnh Insert Table từ thẻ tab tables trong thanh công cụ Insert).  Nhìn chung, các bảng dạng HTML thường được dùng để cố định vị trí của các thành phần trên trang web như văn bản, hình ảnh và những thành phần khác

 Chế độ bố cục (Layout View) có thể dùng để thiết kế các trang web dùng bảng như là bộ khung chính của trang, và nhờ đó tránh được các sự cố thường gặp khi tạo bảng một cách bình thường

14

Bảng (Tables)

Kiểm tra tiến độ 1. Trong ___________bạn không thể dùng công cụ chèn bảng (Insert Table) hoặc vẽ layer (Draw Layer)

a. Đường khung viền (Border) b. Chế độ bố cục (Layout View) c. Siding d. Top

2. Bạn có thể xuất các dữ liệu đã có trong bảng của Dreamweaver thành một file văn bản định giới sử dụng các ký tự định giới như ký tự tabs, dấu phẩy, dấu chấm, dấu chấm phẩy, ký tự khoảng trắng. a. Đúng b. Sai

3. Trong các thuộc tính của bảng. _________ là khoảng cách xung quanh nội dung của ô.. a. b. c. d.

Cell Padding Cell Spacing Cell Width Cell Border

4. Trong các thuộc tính của bảng. __________ Loại bỏ các bảng lồng trong bảng khác mà không bị mất nội dung của bảng. a. b. c. d.

Remove Nesting Remove Cell Padding CellPad Remove All Spacers

15