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

2. AdvWeb-2/37 HTML Tables u An orderly arrangement of text and/or graphics into vertical columns and horizontal rows. Table with integrated graphics http://www.24hourhtmlcafe.com/hour14/fearful2.htm u Within HTML tables perform many functions See example at: http://www.depaul.edu/~dlash/extra/Webpage/examples/examleta ble.html http://www.depaul.edu/~dlash/extra/Webpage/examples/examleta ble.html – Control web page layout (for text and graphics) – Separate a Web page into different areas – Show data output in traditional table format Example of table as a page layout device http://arnb.com/webdesign/chap5/tables/advert.htm

3. AdvWeb-3/37 HTML Tables u An orderly arrangement of text and/or graphics into vertical columns and horizontal rows. Each these are called a “cell”

4. AdvWeb-4/37 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

5. AdvWeb-5/37 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

6. AdvWeb-6/37 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

7. AdvWeb-7/37 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

8. AdvWeb-8/37 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/gue ss3table.html Row 1 w/ 5 cols Col 3-4 empty Col 5 Row 2 Cols 1-3 only have data

9. AdvWeb-9/37 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

10. AdvWeb-10/37 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

11. AdvWeb-11/37 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

12. AdvWeb-12/37 Table Cells Format Like Documents... Test Cell1 Happy Days Are here again. The skies are are blue again

13. AdvWeb-13/37 Options: Table, Row and Column Width Some other attributes for the table tag u width=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.) u height=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.)

14. AdvWeb-14/37 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 Sets the overall sizes Sets individual element

15. AdvWeb-15/37 Options: Borders Some other attributes for the table tag u border=# - 0 or no border is the default see below for more details.

16. AdvWeb-16/37 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

17. AdvWeb-17/37 Options: Background color u bgcolor="#rrggbb" or color name - sets a color for background for table or table cell.

18. AdvWeb-18/37 Tables and BGCOLOR u 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

19. AdvWeb-19/37 Some Special Table Tricks u Cell text alignment u Padding the columns and Rows u Spanning Columns and Rows u Special Examples

20. AdvWeb-20/37 Options: Alignment Some other attributes for the table tag u align=left|right|center – sets the horizontal alignment for a table, row, or cell. Can be used with, or tags. u valign=top|bottom|middle – set the vertical alignment of the table, row or cell. Can be used with,, or tags.

21. AdvWeb-21/37 Options: Alignment My First Table Name Rank Serial Number George Washington General 1 George Bush President 42 George Ryan ??? ????? u http://condor.depaul.edu/~dlash/website/TableEx6.html http://condor.depaul.edu/~dlash/website/TableEx6.html

22. AdvWeb-22/37 Cell padding and cell spacing u Cell padding specifies the number of pixels from the cell border to the text. Useful for simple announcement boxes. u Cell 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

23. AdvWeb-23/37 Cell Padding And Spacing u Cell 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

24. AdvWeb-24/37 Would look like...

25. AdvWeb-25/37 Cell Padding And Spacing u Cell spacing specifies number of pixels between cells of the table. Color MyTable The Local News DATA1 DATA2 DATA3 DATA4 u (next slide http://www.depaul.edu/~dlash/website/Cellspacing.html) 50 pixels between table cells

26. AdvWeb-26/37 Would Look Like...

27. AdvWeb-27/37 Options: colspan and rowspan u colspan - Allows a cell to span columns u rowspan - Allows a cell to span rows – Useful for performing a page layout

28. AdvWeb-28/37 Column & Row Spacing u Colspan 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

29. AdvWeb-29/37 Col Span Example u Example Colspan Color MyTable The Local News TEXT TEXT TEXT TEXT TEXT TEXT <TD BGCOLOR="ORANGE">TEXT u http://www.depaul.edu/~dlash/website/Colspa n_example.html http://www.depaul.edu/~dlash/website/Colspa n_example.html 3 rows & Cols. The first row spans all cols!

30. AdvWeb-30/37 Col & Row Spacing u Rowspan 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

31. AdvWeb-31/37 RowSpan Example u Just like Col Span but with rows! Color MyTable The Local News TEXT TEXT TEXT TEXT TEXT TEXT TEXT u http://www.depaul.edu/~dlash/website/Rowsp an.html http://www.depaul.edu/~dlash/website/Rowsp an.html 3 rows & Cols. The first col spans all rows!

32. AdvWeb-32/37 Creating Layouts u Suppose 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

33. AdvWeb-33/37 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

34. AdvWeb-34/37 Would Output... Navigation not upper right hand corner Title and body not centered

35. AdvWeb-35/37 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

36. AdvWeb-36/37 Would Output...

37. AdvWeb-37/37 Some Special Table Uses u Goto This Web Page - Click HereClick Here