1 / 39

Lists & Tables

Lists & Tables. HTML Lists. There are many kinds of lists that can be created in HTML We will be covering Unordered List Ordered List Definition List. Unordered List. The items can be in any order Items are usually marked by bullets

horace
Download Presentation

Lists & Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lists & Tables

  2. HTML Lists • There are many kinds of lists that can be created in HTML • We will be covering • Unordered List • Ordered List • Definition List

  3. Unordered List • The items can be in any order • Items are usually marked by bullets • <UL> & </UL> are the opening and closing tags for an unordered list

  4. HTML Code Browser Display <UL> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </UL> • SimCity • Quake • Bridge

  5. Ordered Lists • Used to show a sequence • Items are usually numbered • <OL> & </OL> are the opening and closing tags

  6. Ordered List Browser Display <OL> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </OL> OL instead of UL • SimCity • Quake • Bridge Numbers instead of discs, circles or squares

  7. Ordered List Browser Display <OL type = “a”> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </OL> • SimCity • Quake • Bridge

  8. Ordered List Types

  9. Q: How would one start an ordered list with something other than 1 Browser Display • SimCity • Quake • Bridge

  10. Ordered List Browser Display <OL start = “25”> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </OL> • SimCity • Quake • Bridge

  11. HTML Lists • The default “bullet” for lists is a “disc” • That, however, can be changed to a “circle” or a “square” with the help of the type attribute • Can use the deprecated type attribute in the ul or ol tag and in individual li items to specify a marker style for the entire list or for individual list items

  12. HTML Lists • In the style sheet rule, type list-style-type: marker, where marker is one of the following values: disc, circle, square, decimal (1, 2, 3, ...), upper-alpha (A, B, C, ...), lower-alpha (a, b, c, ...), upper-roman (I, II, III, IV, ...), or lower-roman (i, ii, iii, iv, ...) • You can apply the list-style-type property to any list item. • To display lists without markers: In the style sheet rule, type list-style-type: none. • A type attribute in an li tag overrides one in an ol or ul tag.

  13. HTML Code Browser Display <UL type = “circle”> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </UL> … type = “square” • SimCity • Quake • Bridge

  14. Definition Lists • Used for glossaries, definitions etc. • Works well with any list that pairs a word or phrase with a longer description. • <DL>, <DT> & <DD> are the tags

  15. Definition List Browser Display <DL> <DT>SimCity</DT> <DD>A great simulation game in which one build cities </DD> <DT>Quake</DT> <DD> One of the best of the shoot-em-up genre </DD> </DL> Term • SimCity • A great simulation game in which one build cities • Quake • One of the best of the shoot-em-up genre Definition

  16. Definition List

  17. HTML Lists • Other tags needed to make a list • (optional) <LH> - list header or caption • <LI> - list tag, starts each line on the list • “There is no official way to format a list's title. You can use a regular header” • <Hn> can be used in place of the list header • <!-- comment -->comments are added to help explain what someone is looking at, it is not displayed on the web page

  18. HTML List Creation <body> <!-- comment --> <UL> <LH> Things to Do </LH> <LI>get the mail</LI> <LI>go to the store</LI> <LI>…</LI> </UL> </body>

  19. HTML 2 Assignment • Create three HTML lists • The first list should be an ordered list of your class schedule • The second should be an unordered list of your class schedule • The third is an unordered list of three more different web sites • The heading for each list should say “Name’s Class Schedule – Ordered List” & “Name’s. … - Unordered List” • The final list should be titled “links” • Comment codes should be present with all new tags

  20. HTML Lists The third list that we will cover is a nested list A nested list is a list inside a list, which is similar to an outline form A nested list can be an ordered list, an unordered list or a combination

  21. Nested Lists A nested listed is used to go more in depth You have a list of your class schedule, a nested list would be used to list the items needed for each of the class

  22. Nested List An example of a nested list would be: • Mathematics • Homework • Calculator • Textbook • Woodworking • Safety Glasses • Wood • Ruler

  23. Creating a Nested List <body> <H2> Class Schedule </H2> <!– comment --> <UL> <LI>…</LI> <!– comment --> <UL> <LI>…</LI> <LI>…</LI> </UL>

  24. Nested List • Ordered lists as well as definition lists can be nested just like the un-ordered lists • Can any type of list be nested into any other type?

  25. HMTL 3 Assignment • Create a nested list of your class schedule • The classes should be in an ordered list • Under each class should have an unordered list of: • Teacher’s name • Period • Starting and ending times • Lunchbreak is not a period, it must be in line with the ordered list but not numbered

  26. Lists vs. Tables • Lists are one way of presenting data in a an ordered or formal fashion • Tables provide another - more customizable - way of displaying ordered information on Web pages

  27. Browser Display

  28. HTML Code Browser Display <TABLE border = "1" > <TR> <TH>Indoor</TH> <TH>Outdoor</TH> </TR> <TR> <TD>Squash</TD> <TD>Cricket</TD> </TR> </TABLE>

  29. <TABLE> Attributes • BORDER • Determines the thickness of the table border • Example: <TABLE BORDER = “2”> • CELLPADING • Determines the distance between the border of a cell and the contents of the cell • Example: <TABLE CELLPADDING = “3”> • CELLSPACING • Determines the empty spacing between the borders of two adjacent cells • Example: <TABLE CELLSPACING = “1”>

  30. HTML Code Browser Display <TABLE border = "1" > <TR> <TH>Indoor</TH> <TH>Outdoor</TH> </TR> <TR> <TD>Squash</TD> <TD>Cricket</TD> </TR> </TABLE>

  31. HTML Code Browser Display <TABLE> <TR> <TH>Indoor</TH> <TH>Outdoor</TH> </TR> <TR> <TD>Squash</TD> <TD>Cricket</TD> </TR> </TABLE>

  32. <TABLE>,<TR>,<TH>,<TD> Attributes • ALIGN • Possible values: Center, Left, Right • Example: <TH ALIGN = “center”> • BGCOLOR • Example: <TD BGCOLOR = “red”> • WIDTH • Example: <TR WIDTH = “40%”> • HEIGHT • Example: <TABLE HEIGHT = “200”> 40% of the screen width

  33. <TR> Attributes • VLAIGN • Determines the vertical alignment of the contents of all of the cells in a particular row • Possible values: Top, Middle, Bottom • Example: <TR VALIGN = “bottom”>

  34. <TH> & <TD> Attributes • NOWRAP • Extend the width of a cell, if necessary, to fit the contents of the cell in a single line • Example: <TD NOWRAP> • COLSPAN • No. of rows the current cell should extend itself downward • Example: <TD COLSPAN = “2”> • ROWSPAN • The number of columns the current cell should extend itself • Example: <TD ROWSPAN = “5”> • VALIGN • Same as that for <TR>

  35. HTML Code Browser Display <TABLE border=“1” > <TR> <TH colspan=“2”>IndoorOutdoor </TH> </TR> <TR> <TD>Squash</TD> <TD>Cricket</TD> </TR> </TABLE>

  36. HTML Code Browser Display <TABLE border = "1" > <CAPTION> My favorite sports </CAPTION> <TR> <TD>Squash</TD> <TD>Cricket</TD> </TR> </TABLE> My favorite sports

  37. HTML Code Browser Display <TABLEborder = "1" > <CAPTION> My favorite sports </CAPTION> <TR> <TD>Squash</TD> <TD>Cricket</TD> </TR> </TABLE> My favorite sports Must be placed immediately after the<TABLE> tag

More Related