Presentation is loading. Please wait.

Presentation is loading. Please wait.

Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.

Similar presentations


Presentation on theme: "Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter."— Presentation transcript:

1 Computer Science 101 Lists and Tables

2 Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter

3 Unordered Lists list item. list item A list item can be text, an image, a nested list, or anything that can be marked up

4

5 Ordered Lists list item. list item

6 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

7

8 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

9 Built by Rows....... Cells in each row are specified with table data tags ( cell item )

10 The Border Attribute Default is 0, leaving no visible border Value gives the pixel width surrounding all cells

11 A Table With Four Cells in One Column

12 A 3 by 2 Table

13 Other Table Attributes CELLPADDING - space between cell border and its contents CELLSPACING - space between cells BGCOLOR - color of interior of cells

14 Cell Padding and Spacing

15 Other Table Attributes WIDTH and HEIGHT –defaults adjust to contents of cells –can be percentages or pixels ALIGN - same as for IMG element

16 Using Width and Height

17 Cell Properties: Headers Substitute TH tags for TD tags in the top row

18 Other Cell Attributes ALIGN - the usual stuff BGCOLOR - as always BACKGROUND - tiles an image WIDTH and HEIGHT - % or pixels

19 Organizing a Page Table cells can contain anything Don’t use borders

20 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

21

22 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

23

24 Draw Pictures of the Grid


Download ppt "Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter."

Similar presentations


Ads by Google