1 / 37

DePaul University

DePaul University. SNL 262 Web Page Design Tables ! - Chapt 15 Instructor: David A. Lash. HTML Tables. An orderly arrangement of text and/or graphics into vertical columns and horizontal rows. Within HTML tables perform many functions.

chip
Download Presentation

DePaul University

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. DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash

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

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

  4. The Basic Table Structure The bare minimum tags needed to describe a table are <TABLE> … </TABLE>, <TR> … </TR>, <TD> … </TD> Encloses TABLE Defn Start & End Table row Start & End Table Colmn

  5. The Basic Table Structure <HTML> <HEAD><TITLE> Simple Table </TITLE> </HEAD> <BODY> <TABLE> <TR> <TD> Cell 1</TD><TD>Cell 2</TD> </TR><TR> <TD> Cell 3</TD><TD>Cell 4</TD> </TR> </TABLE> </BODY> </HTML> Table Row Start & End Table Table Column Creates the example 4 cell table Click Here http://condor.depaul.edu/~dlash/website/basic.html

  6. Guess The Table Format - 1? What would the following display? <TABLE> <TR> <TD> Cell 1</TD><TD>Cell 2</TD> </TR><TR> <TD> Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD> </TR> </TABLE> Click Here for answer http://www.depaul.edu/~dlash/website/guess1table.html

  7. Guess The Table Format - 2? What would the following display? <TABLE> <TR> <TD>Cell1</TD> <TD>Cell2</TD> <TD></TD> </TR><TR> <TD> Cell </TD> </TR><TR> <TD> Cell 1</TD> <TD>Cell 2</TD> <TD>Cell 3</TD> </TR> </TABLE> Click Here for answer http://www.depaul.edu/~dlash/website/guess2table.html

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

  9. Introducing the <TH> Another basic but option TAG is the <TH> similar to <TD> <TABLE> <TR> <TH> Col 1 </TH> <TH> Col 2 </TH> </TR><TR> <TD> Cell 1</TD><TD>Cell 2</TD> </TR><TR> <TD> Cell 1</TD><TD>Cell 2</TD> </TR> </TABLE> Automatic Bold & center Click Here for example http://www.depaul.edu/~dlash/website/simpletablewTH.html

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

  11. Tables Are Their Own Environment <HTML> <HEAD><TITLE> My First Table </TITLE> <BODY> <B> <TABLE> <TR> <TH> Description </TH> <TH> Size</TH><TH> Weight </TH> </TR> <TR> <TD>Gun</TD><TD>5 Inch Barrel</TD> <TD> 20 Ounces</TD> </TR> <TR> <TD>T-Rex</TD><TD>40 Feet High </TD> <TD> Multiple Tons</TD> </TR> <TR> <TD>Hurricane Floyd</TD><TD>400 Miles Radius</TD> <TD> ????</TD> </TR> </TABLE> </B> </BODY></HTML> You’d think each element in the table would be bold Instead that bold is ignored w/I table

  12. Table Cells Format Like Documents... <html><head> <title> Test </title> </head> <body> <table border=1> <tr> <td>Cell1 <font color=blue> <ol> <li> Happy <li> Days </ol></td> <td> Are here again. </td></tr> <tr><td> The <i>skies</i> are are <b>blue</b> again </td> <td> <img src="../donald.gif"> </td> </tr> </table> </body> </html>

  13. Options: Table, Row and Column Width Some other attributes for the table tag • 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.) • 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. Specifying Column Size Sets the overall sizes <HTML> <HEAD><TITLE> My First Table </TITLE> <BODY> <TABLE WIDTH=500 HEIGHT=400> <TR> <TH WIDTH=10%> Description </TH> <TH WIDTH=40%> Size </TH> <TH WIDTH=40%> Weight </TH> </TR> <TR> <TD WIDTH=10%>Gun</TD> <TD>5 Inch Barrel </TD> <TD> 20 Ounces </TD> </TR> <TR> <TD WIDTH=10%>T-REX</TD><TD>40 Feet High</TD> <TD> Multiple Tons</TD> </TR> <TR> <TD WIDTH=10%>Hurricane Floyd</TD> <TD>400 Miles Radius </TD><TD> ???? </TD> </TR> </TABLE> </BODY></HTML> Click Here http://www.depaul.edu/~dlash/website/TableEx3.html Sets individual element

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

  16. Implementing Borders <HTML> <HEAD><TITLE> My First Table </TITLE></HEAD> <BODY> <TABLE BORDER=3 WIDTH=500 HEIGHT=400> <TR> <TH WIDTH=10%> Description </TH> <TH WIDTH=40%>Size</TH> <TH WIDTH=40%> Weight</TH> </TR><TR> <TD WIDTH=10%>Gun<TD>5 Inch Barrel </TD> <TD> 20 Ounces </TD> </TR><TR> <TD WIDTH=10%>T-REX</TD> <TD>40 Feet High</TD> <TD> Multiple Tons </TD> </TR><TR> <TD WIDTH=10%>Hurricane Floyd </TD> <TD>400 Miles Radius</TD><TD>????</TD> </TR> </TABLE> </BODY></HTML> Example at http://www.depaul.edu/~dlash/website/TableEx5.html

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

  18. Tables and BGCOLOR • Can use BGCOLOR= attribute in the TABLE,TR or TD tag. <HTML> <HEAD><TITLE> Color MyTable </TITLE> <BODY> <B> <center> <FONT SIZE="+3">The Local News </FONT></center> <TABLE BORDER=1 BGCOLOR="RED"> <TR> <TD>TEXT</TD><TD>TEXT</TD><TD>TEXT</TD> </TR><TR BGCOLOR="GREEN"> <TD>TEXT</TD><TD>TEXT</TD> <TD BGCOLOR="YELLOW">TEXT</TD> </TR> <TR> <TD>TEXT</TD><TD>TEXT</TD><TD>TEXT</TD> </TR> </TABLE> </BODY></HTML>

  19. Some Special Table Tricks • Cell text alignment • Padding the columns and Rows • Spanning Columns and Rows • Special Examples

  20. Options: Alignment Some other attributes for the table tag • align=left|right|center – sets the horizontal alignment for a table, row, or cell. Can be used with <TABLE> <TR>, <TD> or <TH> tags. • valign=top|bottom|middle – set the vertical alignment of the table, row or cell. Can be used with <TABLE>, <TR>, <TD> or <TH> tags.

  21. Options: Alignment <HTML> <HEAD><TITLE> My First Table </TITLE> <BODY> <TABLE BORDER=2 WIDTH=500 HIEGHT=500> <TR> <TH> Name </TH> <TH> Rank</TH> <TH> Serial Number</TH> </TR><TR> <TD ALIGN=RIGHT>George Washington</TD> <TD>General </TD> <TD> 1</TD> </TR> <TR> <TD ALIGN=CENTER>George Bush</TD> <TD>President </TD> <TD ALIGN=RIGHT> 42</TD> </TR> <TR ALIGN=RIGHT> <TD ALIGN=LEFT>George Ryan </TD> <TD>??? </TD> <TD> ????? </TD> </TR> </TABLE></BODY></HTML> • http://condor.depaul.edu/~dlash/website/TableEx6.html

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

  23. Cell Padding And Spacing • Cell padding specifies the number of pixels from the cell border to the text. Useful for simple announcement boxes. <HTML> <HEAD><TITLE> Color MyTable </TITLE> <BODY> <B> <center> <FONT SIZE="+3">The Local News </FONT></center> <DIV ALIGN=CENTER> <TABLE BORDER=2 CELLSPACING=0 CELLPADDING=52> <TR> <TD ALIGN=CENTER BGCOLOR="RED" VALIGN=middle><B>Announcing Earlier Class Dismissal Today!</B> </TD></TR> </TABLE> </DIV> </BODY></HTML> 1 Row 1 Col (A Box!) Start text 52 pixels from border (next slide http://www.depaul.edu/~dlash/website/Announce.html

  24. Would look like ...

  25. Cell Padding And Spacing • Cell spacing specifies number of pixels between cells of the table. <HTML> <HEAD><TITLE> Color MyTable </TITLE> <BODY> <B> <center> <FONT SIZE="+3">The Local News </FONT></center> <DIV ALIGN=CENTER> <TABLE BORDER=2 CELLSPACING=50 CELLPADDING=1> <TR><TD>DATA1</TD><TD>DATA2</TD></TR> <TR><TD>DATA3</TD><TD>DATA4</TD></TR> </TABLE> </DIV> </BODY></HTML> • (next slide http://www.depaul.edu/~dlash/website/Cellspacing.html) 50 pixels between table cells

  26. Would Look Like ...

  27. Options: colspan and rowspan • colspan - Allows a cell to span columns • rowspan - Allows a cell to span rows • Useful for performing a page layout

  28. Column & Row Spacing • 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. Col Span Example 3 rows & Cols. The first row spans all cols! • Example Colspan <HTML> <HEAD><TITLE> Color MyTable </TITLE> <BODY<FONT SIZE="+3">The Local News </FONT> <TABLE BORDER=1 BGCOLOR="RED"> <TR> <TD COLSPAN=3 BGCOLOR="blue">TEXT</TD> <TR> <TD>TEXT</TD><TD BGCOLOR="BLUE">TEXT</TD><TD BGCOLOR="YELLOW">TEXT</TD> </TR><TR> <TD>TEXT</TD><TD BGCOLOR="BLUE">TEXT</TD><TD BGCOLOR="ORANGE">TEXT</TD> </TR> </TABLE></BODY></HTML> • http://www.depaul.edu/~dlash/website/Colspan_example.html

  30. Col & Row Spacing • 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. RowSpan Example 3 rows & Cols. The first col spans all rows! • Just like Col Span but with rows! <HTML> <HEAD><TITLE> Color MyTable </TITLE> <BODY> <center> <FONT SIZE="+3">The Local News </FONT></center> <TABLE BORDER=1 BGCOLOR="RED"> <TR> <TD ROWSPAN=3 BGCOLOR="blue">TEXT</TD><TD BGCOLOR="YELLOW">TEXT</TD><TD BGCOLOR="ORANGE">TEXT</TD> </TR><TR > <TD>TEXT</TD><TD BGCOLOR="BLUE">TEXT</TD> </TR><TR> <TD BGCOLOR="BLUE">TEXT</TD><TD BGCOLOR="ORANGE">TEXT</TD> </TR></TABLE></BODY></HTML> • http://www.depaul.edu/~dlash/website/Rowspan.html

  32. Creating Layouts • Suppose you want to make a page layout as follows: Your Logo Title This Col has colspan 5 N a v i g a t i o n Main Page rowspan 4 colspan 4 rowspan 4

  33. Wouldn’t this solve the problem? <HTML> <HEAD> <TITLE> Sample Table </TITLE> </HEAD> <BODY> <TABLE BORDER=1 height=100% width=100%> <TR> <TD width=15%> <img src=donald.gif > </TD> <TD colspan=4> Title </TD> </TR> <TR> <TD width=15%> <UL> <LI> Nav1</LI> <LI> Nav2 </LI> <LI> Nav3 </LI> </OL> </TD> <TD colspan=4> Main Body </TD> </TR> </TABLE> 1st col 15% of screen Span title Put Nav Items In BL Put Main Body in • See how this would display http://www.depaul.edu/~dlash/website/layout1.html

  34. Would Output ... Title and body not centered Navigation not upper right hand corner

  35. Lets Refine It ... Center In cell <HTML> <HEAD> <TITLE> Sample Table </TITLE> </HEAD> <BODY> <TABLE BORDER=1 height=100% width=100%> <TR> <TD align=center width=15%> <img src=donald.gif > </TD> <TD colspan=4 align=center> Title </TD> </TR> <TR> <TD width=15% valign=top> <OL> <LI> Nav1</LI> <LI> Nav2 </LI> <LI> Nav3 </LI> </OL> </TD> <TD colspan=4> <TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0> <TR> <TD align=center valign=middle><font size=+2> Main Body </font></TD> </TR> </TABLE> </TR> </TABLE> </BODY></HTML> Start New table Valign at Top Of cell Align in Center of cell • Next slide http://www.depaul.edu/~dlash/website/layout2.html

  36. Would Output ...

  37. Some Special Table Uses • Goto This Web Page - Click Here

More Related