Bài giảng thiết kế Web cơ bản

TRƯỜNG ĐẠI HỌC NHA TRANG TRUNG TÂM NC&PT CÔNG NGHỆ PHẦN MỀM Baøi giaûng THIEÁT KEÁ WEB CÔ BAÛN TỚI TRANG 18 RÙI NHA TRANG, 11/2008 MỤC LỤC Chương 1. GIỚI THIỆU MẠNG INTERNET Lịch sử mạng Internet Mạng Internet ban đầu được biết dưới tên là ARPANET do tổ chức Advanced Research Projects Agency (ARPA) của Mỹ thiết lập năm 1969. Mục đích chính của mạng này là tạo cơ sở cho các máy tính nghiên cứu của các trường đại học có thể kết nối và trao đổi với nhau. Mạng Internet và ngày nay đã trở thành mạng toàn cầu kết nối hàng trăm triệu người trên thế giới. Mạng máy tính toàn cầu Internet có thể được xem như là mạng của tất cả các mạng (network of networks), trong đó người dùng tại bất cứ máy tính nào nếu được phép đều có thể truy cập tới các thông tin của các máy khác. Về mặt vật lí, mạng Internet sử dụng một phần của toàn bộ các tài nguyên của các mạng viễn thông công cộng đang tồn tại (public telecommunication networks). Về mặt kĩ thuật, mạng Internet sử dụng tập các giao thức gọi chung là TCP/IP (Transmission Control Protocol/Internet Protocol). Hai mô phỏng của công nghệ mạng Internet là intranet and extranet cũng sử dụng các giao thức này. Sự ra đời của giao thức HTTP và HMTL đã đánh dấu một bước ngoặc mới trong việc sử dụng Internet. Cho tới năm 1990 các dịch vụ cơ bản của Internet vẫn chỉ là e-mail, listserv, telnet, và ftp. Năm 1992, Tim Berners-Lee, một nhà vật lí học tại CERN đã phát triển các giao thức cho World Wide Web (WWW). Trong khi tìm kiếm cách để liên kết các tài liệu khoa học lại với nhau, anh ta đã tạo ra Hypertext Markup Language (HTML), một tập con của Standard Generalized Markup Language (SGML). Từ một chuẩn cho các tài liệu văn bản, HTML ngày nay có thể chứa hình ảnh, âm thanh, video, và cho phép phát triển các ứng dụng thông qua Common Gateway Interface (CGI), ASP, JSP, PHP, Java Servlet,.... Một số khái niệm và thuật ngữ thông dụng Internet: Mạng máy tính toàn cầu kết nối các mạng máy tính khắp nơi trên thế giới. Tập các giao thức được dùng gọi chung là TCP/IP. Intranet: Mạng cục bộ có kiến trúc tương tự mạng Internet. Website: Tập hợp các trang web. Website của các tổ chức hay cá nhân trên mạng bao gồm tập hợp các trang web liên quan đến tổ chức này. Webpage: Là trang web. Có thể hiển thị các thông tin dưới dạng văn bản, hình ảnh, âm thanh, ... Web browser: Trình duyệt web, dùng để hiển thị các trang web. Các web browser thông dụng hiện nay là Internet Explorer của công ty Microsoft và Netscape Navigator của công ty Netscape. Homepage: Trang chủ hay còn gọi là trang nhà. Thường là trang đầu tiên (mặc định) khi truy cập một website. Hyperlink: siêu liên kết. Dùng để liên kết các trang web và dịch vụ của các website trên Internet. IAP (Internet Access Provider): Nhà cung cấp đường truyền Internet. ISP (Internet Service Provider): Nhà cung cấp dịch vụ Internet. Thông thường, ta phải thông qua một ISP nào đó để đăng kí dịch vụ truy cập Internet qua mạng điện thoại. Các nhà cung cấp ISP hiện nay tại Việt Nam là VDC, FPT, SaigonNet, NetNam, ... Search engines: Máy tìm kiếm. Do số lượng các trang web trên Internet rất lớn nên các máy tìm kiếm sẽ hỗ trợ cho ta khi cần truy tìm các trang web liên quan tới vấn đề mà ta quan tâm trong tập hợp khổng lồ các trang web này. Các máy tìm kiếm thông dụng hiện nay là Yahoo, Google, Altavista, ... HTTP, FTP, SMTP, POP3, ...: Đây là các giao thức được dùng cho các dịch vụ web, ftp, email trên Internet. Một số yêu cầu khi soạn thảo web Một số yêu cầu Để giảm thời gian chờ đợi của người sử dụng, ta nên: Chuyển đổi dạng của các file ảnh, file *.jpg có kích thước nhỏ hơn file *.gif. Nén file âm thanh, file .mp3 có kích thước nhỏ hơn file *.wav Nén những file tài liệu sẽ tải xuống. Chọn màu tương phản cho màu nền và màu văn bản. Nếu đưa hình ảnh vào làm nền thì phải sử dụng hình phù hợp, nên tránh sử dụng hình có độ phân giải cao. Hãy tạo nhiều trang web, không nên tạo một trang dài để người sử dụng chỉ tải những phần muốn xem, không cần phải đợi quá lâu để tải toàn bộ nội dung trang web. Tổ chức Website Để thuận tiện cho việc xuất bản (publish) website sau này, trước tiên nên tập trung tất cả các thành phần của website vào một thư mục, ví dụ như C:\MyWebSite. Trong thư mục này, tổ chức một số thư mục con như images dùng để lưu các hình ảnh, db dùng để lưu các tập tin cơ sở dữ liệu, … Sau khi tạo xong thư mục có cấu trúc như trên, trong FrontPage ta tạo mới một website trỏ đến thư mục D:\MyWebSite bằng cách chọn trên thực đơn chức năng File/New/More Web site templates, sau đó gõ vào đường dẫn D:\MyWebSite trong ô của mục Options/Specify the location of the new web. Với việc tạo website này, mỗi khi ta soạn thảo mới bất kì tập tin nào, mặc định nó sẽ được lưu trong thư mục này. Ngoài ra, ta có thể chỉ định bảng mã UTF-8 là bảng mã được dùng mặc định khi tạo mới các tập tin bằng cách chọn trên thực đơn chức năng Tools/Site Settings/Language. Qui ước đặt tên file Khi tạo website trên máy sử dụng hệ điều hành Windows hay Macintosh rồi gởi nó đến server Unix, lỗi mất liên kết thường xảy ra, để tránh trường hợp này ta nên đặt tên file theo những quy tắc sau đây để phù hợp với cả Windows, Macintosh và Unix: Đặt tên file theo quy ước Dos 8.3 hay 8.4: An toàn nhất là dùng tên file theo quy ước 8+3 (tên file 8 ký tự, phần mở rộng 3 ký tự) và không dùng ký tự đặc biệt nào trừ dấu gạch dưới (thí dụ: image_1.htm). Đây là tên file được nhận diện bởi mọi hệ điều hành đang có. index.html: Tên file chính hay file đầu tiên của website nên được đặt là index.html vì server Unix đòi hỏi file nầy phải có phần mở rộng là html thay vì htm như các trang khác. Các Server Windows và Macintosh cũng chấp nhận tên file như vậy làm file chính. Chữ hoa và chữ thường: Windows và Macintosh không quan tâm tới việc phân biệt chữ hoa và chữ thường trong tên file cũng như trong mã liên kết html. Nhưng Unix lại phân biệt chính xác chữ hoa, chữ thường trong tên file và đòi hỏi các liên kết mã html phải chính xác như vậy. Ví dụ: tên file là danh sach.html mà gõ trong lệnh liên kết là DanhSach.html là không được và cũng có sự phân biệt giữa htm và html. Dấu cách (khoảng trắng) trong tên file: Windows và Macintosh cho phép trong tên file có khoảng trắng nhưng Unix thì lại không cho phép nên để tương thích nhiều hệ điều hành, nên đặt tên file không có khoảng trắng, sử dụng dấu gạch dưới để dể phân biệt. Ví dụ: Nên đặt tên file là “danh_sach.htm” thay vì “danh sach.htm”. Chú ý: Tên file nên đặt theo kiểu chữ thường và dùng toàn bộ chữ thường trong mã liên kết nội bộ và dùng địa chỉ tương đối. Ví dụ: ../quanly/danhsach.html Chương 2. THIẾT KẾ TRANG WEB VỚI HTML Giới thiệu ngôn ngữ HTML HTML là ngôn ngữ dùng để xây dựng trang web. Nó mô tả cách thức mà dữ liệu được hiển thị thông qua tập các kí hiệu đánh dấu thường được gọi là tag (thẻ). Các tag này được bao quanh bởi các dấu “”. Ví dụ: , , là các tag HTML. Một trang web thông thường gồm có hai thành phần chính đó là: dữ liệu của trang web (ví dụ như văn bản, hình ảnh, âm thanh, ...) và các tag HTML dùng để mô tả cách thức mà các dữ liệu này được hiển thị. Khi một trang web được tải về trình duyệt, trình duyệt sẽ căn cứ vào các tag HTML để định dạng dữ liệu được hiển thị. Ví dụ: Cùng một dữ liệu là dòng văn bản “Chào các bạn”. Tuy nhiên nếu có thêm định dạng của tag ở dòng thứ hai, hình thức hiển thị dữ liệu sẽ khác. Mã HTML Kết quả hiển thị trên trình duyệt Chào các bạn Chào các bạn Chào các bạn Chào các bạn Đa số các tag của HTML đều có tag bắt đầu và tag kết thúc tương ứng. Tag kết thúc tương ứng với một tag chỉ khác ở chỗ có thêm kí tự “/”. Ví dụ: tag có tag kết thúc tương ứng là . Các tag không phân biệt chữ thường và chữ hoa. Nghĩa là các tag , và là như nhau. Trong quá trình đọc trang web để hiển thị, trình duyệt sẽ bỏ qua các khoảng trắng thừa và các dấu ngắt dòng giữa văn bản dữ liệu và các tag. Ví dụ: Mã HTML Kết quả hiển thị trên trình duyệt Chào các bạn Chào các bạn Chào các bạn Chào các bạn Chào các bạn Chào các bạn Chào các bạn Chào các bạn Khi bắt đầu soạn thảo một trang web, các tag cơ bản sau sẽ đóng vai trò là khung cho việc định nghĩa một trang HTML. Xét ví dụ của một trang HTML đơn giản sau: Chào Chào các bạn ! : Định nghĩa phạm vi của văn bản HTML. : Định nghĩa các mô tả về trang HTML. Các thông tin này sẽ không hiển thị dưới dạng nội dung của trang web. : Mô tả tiêu đề của trang. Tiêu đề của trang web thường được hiển thị như là tiêu đề của cửa sổ hiển thị trang web. Thông tin này cũng có thể được dùng bởi một số máy tìm kiếm để xây dựng chỉ mục các trang web. : Xác định vùng thân của trang web. Đây là phần mà các dữ liệu cùng với các tag HTML sẽ được dùng để định dạng nội dung của trang web. Một tag thông thường bao gồm hai thành phần: tên của tag (dùng để cho biết tag này định nghĩa cái gì) và thuộc tính của tag (dùng để cho biết dữ liệu được hiển thị như thế nào). Ví dụ: Thay đổi các thuộc tính FACE và SIZE của tag Mã HTML Kết quả hiển thị trên trình duyệt Chào các bạn Chào các bạn <FONT FACE="Times New Roman" SIZE="4"> Chào các bạn Chào các bạn Một số thẻ cơ bản của HTML Định dạng trang Định dạng trang thông thường bao gồm các thông tin về tiêu đề trang, bảng mã kí tự được dùng, màu nền, ảnh nền, hình nền, màu văn bản, màu cho các liên kết… Các thuộc tính này được đưa vào thẻ như sau: <BODY LINK = color ALINK = color VLINK = color BACKGROUND = url (tên file nền) BGCOLOR = color TEXT = color TOPMARGIN = pixels RIGHTMARGIN = pixels LEFTMARGIN = pixels > phần nội dung của trang web được đặt ở đây Sau đây là ý nghĩa các tham số của thẻ BODY: Các tham số Ý nghĩa LINK Chỉ định màu của văn bản siêu liên kết ALINK Chỉ định màu của văn bản siêu liên kết đang đang chọn VLINK Chỉ định màu của văn bản siêu liên kết đã từng mở BACKGROUND Chỉ định địa chỉ của ảnh dùng làm nền BGCOLOR Chỉ định màu nền TEXT Chỉ định màu của văn bản trong tài liệu SCROLL YES/NO - Xác định có hay không thanh cuộn TOPMARGIN Lề trên RIGHTMARGIN Lề phải LEFTMARGIN Lề trái Một màu được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue). Trong HTML một giá trị màu là một số nguyên dạng hexa (hệ đếm cơ số 16) có định dạng như sau: #RRGGBB trong đó: RR - là giá trị màu Đỏ. GG - là giá trị màu Xanh lá cây. BB - là giá trị màu Xanh nước biển. Màu sắc có thể được xác định qua thuộc tính bgcolor= hay color=. Sau dấu bằng có thể là giá trị RGB hay tên tiếng Anh của màu. Với tên tiếng Anh, ta chỉ có thể chỉ ra 16 màu trong khi với giá trị RGB ta có thể chỉ tới 256 màu. Một số giá trị màu cơ bản: Màu sắc Giá trị Tên tiếng Anh Đỏ Đỏ sẫm Xanh lá cây Xanh nhạt Xanh nước biển Vàng Vàng nhạt Trắng Đen Xám Nâu Tím Tím nhạt Hồng Da cam Màu đồng phục hải quân #FF0000 #8B0000 #00FF00 #90EE90 #0000FF #FFFF00 #FFFFE0 #FFFFFF #000000 #808080 #A52A2A #FF00FF #EE82EE #FFC0CB #FFA500 #000080 RED DARKRED GREEN LIGHTGREEN BLUE YELLOW LIGHTYELLOW WHITE BLACK GRAY BROWN MAGENTA VIOLET PINK ORANGE NAVY Để đặt tiêu đề cho trang web, ta dùng tag . Để đặt bảng mã mà trang web dùng, ta sử dụng thiết lập các thông số cho tag . Ví dụ thiết lập sau: cho biết trang web sẽ dùng bảng mã Unicode-UTF-8. Ví dụ: Thiết kế trang web có tiêu đề là “Chào mừng các bạn đến với Trung tâm Nghiên cứu và Phát triển Công nghệ Phần mềm”, màu nền cho trang web là màu đỏ, màu chữ là màu trắng và dùng bảng mã Unicode-UTF-8. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> Chào mừng các bạn đến với trung tâm Nghiên cứu và Phát triển Công nghệ Phần mềm Định dạng đoạn văn bản (paragraph) Thẻ (Patagraph):  định dạng phân đoạn. Thuộc tính: ALIGN dùng để canh chỉnh dữ liệu của đoạn, gồm : LEFT (trái), RIGHT (phải) CENTER (canh giữa) JUSTIFY (canh đều hai bên). Ví dụ: Đặt các thuộc tính canh chỉnh cho tag bằng cách lần lượt gán thuộc tính ALIGN trong tag này các giá trị “LEFT”, “CENTER”, “RIGHT” như sau: Chào các bạn Chào các bạn Chào các bạn Thẻ : Xuống dòng trong một đoạn văn bản. Ví dụ: Họ tên: Nguyễn Thủy Đoan Trang Nghề nghiệp: Giảng viên Địa chỉ: Khoa CNTT – Đại học Nha Trang Kết quả hiển thị trên trình duyệt Họ tên: Nguyễn Thủy Đoan Trang Nghề nghiệp: Giảng viên Địa chỉ: Khoa CNTT – Đại học Nha Trang Nếu mã HTML là: Họ tên: Nguyễn Thủy Đoan Trang Nghề nghiệp: Giảng viên Địa chỉ: Khoa CNTT – Đại học Nha Trang thì kết quả trình duyệt không thể xuống dòng theo ý muốn: Kết quả hiển thị trên trình duyệt Họ tên: Nguyễn Thủy Đoan Trang Nghề nghiệp: Giảng viên Địa chỉ: Khoa CNTT – Đại học Nha Trang Thẻ (Hard Rule): Chèn vào một đường thẳng. Thuộc tính: - number = n: độ dày của đường được tính bằng điểm, n = 1, 2, 3, 4. - width = number/percent: chiều rộng của đường, tính theo điểm hay tỷ lệ phần trăm, thuông thường từ: 1%..100%. - align = left/ center/ right: canh lề văn bản - color = màu sắc của đường thẳng. thường dùng để canh chỉnh vị trí và màu của đường kẻ này tương ứng là ALIGN và COLOR. Ví dụ: Trung tâm NC & PT Công nghệ Phần mềm Đào tạo Nghiên cứu - : Văn bản ở giữa hai thẻ này sẽ được hiển thị giống hệt như khi chúng được gõ vào, như dấu xuống dòng giữa hai thẻ này sẽ có ý nghĩa chuyển sang dòng mới. Ví dụ: Mã HTML Kết quả hiển thị trên trình duyệt Chào các bạn Chào các bạn Định dạng ký tự Sau đây là các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch chân... cho các ký tự, văn bản khi được thể hiện trên trình duyệt.  ... ... In chữ đậm ... ... In chữ nghiêng ... In chữ gạch chân Đánh dấu đoạn văn bản giữa hai thẻ này là định nghĩa của một từ. Chúng thường được in nghiêng hoặc thể hiện qua một kiểu đặc biệt nào đó. ... ... In chữ bị gạch ngang. ... In chữ lớn hơn bình thường bằng cách tăng kích thước font hiện thời lên một. Việc sử dụng các thẻ lồng nhau tạo ra hiệu ứng chữ tăng dần. Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ sẽ không có ý nghĩa. ... In chữ nhỏ hơn bình thường bằng cách giảm kích thước font hiện thời đi một. Việc sử dụng các thẻ lồng nhau tạo ra hiệu ứng chữ giảm dần. Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ sẽ không có ý nghĩa. ... Định dạng chỉ số trên (SuperScript) ... Định dạng chỉ số dưới (SubScript) Định nghĩa kích thước font chữ được sử dụng cho đến hết văn bản. Thẻ này chỉ có một tham số size= xác định cỡ chữ. Thẻ không có thẻ kết thúc. ... Chọn kiểu chữ hiển thị. Trong thẻ này có thể đặt hai tham số size= hoặc color= xác định cỡ chữ và màu sắc đoạn văn bản nằm giữa hai thẻ. Kích thước có thể là tuyệt đối (nhận giá trị từ 1 đến 7) hoặc tương đối (+2,-4...) so với font chữ hiện tại. Thuộc tính COLOR dùng trong các tag thường được định nghĩa bằng tên qui ước (ví dụ như RED: màu đỏ, BLUE: màu xanh da trời, ...) hoặc mã RGB dưới dạng 3 chữ số hệ 16 bắt đầu bằng dấu # (ví dụ như #FF0000). Ví dụ: Định dạng đoạn văn bản với font Tahoma, in đậm, kích thước +2 (10pt), màu đỏ: Trung tâm NC & PT Công nghệ Phần mềm Định dạng siêu liên kết (hyperlink) Tag được dùng để đặt một hyperlink. Đoạn văn bản (hay hình ảnh, ...) nằm giữa các tag và sẽ đóng vai trò hyperlink. Thông thường, con trỏ chuột sẽ thay đổi hình dạng (thường là hình bàn tay) khi di chuyển ngang qua đoạn văn bản này. Một hyperlink cho phép liên kết tới một vị trí khác ngay bên trong trang web chứa hyperlink (liên kết nội) hoặc tới một trang web khác (liên kết ngoại). Để tạo một liên kết nội, ta cần thực hiện hai bước: Bước 1: Đánh dấu vị trí (bookmark) của nơi cần liên kết bằng thuộc tính NAME. Bước 2: Tạo hyperlink đến vị trí vừa được đánh dấu, sử dụng thuộc tính HREF. Liên kết nội: # trong mục HREF Để liên kết tới các trang web khác: Điền địa chỉ URL của trang web vào mục HREF. Ví dụ: Minh họa việc tạo liên kết nội để khi người dùng nhấn vào hyperlink “Đến chương 1” thì trình duyệt sẽ chuyển đến vị trí của Chương 1 trong cùng trang web. Mã HTML Kết quả hiển thị trên trình duyệt Đến chương 1 ... ... Chương 1 Đến chương 1 … … Chương 1 Ví dụ: Minh họa việc tạo liên kết ngoại: Mã HTML Ý nghĩa Google Liên kết đến trang ở máy chủ khác Trang chủ Liên kết đến trang khác trong cùng thư mục Click here Gọi một hàm JavaScript Download Hiển thị cửa sổ tải tập tin về. Một số giá trị có thể được dùng để gán cho thuộc tính TARGET của tag là: Giá trị của TARGET Ý nghĩa Name Nạp trang web trong cửa sổ hoặc FRAME có tên là name _blank Nạp trang web vào một cửa sổ trống mới. Cửa sổ mới này không có tên. _parent Nạp trang web vào cửa sổ cha gần nhất của trang web hiện hành. _self Nạp trang web vào cùng cửa sổ với trang web hiện hành. Ðây là giá trị mặc định của hyperlink. _top Nạp trang web vào cửa sổ cao nhât (topmost). Để tạo một liên kết đến tập tin âm thanh, hình hay phim ảnh ta dùng: Văn bản Chú ý: Liên kết đến file chứa trong thư mục không cùng cấp với file gốc, ta phải chỉ đường dẫn: Lên thư mục cấp cao hơn hoặc thư mục cùng cấp khác: 1 bậc: ../; 2 bậc : ../../ Xuống cấp thấp hơn: chỉ tiếp đường dẫn bắt đầu từ thư mục hiện hành là thư mục chứa file gốc (file đang thiết kế). Thẻ định dạng danh sách liệt kê (List) Có 3 dạng thể hiện danh sách sau đây: Danh sách không sắp xếp theo thứ tự Danh sách sắp xếp theo thứ tự Kết hợp 2 loại danh sách trên Định dạnh danh sách không có thứ tự: (Unordered List - UL ) Thẻ … đánh dấu sự bắt đầu và kết thúc danh sách, đầu mỗi mục của danh sách phải đặt tag (list) Thuộc tính: Type = Square/ Circle/ Disc (hình vuông đầy, hình vuông rỗng, chấm đen – mặc định) Ví dụ: Mã HTML Kết quả hiển thị trên trình duyệt Mục thứ nhất Mục thứ hai Mục thứ ba Mục thứ ba Mục thứ hai Mục thứ ba Định dạng danh sách có thứ tự (Ordered List - OL) Thẻ . Thuộc tính: Type = “a”/ “A”/ “i”/ “I”/ “1” (a, b…/ A, B.../ i, ii... / I, II.../ 1,2..-mặc định) Ví dụ: Mã HTML Kết quả hiển thị trên trình duyệt Mục thứ nhất Mục thứ hai Mục thứ ba Mục thứ ba Mục thứ hai Mục thứ ba Các danh sách lồng nhau: Ví dụ: Mã HTML Kết quả hiển thị trên trình duyệt Chương 1 Chương 2 Bài 1 Bài 2 Bài 3 Bài 4 Chương 3 Chương 1 Chương 2 Bài 1 Bài 2 Bài 3 Bài 4 Chương 3 Định dạng bảng biểu (Tables) Thẻ được dùng để định dạng bảng cùng với các thẻ , để định dạng các dòng, cột. Thuộc tính: Thuộc tính Ý nghĩa Boder = number Kích thước đường viền bảng (1, 2, 3,...) Cellspascing = number Khoảng cách giữa các ô (mặc định là 2) Cellpadding = number Khoảng cách đường viền và ô (mặc định là 2) Width = number/percent Độ rộng bảng tính theo pixels, hay phần trăm của cửa sổ hiển thị Height = number/percent Độ cao bảng Align = left/ right/ center Canh lề trái, phải, giữa theo chiều ngang Valign = top/ bottom/ middle Canh lề trên, dưới, giữa theo chiều dọc Bgcolor = màu Chỉ định màu nền cho bảng Bordercolor = màu Chỉ định màu cho đường viền bảng Background = tên file nền Chỉ định file hình ảnh dùng làm nền cho bảng Ví dụ: dòng 1 cột 1 dòng 1 cột 2 dòng 1 cột 3 dòng 2 cột 1 dòng 2 cột 2 dòng 2 cột 3 Kết quả hiển thị trên trình duyệt: Để trộn (merge)/tách (split) các dòng hoặc cột lại với nhau ta dùng các thuộc tính tương ứng là ROWSPAN hoặc COLSPAN. Ví dụ sau minh họa trong một bảng vừa có sự trộn/tách trên dòng và cột: <TABLE BORDER="1" CELLPADDING="5" CELLSPACING="0" WIDTH="310"> Mã nhóm MSSV Họ và tên Nhóm 01 9901234 Trần Văn An 9901235 Nguyễn Hạ Uyên Kết quả hiển thị trên trình duyệt: Có hai cách để thiết lập bề rộng (WIDTH) của một cell hoặc một bảng, đó là tính theo % và tính theo pixel. Trong nhiều trường hợp, việc đặt theo % sẽ làm cho kích thước bảng thay đổi tùy theo dữ liệu và độ phân giải của màn hình máy người dùng, do đó để đảm bảo tính nhất quán trong hiển thị dữ liệu của bảng,