Using Lists and Tables Session 3
Objectives <ul><li>Explain Ordered Lists. </li></ul><ul><li>Explain Unordered Lists. </li></ul><ul><li>Explain Defination ...
Lists <ul><li>A List is a collection of items. </li></ul><ul><li>A list can contain other HTML elements such as image, lin...
Ordered Lists <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>Learning HTML</TITLE> </li></ul><ul><li><BO...
Ordered Lists Building Dynamic Websites/Session 1/   of 22
List-style-type <ul><li><OL STYLE=&quot;list-style-type:property’s value&quot;> </li></ul>Building Dynamic Websites/Sessio...
Nested Ordered lists <ul><li><HTML> </li></ul><ul><li><HEAD><TITLE>Learning HTML</TITLE> </li></ul><ul><li><BODY> </li></u...
Nested Ordered lists Building Dynamic Websites/Session 1/   of 22
Unordered Lists <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>Learning HTML</TITLE> </li></ul><ul><li><...
Unordered Lists Building Dynamic Websites/Session 1/   of 22
List-style-type <ul><li><OL STYLE=&quot;list-style-type:property’s value&quot;> </li></ul>Building Dynamic Websites/Sessio...
Nested Unordered lists Building Dynamic Websites/Session 1/   of 22
Definition lists <ul><li>DL </li></ul><ul><li>DT </li></ul><ul><li>DD </li></ul>Building Dynamic Websites/Session 1/   of 22
Unordered Lists <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>Learning HTML</TITLE> </li></ul><ul><li><...
Tables <ul><li>A table is made up of rows and columns. </li></ul><ul><li>The intersection of each row and column is a cell...
Columns heading Building Dynamic Websites/Session 1/   of 22
Caption Building Dynamic Websites/Session 1/   of 22
Colspan/Rowspan attribute Building Dynamic Websites/Session 1/   of 22 <ul><ul><li>These attributes are used to create cel...
Colspan/Rowspan attribute Building Dynamic Websites/Session 1/   of 22 Rowspan Colspan
Some attribute <ul><li>WIDTH </li></ul><ul><li>BORDER </li></ul><ul><li>CELLSPACING </li></ul><ul><li>CELLPADDING </li></u...
Horizontal/Vertical alignment Building Dynamic Websites/Session 1/   of 22 <ul><li>Align = left </li></ul><ul><li>Align = ...
Summary <ul><li>A nested list refers to another list defined inside an item of a list. </li></ul><ul><li>The THEAD, TFOOT,...
Upcoming SlideShare
Loading in …5
×

03. session 03 using lists and tables

938 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
938
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

