1. David Lash DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash

2. David Lash 2 What we talked about 2 weeks ago... zCreating Lists yOrdered Lists ( … &.. ) y Unordered Lists ( … &.. ) yDefinition lists ( …,.., … ) yLists within lists (remember to match up start and end of lists). zCreating HTML links yCreating absolute links x my home page yCreating relative links x my FAQ Page yCreating email links x Mail me please

3. David Lash 3 What we talked about last week z zNamed colors and specify Hexadecimal number yBrowser Safe Colors, z z,, z y zSpecial character (e.g., $, #, @,,) need special numerical characters y&#162 to get the ¢ sign. y<META&gt to get y to get 2 blank spaces.

4. David Lash 4 What we will talk about this week… zHow to create tables yBasic,, tags zSome arguments with table yHeight, width, border zSpecial “tricks” yCell text alignment yPadding the columns and Rows ySpanning Columns and Rows ySpecial Examples zCreating page layouts

5. David Lash 5 HTML Tables zAn orderly arrangement of text and/or graphics into vertical columns and horizontal rows. Table with integrated graphics http://www.24hourhtmlcafe.com/hour14/fearful2.htm zWithin HTML tables perform many functions See example at: http://www.depaul.edu/~dlash/extra/Webpage/examples/examletable.html http://www.depaul.edu/~dlash/extra/Webpage/examples/examletable.html yControl web page layout (for text and graphics) ySeparate a Web page into different areas yShow data output in traditional table format Example of table as a page layout device http://arnb.com/webdesign/chap5/tables/advert.htm

6. David Lash 6 HTML Tables zAn orderly arrangement of text and/or graphics into vertical columns and horizontal rows. Each these are called a “cell”

7. David Lash 7 The Basic Table Structure The bare minimum tags needed to describe a table are …, … Encloses TABLE Defn Start & End Table row Start & End Table Colmn

8. David Lash 8 The Basic Table Structure Simple Table Cell 1 Cell 2 Cell 3 Cell 4 Table Row Table Column Start & End Table Creates the example 4 cell table Click HereClick Here http://condor.depaul.edu/~dlash/website/basic.html

9. David Lash 9 Guess The Table Format - 1? What would the following display? Cell 1 Cell 2 Cell 1 Cell 2 Cell 3 Click Here for answer http://www.depaul.edu/~dlash/website/guess1table.html

10. David Lash 10 Guess The Table Format - 2? What would the following display? Cell1 Cell2 Cell Cell 1 Cell 2 Cell 3 Click Here for answer http://www.depaul.edu/~dlash/website/guess2table.html

11. David Lash 11 Guess The Table Format - 3? What would the following display? Cell1 Cell2 Cell ? Cell 1 Cell 2 Cell 3 Click Here for answer http://www.depaul.edu/~dlash/extra/Webpage/examples/guess3table.html Row 1 w/ 5 cols Col 3-4 empty Col 5 Row 2 Cols 1-3 only have data

12. David Lash 12 Introducing the Another basic but option TAG is the similar to Col 1 Col 2 Cell 1 Cell 2 Cell 1 Cell 2 Click Here for example http://www.depaul.edu/~dlash/website/simpletablewTH.html Automatic Bold & center

13. David Lash 13 Another Example My First Table Description Size Weight Gun 5 Inch Barrel 20 Ounces T-Rex 40 Feet High Multiple Tons Hurricane Floyd 400 Miles Radius ???? (Sometime can get by w/o closing tags,, but this is risky business (e.g., I.E., VS Navigator.) Click Here for example http://www.depaul.edu/~dlash/website/TableEx.html

14. David Lash 14 Tables Are Their Own Environment My First Table Description Size Weight Gun 5 Inch Barrel 20 Ounces T-Rex 40 Feet High Multiple Tons Hurricane Floyd 400 Miles Radius ???? You’d think each element in the table would be bold Instead that bold is ignored w/I table

15. David Lash 15 Table Cells Format Like Documents... Test Cell1 Happy Days Are here again. The skies are are blue again Create a ol within this cell Format some text.

16. David Lash 16 What we will talk about this week… zHow to create tables yBasic,, tags zSome arguments with table yHeight, width, border zSpecial “tricks” yCell text alignment yPadding the columns and Rows ySpanning Columns and Rows ySpecial Examples zCreating page layouts

17. David Lash 17 Options: Table, Row and Column Width Some other attributes for the table tag zwidth=number, percentage - specifies the width (in pixels) of entire window or % of size of current element. (Can be set at table, row or cell level.) zheight=number, percentage - specifies the height (in pixels) of entire window or % of size of current window. (Can be set at table, row or cell level.)

18. David Lash 18 Specifying Column Size My First Table Description Size Weight Gun 5 Inch Barrel 20 Ounces T-REX 40 Feet High Multiple Tons Hurricane Floyd 400 Miles Radius ???? Click Here http://www.depaul.edu/~dlash/website/TableEx3.html Set overall table size Sets individual element

19. David Lash 19 Options: Borders Some other attributes for the table tag zborder=# - 0 or no border is the default see below for more details.

20. David Lash 20 Implementing Borders My First Table Description Size Weight Gun 5 Inch Barrel 20 Ounces T-REX 40 Feet High Multiple Tons Hurricane Floyd 400 Miles Radius ???? Example Example at http://www.depaul.edu/~dlash/website/TableEx5.html

21. David Lash 21 Options: Background Color zbgcolor="#rrggbb" or color name - sets a color for background for table or table cell.

22. David Lash 22 Tables and BGCOLOR z Can use BGCOLOR= attribute in the TABLE,TR or TD tag. Color MyTable The Local News TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

23. David Lash 23 What we will talk about this week… zHow to create tables yBasic,, tags zSome arguments with table yHeight, width, border zSpecial “tricks” yCell text alignment yPadding the columns and Rows ySpanning Columns and Rows ySpecial Examples zCreating page layouts

24. David Lash 24 Some Special Table Tricks zCell text alignment zPadding the columns and Rows zSpanning Columns and Rows zSpecial Examples

25. David Lash 25 Options: Alignment Some other attributes for the table tag zalign=left|right|center – sets the horizontal alignment for a table, row, or cell. Can be used with, or tags. zvalign=top|bottom|middle – set the vertical alignment of the table, row or cell. Can be used with,, or tags.

26. David Lash 26 Options: Alignment My First Table Name Rank Serial Number George Washington General 1 George Bush President 42 George Ryan ??? ????? zhttp://condor.depaul.edu/~dlash/website/TableEx6.htmlhttp://condor.depaul.edu/~dlash/website/TableEx6.html

27. David Lash 27 Cell padding and cell spacing zCell padding specifies the number of pixels from the cell border to the text. Useful for simple announcement boxes. zCell spacing specifies number of pixels between cells of the table. Text Spacing Number of pixels betw cells Padding Number of pixels from cell border to text Text

28. David Lash 28 Cell Padding And Spacing zCell padding specifies the number of pixels from the cell border to the text. Useful for simple announcement boxes. Color MyTable The Local News Announcing Earlier Class Dismissal Today! 1 Row 1 Col (A Box!) Start text 52 pixels from border (next slide http://www.depaul.edu/~dlash/website/Announce.html

29. David Lash 29 Would look like...

30. David Lash 30 Cell Padding And Spacing zCell spacing specifies number of pixels between cells of the table. Color MyTable The Local News DATA1 DATA2 DATA3 DATA4 z(next slide http://www.depaul.edu/~dlash/website/Cellspacing.html) 50 pixels between table cells

31. David Lash 31 Would Look Like...

32. David Lash 32 Options: colspan and rowspan zcolspan - Allows a cell to span columns zrowspan - Allows a cell to span rows yUseful for performing a page layout

33. David Lash 33 Column & Row Spacing zColspan allows 1 cell to span more than 1 Columns of cells. This row has colspan=2 This row has colspan=3 This row has colspan=2

34. David Lash 34 Col Span Example zExample Colspan Color MyTable The Local News TEXT TEXT TEXT TEXT TEXT TEXT <TD BGCOLOR="ORANGE">TEXT zhttp://www.depaul.edu/~dlash/website/Colspan_example.htmlhttp://www.depaul.edu/~dlash/website/Colspan_example.html 3 rows & Cols. The first row spans all cols!

35. David Lash 35 Col & Row Spacing zRowspan allows 1 cell to span more than 1 rows of cells. This col has rowspan=3 This col spans both cols rowspan=2 This col has rowspan=3

36. David Lash 36 RowSpan Example zJust like Col Span but with rows! Color MyTable The Local News TEXT TEXT TEXT TEXT TEXT TEXT TEXT http://www.depaul.edu/~dlash/website/Rowspan.html 3 rows & Cols. The first col spans all rows!

37. David Lash 37 Creating Layouts zSuppose you want to make a page layout as follows: This Col has colspan 5 Title NavigationNavigation Main Page rowspan 4 Rowspan 4 Colspan 4 Your Logo

38. David Lash 38 Wouldn’t this solve the problem? Sample Table Title Nav1 Nav2 Nav3 Main Body u See how this would display http://www.depaul.edu/~dlash/website/layout1.html 1 st col 15% of screen Span title Put Nav Items In BL Put Main Body in

39. David Lash 39 Would Output... Navigation not upper right hand corner Title and body not centered

40. David Lash 40 Lets Refine It... Sample Table Title Nav1 Nav2 Nav3 <TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0> Main Body u Next slide http://www.depaul.edu/~dlash/website/layout2.html Center In cell Start New table Align in Center of cell Valign at Top Of cell

41. David Lash 41 Would Output...

42. David Lash 42 Some Special Table Uses zGoto This Web Page - Click HereClick Here

43. David Lash 43 What we talked about … zHow to create tables yBasic,, tags zSome arguments with table yHeight, width, border zSpecial “tricks” yCell text alignment yPadding the columns and Rows ySpanning Columns and Rows ySpecial Examples zCreating page layouts

44. David Lash 44 Review of homework zLook at homework file at yhttp://condor.depaul.edu/~dlash/website/Lab4.htmlhttp://condor.depaul.edu/~dlash/website/Lab4.html zAlso don’t forget to include a link to your lab on your home page