computer science 101 lists and tables. lists unordered lists - use a bullet ordered lists - use a...
TRANSCRIPT
![Page 1: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/1.jpg)
Computer Science 101
Lists and Tables
![Page 2: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/2.jpg)
Lists
• Unordered lists - use a bullet
• Ordered lists - use a number, Roman numeral, or letter
![Page 3: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/3.jpg)
Unordered Lists
<UL><LI>list item</LI>...<LI>list item</LI></UL>
A list item can be text, an image, a nested list, or anything that can be marked up
![Page 4: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/4.jpg)
![Page 5: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/5.jpg)
Ordered Lists
<OL><LI>list item</LI>...<LI>list item</LI></OL>
![Page 6: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/6.jpg)
List Attributes
• TYPE - square (for unordered lists)
• TYPE - 1 (Arabic numerals), I or i (Roman numerals, a (letters)
• START - a number, indicates first number in the list
![Page 7: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/7.jpg)
![Page 8: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/8.jpg)
Tables
• A two-dimensional grid of cells that can contain any marked up stuff
• Useful for organizing tabular information and also for laying out any complex Web pages
![Page 9: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/9.jpg)
Built by Rows
<TABLE><TR>...</TR>...<TR>...</TR></TABLE>
Cells in each row are specified with table data tags (<TD>cell item</TD>)
![Page 10: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/10.jpg)
The Border Attribute
• <TABLE BORDER=aNumber>
• Default is 0, leaving no visible border
• Value gives the pixel width surrounding all cells
![Page 11: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/11.jpg)
A Table With Four Cells in One Column
![Page 12: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/12.jpg)
A 3 by 2 Table
![Page 13: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/13.jpg)
Other Table Attributes
• CELLPADDING - space between cell border and its contents
• CELLSPACING - space between cells
• BGCOLOR - color of interior of cells
![Page 14: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/14.jpg)
Cell Padding and Spacing
![Page 15: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/15.jpg)
Other Table Attributes
• WIDTH and HEIGHT – defaults adjust to contents of cells– can be percentages or pixels
• ALIGN - same as for IMG element
![Page 16: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/16.jpg)
Using Width and Height
![Page 17: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/17.jpg)
Cell Properties: Headers
Substitute TH tags for TD tags in the top row
![Page 18: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/18.jpg)
Other Cell Attributes
• ALIGN - the usual stuff
• BGCOLOR - as always
• BACKGROUND - tiles an image
• WIDTH and HEIGHT - % or pixels
![Page 19: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/19.jpg)
Organizing a Page
• Table cells can contain anything
• Don’t use borders
![Page 20: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/20.jpg)
Columnar Layout
• Set table’s WIDTH and HEIGHT to 100%
• Have a fixed-width column to the left with links (a navigation bar)
• Put other stuff in column to the right, which fills the rest of the page
![Page 21: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/21.jpg)
![Page 22: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/22.jpg)
Spanning Rows and Columns
• Use ROWSPAN or COLSPAN to merge cells vertically or horizontally
• Defaults are 0
• Applied to the right and down
• Fewer cells result
![Page 23: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/23.jpg)
![Page 24: Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter](https://reader036.vdocuments.site/reader036/viewer/2022062304/56649f345503460f94c50fd5/html5/thumbnails/24.jpg)
Draw Pictures of the Grid