03. session 03 using lists and tables

  1. 1. Using Lists and Tables Session 3
  2. 2. Objectives <ul><li>Explain Ordered Lists. </li></ul><ul><li>Explain Unordered Lists. </li></ul><ul><li>Explain Defination Lists. </li></ul><ul><li>Explain the Table elements. </li></ul>Building Dynamic Websites/Session 1/ of 22
  3. 3. Lists <ul><li>A List is a collection of items. </li></ul><ul><li>A list can contain other HTML elements such as image, links or other lists. </li></ul>Building Dynamic Websites/Session 1/ of 22
  4. 4. Ordered Lists <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>Learning HTML</TITLE> </li></ul><ul><li><BODY> </li></ul><ul><li><H2>Days in a week</H2> </li></ul><ul><li><OL> </li></ul><ul><li><LI>Sunday </li></ul><ul><li><LI>Monday </li></ul><ul><li><LI>Tuesday </li></ul><ul><li><LI>Wednesday </li></ul><ul><li><LI>Thursday </li></ul><ul><li><LI>Friday </li></ul><ul><li><LI>Saturday </li></ul><ul><li></OL> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>Building Dynamic Websites/Session 1/ of 22
  5. 5. Ordered Lists Building Dynamic Websites/Session 1/ of 22
  6. 6. List-style-type <ul><li><OL STYLE=&quot;list-style-type:property’s value&quot;> </li></ul>Building Dynamic Websites/Session 1/ of 22
  7. 7. Nested Ordered lists <ul><li><HTML> </li></ul><ul><li><HEAD><TITLE>Learning HTML</TITLE> </li></ul><ul><li><BODY> </li></ul><ul><li><H2>Web Designing with HTML</H2> </li></ul><ul><li><OL> </li></ul><ul><li><LI>Introducting HTML </li></ul><ul><li><OL STYLE=&quot;list-style-type:lower-roman&quot;> </li></ul><ul><li><LI>WWW and Internet Overview </li></ul><ul><li><LI>HTML Overview </li></ul><ul><li><LI>Basic HTML Elements </li></ul><ul><li></OL> </li></ul><ul><li><LI>Working with HTML Elements </li></ul><ul><li>(continue…) </li></ul>Building Dynamic Websites/Session 1/ of 22
  8. 8. Nested Ordered lists Building Dynamic Websites/Session 1/ of 22
  9. 9. Unordered Lists <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>Learning HTML</TITLE> </li></ul><ul><li><BODY> </li></ul><ul><li><H2>Wild Animals</H2> </li></ul><ul><li><UL> </li></ul><ul><li><LI>Lion </li></ul><ul><li><LI>Tiger </li></ul><ul><li><LI>Leopard </li></ul><ul><li><LI>Wolf </li></ul><ul><li></UL> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>Building Dynamic Websites/Session 1/ of 22
  10. 10. Unordered Lists Building Dynamic Websites/Session 1/ of 22
  11. 11. List-style-type <ul><li><OL STYLE=&quot;list-style-type:property’s value&quot;> </li></ul>Building Dynamic Websites/Session 1/ of 22
  12. 12. Nested Unordered lists Building Dynamic Websites/Session 1/ of 22
  13. 13. Definition lists <ul><li>DL </li></ul><ul><li>DT </li></ul><ul><li>DD </li></ul>Building Dynamic Websites/Session 1/ of 22
  14. 14. Unordered Lists <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>Learning HTML</TITLE> </li></ul><ul><li><BODY> </li></ul><ul><li> <H2>Types of noun</H2> </li></ul><ul><li> <DL> </li></ul><ul><li> <DT>Common noun </li></ul><ul><li> <DD>It is a name of an Object </li></ul><ul><li>in general such as pencel, pen </li></ul><ul><li>paper and so on </li></ul><ul><li> <DT>Proper noun </li></ul><ul><li> <DD>It is a unique name of a person </li></ul><ul><li>or a place </li></ul><ul><li></DL> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>Building Dynamic Websites/Session 1/ of 22
  15. 15. Tables <ul><li>A table is made up of rows and columns. </li></ul><ul><li>The intersection of each row and column is a cell. </li></ul>Building Dynamic Websites/Session 1/ of 22
  16. 16. Columns heading Building Dynamic Websites/Session 1/ of 22
  17. 17. Caption Building Dynamic Websites/Session 1/ of 22
  18. 18. Colspan/Rowspan attribute Building Dynamic Websites/Session 1/ of 22 <ul><ul><li>These attributes are used to create cells that span more than one column or row. </li></ul></ul><ul><ul><li>The COLSPAN attribute is used with the <TH> tag, while the ROWSPAN attribute is used with the <TD> tag. </li></ul></ul>
  19. 19. Colspan/Rowspan attribute Building Dynamic Websites/Session 1/ of 22 Rowspan Colspan
  20. 20. Some attribute <ul><li>WIDTH </li></ul><ul><li>BORDER </li></ul><ul><li>CELLSPACING </li></ul><ul><li>CELLPADDING </li></ul>Building Dynamic Websites/Session 1/ of 22
  21. 21. Horizontal/Vertical alignment Building Dynamic Websites/Session 1/ of 22 <ul><li>Align = left </li></ul><ul><li>Align = center </li></ul><ul><li>Align = right </li></ul><ul><li>Align = justify </li></ul><ul><li>Valign = top </li></ul><ul><li>Valign = middle </li></ul><ul><li>Valign = bottom </li></ul><ul><li>Valign = baseline </li></ul><TD ALIGN = right VALIGN = bottom> Data Cell 1</TD>
  22. 22. Summary <ul><li>A nested list refers to another list defined inside an item of a list. </li></ul><ul><li>The THEAD, TFOOT, TBODY elements allow grouping the rows in a table. </li></ul><ul><li>COLGROUP element allow grouping the column in a table. </li></ul><ul><li>Hyperlinks within a table ca display by using A element. </li></ul>Building Dynamic Websites/Session 1/ of 22

×