Downloaded 22 times
Uploaded byPhúc Đỗ
03. session 03 using lists and tables
This document provides an overview of using lists and tables in HTML. It explains ordered lists, unordered lists, definition lists, and various attributes to style lists. It also covers the basic structure of HTML tables, including rows, columns, headers, and attributes to modify cell properties like colspan and rowspan. Examples are given to demonstrate nested lists and definition lists.
More Related Content
Similar to 03. session 03 using lists and tables
03. session 03 using lists and tables
- 1. Using Lists andTables Session 3
- 2. Objectives Explain OrderedLists. Explain Unordered Lists. Explain Defination Lists. Explain the Table elements. Building Dynamic Websites/Session 1/ of 22
- 3. Lists A Listis a collection of items. A list can contain other HTML elements such as image, links or other lists. Building Dynamic Websites/Session 1/ of 22
- 4. Ordered Lists <HTML><HEAD> <TITLE>Learning HTML</TITLE> <BODY> <H2>Days in a week</H2> <OL> <LI>Sunday <LI>Monday <LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday <LI>Saturday </OL> </BODY> </HTML> Building Dynamic Websites/Session 1/ of 22
- 5. Ordered Lists BuildingDynamic Websites/Session 1/ of 22
- 6. List-style-type <OL STYLE="list-style-type:property’svalue"> Building Dynamic Websites/Session 1/ of 22
- 7. Nested Ordered lists<HTML> <HEAD><TITLE>Learning HTML</TITLE> <BODY> <H2>Web Designing with HTML</H2> <OL> <LI>Introducting HTML <OL STYLE="list-style-type:lower-roman"> <LI>WWW and Internet Overview <LI>HTML Overview <LI>Basic HTML Elements </OL> <LI>Working with HTML Elements (continue…) Building Dynamic Websites/Session 1/ of 22
- 8. Nested Ordered listsBuilding Dynamic Websites/Session 1/ of 22
- 9. Unordered Lists <HTML><HEAD> <TITLE>Learning HTML</TITLE> <BODY> <H2>Wild Animals</H2> <UL> <LI>Lion <LI>Tiger <LI>Leopard <LI>Wolf </UL> </BODY> </HTML> Building Dynamic Websites/Session 1/ of 22
- 10. Unordered Lists BuildingDynamic Websites/Session 1/ of 22
- 11. List-style-type <OL STYLE="list-style-type:property’svalue"> Building Dynamic Websites/Session 1/ of 22
- 12. Nested Unordered listsBuilding Dynamic Websites/Session 1/ of 22
- 13. Definition lists DLDT DD Building Dynamic Websites/Session 1/ of 22
- 14. Unordered Lists <HTML><HEAD> <TITLE>Learning HTML</TITLE> <BODY> <H2>Types of noun</H2> <DL> <DT>Common noun <DD>It is a name of an Object in general such as pencel, pen paper and so on <DT>Proper noun <DD>It is a unique name of a person or a place </DL> </BODY> </HTML> Building Dynamic Websites/Session 1/ of 22
- 15. Tables A tableis made up of rows and columns. The intersection of each row and column is a cell. Building Dynamic Websites/Session 1/ of 22
- 16. Columns heading BuildingDynamic Websites/Session 1/ of 22
- 17. Caption Building DynamicWebsites/Session 1/ of 22
- 18. Colspan/Rowspan attribute BuildingDynamic Websites/Session 1/ of 22 These attributes are used to create cells that span more than one column or row. The COLSPAN attribute is used with the <TH> tag, while the ROWSPAN attribute is used with the <TD> tag.
- 19. Colspan/Rowspan attribute BuildingDynamic Websites/Session 1/ of 22 Rowspan Colspan
- 20. Some attribute WIDTHBORDER CELLSPACING CELLPADDING Building Dynamic Websites/Session 1/ of 22
- 21. Horizontal/Vertical alignment BuildingDynamic Websites/Session 1/ of 22 Align = left Align = center Align = right Align = justify Valign = top Valign = middle Valign = bottom Valign = baseline <TD ALIGN = right VALIGN = bottom> Data Cell 1</TD>
- 22. Summary A nestedlist refers to another list defined inside an item of a list. The THEAD, TFOOT, TBODY elements allow grouping the rows in a table. COLGROUP element allow grouping the column in a table. Hyperlinks within a table ca display by using A element. Building Dynamic Websites/Session 1/ of 22