Thiết kế website - Ngôn ngữ HTML - Phần cơ bản

Nội dung text: Thiết kế website - Ngôn ngữ HTML - Phần cơ bản

1. Ngôn ngữ HTML Phần cơ bản Giảng viên : Ths. PHẠM ĐÀO MINH VŨ Email : phamdaominhvu@yahoo.com
2. Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 2
3. Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 3
4. Giới thiệu HTML  HTML (Hypertext Markup Language) : Ngôn ngữ đánh dấu siêu văn bản, dùng để thiết kế trang web  Mô tả cách thức mà dữ liệu được hiển thị thông qua các ký hiệu đánh dấu gọi là tag (Element)  File HTML phải có đuôi HTML hoặc HTM  File HTML có thể được tạo bất kỳ trình soạn thảo web hoặc văn bản nào  HTML trở thành 1 chuẩn của Internet do tổ chức World Wide Web Consortium (W3C) phát triển và duy trì.
5. Giới thiệu HTML  1991 : HTML ra đời  1994 : Nâng cấp phiên bản HTML2  1996 : CSS1 + Javascript  1997 : HTML4  1998 : CSS2  2000 : XHTML 1.0  2005 : Ajax  2009 : HTML5
6. Ví dụ HTML  Cấu trúc tổng quát của 1 file HTML: Title of page This is my first homepage. This text is bold  Để xem kết quả, nhấn đúp vào file hello.html
7. Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 7
8. HTML Elements (Tag)  HTML là văn bản bao gồm các HTML Element, Hay được gọi là các HTML Tag  Mỗi tag có 1 tên, được bao giữa 2 kí tự “ ”  Tag thường đi theo cặp. Ví dụ  Thẻ đầu tiên gọi là thẻ mở ( ), thẻ sau gọi là thẻ đóng ( )  Văn bản giữa thẻ mở và thẻ đóng là nội dung của HTML Tag  HTML tag không phân biệt hoa thường. giống
9. Ví dụ về HTML Elements  Đây là 1 HTML Element This text is bold  Trong đó : – b là tên thẻ đánh dấu bắt đầu và kết thúc element – Thẻ mở – Thẻ đóng – Nội dung của HTML Element là : This text is bold – Khi hiển thị trên trình duyệt : This text is bold – Mục đích của thẻ b là in đậm văn bản nằm trong nó
10. Ví dụ về HTML Tag (tt)  Đây cũng là 1 HTML Tag This is my first homepage. This text is bold  Trong đó – body là tên thẻ – Thẻ mở , thẻ đóng This is my first – Nội dung : homepage. This text is bold – Mục đích thẻ body là chứa tất cả các Element nội dung trong trang HTML
11. Chú ý Mặc dù thẻ HTML không phân biệt hoa thường và nhiều trang web sử dụng chữ hoa. Thế nhưng để phù hợp với các tiêu chuẩn mới nhất của web ta sẽ sử dụng chữ thường cho tất cả các thẻ HTML
12. Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 12
13. Cấu trúc trang HTML Title here
14. Thẻ DOCTYPE  Mọi trang HTML đều nên bắt đầu bằng 1 thẻ DOCTYPE để chỉ ra loại ngôn ngữ đánh dấu nào đang sử dụng.  Trong ví dụ trên ta dùng XHTML 1.0 Transitional  DOCTYPE sẽ cho trình duyệt biết nên render theo kiểu nào ? Nếu bỏ DOCTYPE trình duyệt sẽ render theo kiểu riêng của mình (Quick mode) mà không theo chuẩn 
15. Cấu trúc trang HTML đơn giản  Cấu trúc 1 trang HTML đơn giản không DOCTYPE Title here  Cách xem mã nguồn của 1 trang web : Click chuột phải , nhấn view source
16. Thẻ html  . . . : Bắt đầu và kết thúc tập tin HTML  . . . : Phần đầu trang web  : Khai báo thông tin trang web  Nội dung tiêu đề : Hiển thị nội dung trên thanh tiêu đề  : Là tag rỗng, chứa khai báo đến các tập tin có liên quan như tập tin định dạng thể hiện (.css), xử lý (.js),  Nội dung trên trang : Hiển thị nội dung trên trang.  : Khai báo mẫu định dạng chung cho 1 Element nào đó (tag , , , )  : Khai báo phần ngôn ngữ tham gia xử lý trang web, như Javascript, Vbscript,
17. Tiêu đề - Heading - Thẻ  Thẻ heading dùng để tạo các tiêu đề, đầu đề cho trang web  Có 6 thẻ tiêu đề bao gồm h1, h2, h3, h4, h5, h6  Theo thứ tự h1 (quan trọng nhất) đến h6 (ít quan trọng nhất).  Hầu hết trình duyệt đều hiển thị các thẻ heading tô đậm và sử dụng font lớn hơn bình thường. h1 là lớn và đậm nhất cho đến h6 là lớn và đậm ít nhất  Thẻ heading dùng để đánh dấu các đoạn text mang ý nghĩa quan trọng như tiêu đề bài viết, các mục lục chứ không phải dùng để in đậm văn bản
18. Thẻ h demo  Trình duyệt sẽ tự động thêm dòng trống trước và sau 1 heading Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
19. Đoạn văn – Thẻ p  Thẻ p dùng để đánh dấu một đoạn văn (paragraph)  Trình duyệt sẽ tự động thêm 1 dòng trống trước và sau mỗi đoạn văn  Ví dụ This is a paragraph This is another paragraph
20. Thẻ p demo This is a paragraph This is another paragraph
21. Lưu ý  Nhớ đóng thẻ This is a paragraph This is another paragraph  Quên đóng thẻ là lỗi rất hay mắc phải.  Lỗi này khiến 1 số trình duyệt hiển thị sai. Tuy 1 số có thể hiển thị đúng nhưng sẽ không đúng trong mọi trường hợp  Việc quên đóng thẻ sẽ khiến mã nguồn HTML khó đọc, khó sửa khi có lỗi xảy ra.  Không đóng thẻ là không tuân theo chuẩn web
22. Ngắt dòng – Thẻ br  Thẻ br dùng để ngắt 1 dòng (xuống hàng) nhưng không phải để bắt đầu 1 đoạn văn  Thẻ br sẽ ngắt 1 dòng tại bất kỳ nơi nào nó xuất hiện This is a para graph with line breaks  Chú ý br là thẻ rỗng (nó không có thẻ đóng, thẻ mở).
23. Thẻ br demo This is a para graph with line breaks
24. Thẻ  Dùng để định nghĩa 1 secsion riêng trong trang web, do đó có thể chứa các tag khác như tag đến , , Trung tâm tin học Trường Công nghệ thông tin
25. Thẻ - Horizontal Ruler  Dùng để kẻ đường kẻ ngang  Sử dụng thuộc tính siza va width để thay đổi độ rộng và chiều dài đường kẻ Trung tâm tin học
26. Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 26
27. HTML Attributes  Bên cạnh tên, HTML Tag có thể có thêm các thuộc tính Hello World Tên thuộc tính. Thuộc tính element bgcolor qui định màu nền cho body Giá trị thuộc tính. bgcolor = “red”. Màu Dấu nháy kép (”)hoặc nền trang web sẽ có màu đỏ đơn (‘) dùng để đánh dấu bắt đầu và kết thúc của giá trị thuộc tính.
28. Ví dụ HTML Attribute  Canh giữa heading My page  Giá trị align : – center : canh giữa – left : canh trái – right : canh phải
29. Ví dụ HTML Attribute  Đặt màu nền và màu chữ cho trang web : Hello World  bgcolor qui định màu nền, text qui định màu chữ  Màu có thể là chữ (red,yellow) hoặc số (Ví dụ #FF0000, #FFFF00 )
30. HTML color  Màu sắc bao gồm 3 giá trị chủ đạo là : R (Red), G (Green ) và B (Blue)  Giá trị thấp nhất của của R,G,B là 0 và cao nhất là 255(FF)  Có 3 cách giá trị 1 màu : – Sử dụng tên. Ví dụ red, black, blue, yellow,green,white,red – Sử dụng giá trị hexa. Ví dụ : #FF00FF,#00FF11,#445566  Cách dùng phổ biến nhất là ghi màu dưới dạng hexa
31. Ví dụ HTML color BẢNG MÃ MÀU Tên màu Trị Tên màu Trị Black Đen #000000 Olive Nâu vàng #808000 Red Đỏ #FF0000 Teal Nâu sẫm #008080 Blue Xanh #0000FF Maroon Nâu #800000 Navy X.Đãm #000800 Gray Xám #808080 Lime V.Chanh #FFFFFF Fuchsia Hồng #FF00FF White Trằng #FFFFFF Green Lá #008000 Rurple Đ.Tía #800080 Silver Bạc #C0C0C0 Yellow Vàng #FFFF00 Aqua Ngọc #00FFFF
32. Demo HTML color Quê hương tôi có con sông xanh biếc Nước trong xanh soi bóng những hàng tre Quê hương là cầu tre nhỏ Mẹ về nón lá nghiêng che
33. Cách lấy màu hexa  Nếu trong bức ảnh hoặc 1 trang web có màu chúng ta cần. Làm sao ta biết giá trị hexa của nó ?  Trả lời : – Là ảnh : Sử dụng các chương trình chỉnh sửa ảnh như Photoshop. Dùng tính năng Eye Drop ( ) – Là web : Dùng add-on ColorZilla của Firefox (Download tại colorzilla.com). Sau khi install, click vào biểu tượng (góc trái dưới cùng) sau đó chọn điểm nào trên web cần lấy giá trị màu. – Một cách khác là vào trang
34. Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 34
35. HTML Formats – Định dạng văn bản  HTML cung cấp nhiều thẻ dùng để định dạng văn bản  Có 2 loại thẻ chính : – Thẻ định dạng vật lý : là các thẻ chỉ định trình duyệt phải hiển thị đoạn văn bản như thế nào, font to hay font nhỏ, đậm hay lợt, nghiêng hay bình thường – Thẻ định dạng logic : là các thẻ chỉ định cho trình duyệt biết loại nội dung của đoạn văn bản . Trình duyệt tự do hiển thị theo cách của mình.
36. Thẻ định dạng vật lý Element Meaning Notes In nghiêng In đậm Dạng máy đánh chữ Gạch dưới Bị loại bỏ trong các phiên bản mới HTML và XHTML Gạch ngang Bị loại bỏ trong các phiên bản mới HTML và XHTML Gạch ngang Bị loại bỏ trong các phiên bản mới HTML và XHTML Chỉ số Số mũ Font bự hơn 1 đơn vị Font bé hơn 1 đơn vị
37. Demo thẻ định dạng vật lý This text is bold This text is italic This text is big This text is small This text contains subscript This text contains superscript
38. Demo thẻ định dạng vật lý Physical Text Elements This is Bold This is Italic This is Monospaced This is Underlined This is Strike-through This is also Strike-through This is Big This is even Bigger This is Small This is even Smaller This is Superscript This is Subscript This is Bold, italic, and underlined
39. Thẻ định dạng logic Thẻ Ý nghĩa Hiển thị phổ biến Chữ viết tắt (abbreviation). Thường Ví dụ Mr M. Cụm từ viết tắt (acronym). Thường Ví dụ WWW) Trích dẫn nguồn In nghiêng Mã nguồn Chìều dài cố định Định nghĩa In nghiêng Nhấn mạnh In nghiêng Phím bấm Chiều dài cố định Trích dẫn trong dòng Bao bởi 2 dấu nháy(not in IE 6) Đoạn text ví dụ Chiều dài cố định Nhấn mạnh cực kỳ In đậm Biến lập trình In nghiêng
40. Demo thẻ định dạng logic Physical Text Elements This is Bold This is Italic This is Monospaced This is Underlined This is Strike-through This is also Strike-through This is Big This is even Bigger This is Small This is even Smaller This is Superscript This is Subscript This is Bold, italic, and underlined
41. Demo thẻ định dạng logic
42. Lưu ý  Dùng thẻ định dạng vật lý, tất cả các trình duyệt đều hiển thị đoạn văn bản giống nhau( ví dụ thẻ thì đều sử dụng font đậm)  Thẻ định dạng logic, không qui định việc hiển thị mà qui định loại hay ngữ nghĩa của văn bản. Các trình duyệt khác nhau có thể hiển thị khác nhau  Để thay đổi hiển thị của thẻ logic, ta phải dùng CSS.
43. HTML Preformat  Trình duyệt sẽ tự động lược bỏ khoảng trắng và các kí tự xuống dòng khi hiển thị trang HTML forXem i = ví1 todụ 10 : print i next i
44. HTML Preformat  Để giữ nguyên định dạng (khoảng trắng, xuống dòng, ) ta phải sử dụng thẻ This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code: for i = 1 to 10 print i next i
45. Ví dụ thẻ pre This is P R E F O R M A T T E D T E X T SPACES are ok! So are RETURNS! This is NOT P R E F O R M A T T E D T E X T SPACES and RETURNS are lost.
46. Mã nguồn – thẻ code,kbd,var Computer code Keyboard input Teletype text Sample text Computer variable Note: These tags are often used to display computer/programming code.
47. Địa chỉ với thẻ address Donald Duck BOX 555 Disneyland USA
48. Viết tắt với abbr, acronym UN WWW The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation. This only works for the acronym element in IE 5. This works for both the abbr and acronym element in Netscape 6.2.
49. Viết từ phải qua trái với thẻ bdo If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl): Here is some Hebrew text
50. Trích dẫn với blockquote, q Here comes a long quotation: This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. Here comes a short quotation: This is a short quotation With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special.
51. Đánh dấu chèn, xóa với ins, del a dozen is twenty twelve pieces Most browsers will overstrike deleted text and underline inserted text. Some older browsers will display deleted or inserted text as plain text.
52. Định dạng font chữ với thẻ  Để thay đổi font chữ, kích thướt, màu chữ, , ta dùng tag  Các thuộc tính của tag – Face : kiểu chữ, ví dụ arial, time new roman, – Size : kích thướt font chữ (+1,+2, ) – Color : màu chữ
53. Ví dụ với thẻ Chỉ có thuyền mới hiểu Biển mênh mông dường nào
54. Hiệu ứng chuyển động chữ marquee  Để cho chữ chạy trên màn hình, ta dùng thẻ để thiết lập  Chuỗi ký tự  Hiệu ứng bao gồm : – Scroll:Bắt đầu từ 1 cạnh biến mất ở cạnh kia – Slide:Bắt đầu từ 1 cạnh dừng lại ở cạnh kia – Alternate:Bắt đầu từ 1 cạnh chuyển ngược lại ở cạnh kia
55. Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 55
56. HTML Entities  Trong HTML số kí tự có ý nghĩa đặc biệt như (<, /, ). Làm thế nào để hiển thị nó ?  Trình duyệt tự động loại bỏ các khoảng trắng dư thừa ? Làm thế nào để hiển thị nhiều khoảng trắng mà không dùng thẻ pre ?  Câu trả lời là dùng HTML Entities  HTML Entities là các kí tự đặc biệt được ghi dưới 2 dạng sau : – Kí tự & + Tên Kí tự ; – Kí tự & + Kí tự # + Số ;
57. Ví dụ HTML Entities  Để hiển thị – Kí tự < ta dùng < hoặc < – 3 khoảng trắng ta dùng     – Kí tự & ta dùng &  Lưu ý : – Dùng tên dễ nhớ hơn là dùng số – Tuy nhiên nhiều trình duyệt không hỗ trợ hết các tên mới – Ngược lại, việc hỗ trợ các entities bằng số lại tốt hơn – Tên thực thể có phân biệt chữ hoa và chữ thường
58. Các HTML entities phổ biến Kết quả Mô tả Thực thể dùng Thực thể tên dùng số Khoảng trắng     Lớn hơn > > & Và & & " Dấu nháy kép " " ' Dấu nháy đơn ' (does ' not work in IE)
59. Một số HTML Entities khác Kết quả Mô tả Thực thể dùng Thực thể dùng tên số ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € ¤ section § § © copyright © © ® registered ® ® trademark × multiplication × × ÷ division ÷ ÷
60. Demo HTML Entities Character entities &X; Substitute the "X" with an entity number like "#174" or an entity name like "pound" to see the result.
61. HTML Entities reference  Kham khảo danh sách các HTML entities ở đâu ? – –
62. Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 62
63. HTML List  HTML hỗ trợ 3 loại danh sách – Danh sách không thứ tự (unordered list) – Danh sách có thứ tự (ordered list) – Danh sách định nghĩa (definition list)
64. Unordered list  Một danh sách không thứ tự bao gồm nhiều mục. Mỗi mục sẽ được đánh dấu bằng 1 bullet (thường hình tròn màu đen)  Danh sách bắt đầu bằng thẻ  Mỗi mặt hàng bắt đầu bằng thẻ  Ví dụ An Unordered List: Coffee Tea Milk
65. Các loại danh sách không thứ tự  Sử dụng thuộc tính type của thẻ ul, ta có thể thay đổi hình dáng của bullet trong danh sách  Nếu type = – disc => bullet hình tròn tô đen – circle => bullet hình tròn đen không tô – square => bullet hình vuông
66. Demo kiểu danh sách không thứ tự
67. Ordered list  Một danh sách có thứ tự cũng gồm nhiều mục. Nhưng mỗi mục lại được đánh số từ 1,2,3  Danh sách có thứ tự bắt đầu bằng thẻ ol (ordered list)  Mỗi mục bắt đầu bằng thẻ  Ví dụ : An Ordered List: Coffee Tea Milk
68. Các loại danh sách có thứ tự  Sử dụng thuộc tính type của thẻ ol, ta có thể thay đổi cách đánh số trong danh sách có thứ tự  Nếu không có thuộc tính type, đánh số từ 1,2,3  Nếu type = – a => đánh số từ a,b,c,d – A => đánh số từ A,B,C, – I => đánh số từ I,II,III,IV – i => đánh số từ i, ii, iii, iv
69. Demo kiểu danh sách thứ tự
70. Ví dụ danh sách lồng
71. Danh sách định nghĩa  Danh sách định nghĩa là 1 danh sách bao gồm nhiều mục. Mỗi mục bao gồm 1 từ khóa (term) và một định nghĩa (description) cho từ khóa đó  Danh sách định nghĩa bắt đầu bởi thẻ dl (definition list)  Mỗi mục gồm 2 thẻ : – Thẻ dt (definition term) đánh dấu từ khóa – Thẻ dd (definition description) đánh dấu định nghĩa
72. Demo HTML Entities Coffee Black hot drink Milk White cold drink
73. Lưu ý về danh sách  Các mục trong 1 danh sách có thể là 1 từ, đoạn văn, hình ảnh, âm thanh hay là 1 danh sách khác  Nếu trong 1 mục chứa trong nó 1 danh sách khác. Ta gọi đó là 1 danh sách lồng
74. Các thẻ trong danh sách Thẻ Mô tả ul Xác định 1 danh sách không thứ tự ol Xác định 1 danh sách có thứ tự li Xác định 1 mục trong danh sách dl Xác định 1 danh sách định nghĩa dt Xác định 1 từ khóa dd Xác định mô tả của một từ khóa
75. Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 75
76. HTML Link  Liên kết là địa chỉ 1 tài nguyên trên web  Tài nguyên có thể là 1 trang HTML, 1 hình ảnh, 1 file âm thanh  Anchor là 1 từ khóa dùng để chỉ 1 liên kết trong nội bộ 1 trang  Thẻ dùng để đánh dấu liên kết
77. Thẻ  Trong đó : – href là địa chỉ của tài nguyên cần trỏ tới – name là tên của liên kết (tùy chọn – sử dụng khi dùng anchor) – target qui định cửa sổ nào sẽ mở tài nguyên được liên kết ¥ target = _blank : mở liên kết trong 1 cửa sổ mới ¥ target = _self : mở liên kết trong cửa sổ hiện tại ¥ target = _parent: mở liên kết trong cửa sổ cha của cửa sổ hiện tại
78. Ví dụ  Liên kết trỏ tới trang web Trường  Liên kết đến báo tuổi trẻ. Trang web tuoitre.com sẽ được mở trong 1 cửa sổ mới
79. Anchor(neo)  Để có thể liên kết đến 1 nơi nào đó trong nội bộ trang. Ta phải : – Đánh dấu (Bookmark) vị trí bằng cách sử dụng thuộc tính tên của thẻ – Sau đó liên kết đến vị trí vừa đánh dấu sử dụng thẻ hoặc
80. Địa chỉ URL  Có 2 loại địa chỉ : – Tuyệt đối : Địa chỉ tuyệt đối bao gồm cả tên miền của website – Tương đối : Địa chỉ tương đối chỉ chứa đường dẫn đến tài nguyên so với thư mục hiện tại
81. Kí hiệu đặc biệt  Dấu . : Thư mục hiện tại  Dấu : Thư mục cha thư mục hiện tại
82. Đường dẫn tương đối Book Index.html /Index.html Chapter1 Section1.html WE ARE HERE Section2.html Section2.html Chapter2 /Chapter2/Section1.html Section1.html
83. Media Tag  Để hát 1 bài hát hoặc mở 1 đoạn video, ta sử dụng thẻ  Hát 1 bài hát – ¥ autostar : tự động hát khi được nạp ¥ Loop: Lặp lại liên tục  Chạy 1 file Video –  Chú ý: thuộc tính src chỉ chấp nhận đường dẫn tuyệt đối
84. Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 84
85. Thẻ hình ảnh  Trong HTML, hình ảnh được xác định bởi thẻ  là thẻ rỗng , tức chỉ có thuộc tính, không có thẻ đóng  Để hiển thị 1 hình ảnh, ta phải cung cấp giá trị cho thuộc tính src của . Đây là URL của ảnh đó 
86. Thuộc tính thẻ  src : URL của hình ảnh. Ví dụ  alt : Đoạn text mô tả hình ảnh. Sẽ được hiện khi hình không tìm thấy hoặc chưa nạp kịp  width, height : Dùng để qui định kích thước hiển thị của ảnh. Ta có thể dùng để phóng lớn, hoặc thu nhỏ ảnh. Hình sẽ được hiển thị với kích thước 200x200
87. Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 87
88. Thẻ  Thẻ dùng để hiển thị dữ liệu dưới dạng bảng (như Excel)  Hoặc dùng để layout trang web  Ví dụ
89. Cú pháp thẻ  Bảng được xác định sử dụng thẻ  Trong bảng sẽ có nhiều dòng, được đánh dấu bằng (table row)  Trong mỗi dòng sẽ có nhiều ô dữ liệu, được đánh dấu bằng thẻ (table data)  Mỗi ô dữ liệu có thể chứa 1 kí tự, hình ảnh, văn bản hay 1 bảng khác
90. Ví dụ thẻ row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
91. Tiêu đề trong bảng  Tiêu đề được đánh dấu sử dụng thẻ .  Dòng tiêu đề là dòng đầu tiên của bảng Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
92. Các thuộc tính của border cellpadding cellspacing
93. Thuộc tính border Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
94. Thuộc tính cellpadding Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
95. Thuộc tính cellspacing Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
96. Cell span  Các ô trên 1 dòng có thể được trộn lại (merge) với nhau, ta gọi là row span. Để trộn các ô lại, ta dùng thuộc tính rowspan trên ,  Trường hợp ô được trộn lại trên cột ta gọi là column span. Để làm việc này, ta dùng thuộc tính colspan trên ,
97. Row span First Name: Bill Gates Telephone: 555 77 854 555 77 855
98. Column span Cell that spans two columns: Name Telephone Bill Gates 555 77 854 555 77 855
99. Màu nền, hình nền cho  Ta có thể đặt màu nền cho sử dụng thuộc tính bgcolor  Thuộc tính background chỉ định hình nền cho  Cú pháp : – bgcolor = “Màu nền“ – background = “Tên hình nền"
100. Ví dụ màu nền cho First Row Second Row
101. Ví dụ hình nền cho First Row Second Row
102. Màu, hình nền cho cell  Mỗi ô hay dòng cũng có thể được đặt màu hoặc hình nền giống sử dụng và background First Row Second Row