Using HTML tables 1 What we talked about
Using HTML tables. . . 1
What we talked about last time l <BODY BGCOLOR="TEAL" LINK="BLUE" VLINKS="RED" ALINK="Pink"> l Named colors and specify Hexadecimal number » Browser Safe Colors, l<body background="tile. gif"> l <U>, <I>, <B> l <font> » <font size=xx> » <font color=xx> » <font style=xx color=yy size=zz> l Special character (e. g. , $, #, @, <, >, ) need special numerical characters » ¢ to get the ¢ sign. » < META> to get <META> » &NBSP; to get 2 blank spaces. 2
Objectives. . . l How to create tables » Basic <table>, <tr>, <td> tags l Some arguments with table » Height, width, border l Special “tricks” » » l Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples Creating page layouts 3
Competency Objectives 1. 2. 3. 4. Can create a table of elements Can add color, alignment, size Understand some of capabilities of tables Can use tables for layout Competency Alert: You need to ! know this Common Problem Area! People seem to forget this 4
HTML Tables l An orderly arrangement of text and/or graphics into vertical columns and horizontal rows. l Within HTML tables perform many functions » Show data output in traditional table format » Separate a Web page into different areas » Control web page layout (for text and graphics) 5
A couple of table examples. . . A table used as a page layout device A simple table Competency Alert: You need to ! know this http: //arnb. com/webdesign/chap 5/tables/advert. htm 6
HTML Tables Organization l Tables are organized by rows and columns Each these are called a “cell” 7
The Basic Table Structure The bare minimum tags needed to describe a table are Defines the start and <TABLE> … </TABLE>, <TR> … </TR>, <TD> … </TD> end of table Defines the start and end of a table row Defines the start and end of a table data item in a row. 8
The Basic Table Structure <HTML> <HEAD><TITLE> Simple Table </TITLE> </HEAD> <BODY> Table <TABLE> Row <TR> Start <TD> Cell 1</TD><TD>Cell 2</TD> & End </TR><TR> Table <TD> Cell 3</TD><TD>Cell 4</TD> </TR> </TABLE> Table data </BODY> (column) </HTML> Competency Alert: You need to ! know this 9
Not all rows need not be same the size • Notice you do not need same columns in each row <TABLE border=1> <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> 10
How ‘null’ columns are treated What would the following display? <TABLE> <TR> <TD>Cell 1</TD> <TD>Cell 2</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 has cell ? Row 2: Cols 1 -3 only have data 11
Using <TH> for Table Headers • Use the <TH> tag for Table headers. • Each element within <TH> is made bold and centered <TABLE border=1 > <TR> <TH> Character </TH> <TH> Description </TH> </TR><TR> <TD> Frodo </TD><TD>The ring bearer, that is, he carries the ring. </TD> </TR><TR> <TD> Sam </TD><TD>Frodo's trusted assistant. He carries the stuff (and Frodo too sometimes) </TD> </TR> </TABLE> Automatic Bold & center Competency Alert: You need to ! know this 12
Not closing tags in tables. • Tables are another example of how ‘wrong’ html displays correctly. <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> ? ? </TABLE> </BODY></HTML> No, </td> tag Missing </td> and </tr> tag Common Problem Area! People seem to forget this 13
Tables Are Their Own Environment You might think each table cell would be default italics <HTML> <HEAD><TITLE> Simple Table </TITLE> </HEAD> <BODY> <i> Italics is turned off <TABLE border=1 > <TR> after the cell. <TH> Character </TH> <TH> Description </TH> </TR><TR> <TD> Frodo </TD><TD>The ring bearer, that is, he carries the ring. </TD> </TR><TR> <TD> <i> Sam </TD><TD>Frodo's trusted assistant. He carries the stuff (and Frodo too sometimes) </TD> </TR> </TABLE> Is this line italics or not? </BODY> Line AFTER table </HTML> still gets italics. Common Problem Area! 14 People seem to forget this
Table Cells Format Like Documents. . . <html><head> <title> Test </title> </head> <body> <table border=1> <tr> <td>A litte 'tune' <font color=blue> < ol> <li> Happy </li><li> Days</li> </ol></td> <td> Are here again. </td></ tr> <tr><td> The <i>skies</i> are <b>blue</b> again </td> <td>But my favorite 'tune' is: < br> <div align=center> <img src="donald. gif"> </div> </td> </tr> </table> </body> </html> Create a ol within this cell. Format some text. Include an image centered. Competency Alert: You need to ! know this 15
Objectives. . . l How to create tables » Basic <table>, <tr>, <td> tags l Some arguments with table » Height, width, border l Special “tricks” » » l Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples Creating page layouts 16
Table Attributes Row and Column Width Some other attributes for the <table> tag l 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. ) l 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. ) 17
Specifying Column Size Set overall <HTML> <HEAD><TITLE> My First Table </TITLE> table size <BODY> <TABLE border=1 WIDTH=500 HEIGHT=400> <TR> <TH WIDTH=20%> Description </TH> <TH WIDTH=40%> Size </TH> <TH WIDTH=40%> Weight </TH> </TR> <TD WIDTH=20%>Gun</TD> <TD>5 Inch Barrel </TD> <TD> 20 Ounces </TD> Specify per column or </TR> <TR> one for overall. Notice <TD WIDTH=20%>T-REX</TD><TD>40 Feet High</TD> <TD> Multiple Tons</TD> how browser overrides </TR> <TD WIDTH=10%>Hurricane Floyd</TD> <TD>400 Miles Radius </TD><TD> ? ? </TD> the 10% column to ‘even’ </TR> column out. </TABLE> </BODY></HTML> 18
Using Percentages fills to current window size. If specify width and height as will table <HTML> <HEAD><TITLE> My First Table </TITLE> <BODY> percentage, browser <TABLE border=1 WIDTH=100% HEIGHT=100%> automatically resize <TR> <TH WIDTH=20%> Description </TH> <TH WIDTH=40%> Size </TH> <TH WIDTH=40%> Weight </TH> </TR> <TD WIDTH=20%>Gun</TD> <TD>5 Inch Barrel </TD> <TD> 20 Ounces </TD> </TR> <TD WIDTH=20%>T-REX</TD><TD>40 Feet High</TD> <TD> Multiple Tons</TD> </TR> <TD WIDTH=10%>Hurricane Floyd</TD> <TD>400 Miles Radius </TD><TD> ? ? </TD> </TR> </TABLE> </BODY></HTML> 19
Other table attributes: Borders l border=# - 0 or no border is the default <HTML> <HEAD><TITLE> Simple Table </TITLE> </HEAD> <BODY> <i> <TABLE> <TR> <TH> Character </TH> <TH> Description </TH> </TR><TR> <TD> Frodo </TD><TD>The ring bearer, that is, he carries the ring. </TD></TR><TR> <TD> <i> Sam </TD><TD>Frodo's trusted assistant. He carries the stuff (and Frodo too sometimes) </TD> </TR> </TABLE> Is this line italics or not? </BODY> </HTML> Border = 0 And border=10 20
Options: Background Color l bgcolor="#rrggbb" or color name - sets a color for background for table cell. l Can specify bgcolor for overall table background, for a row, and for a column. » Column specification overrides row » Row specification overrides table specification 21
Table bgcolor example. . . <html> <head><title> Color My. Table </title> <body> Set default table <div align=center> Color My World - Chicago </div> background to red <table border="1" bgcolor="red"> <tr> <td>As time goes on</TD><TD>I realize</TD><TD>just what you mean</TD> </tr><tr bgcolor="green"> Use green for row <td>to me. But now, </td><td> now that your near </td> <td bgcolor="yellow">Promise your love That I've waited to share</td> </tr> <td>And dreams of our moments together </td><td>Color my world with hope</td><td>of loving you</td> </tr> </table> </body></html> Override table and row color and make column yellow 22
Attributes: Alignment Some other attributes for the table tag l align=left|right|center – sets the horizontal alignment for a table, row, or cell. Can be used with <TABLE> <TR>, <TD> or <TH> tags. l valign=top|bottom|middle – set the vertical alignment of the table, row or cell. Can be used with <TABLE>, <TR>, <TD> or <TH> tags. 23
Alignment Attributes <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> Right justify <TD ALIGN=RIGHT>George Washington</TD> <TD>General </TD> <TD> 1</TD> Center justify </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> 24
Objectives. . . l How to create tables » Basic <table>, <tr>, <td> tags l Some arguments with table » Height, width, border l Special “tricks” » » l Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples Creating page layouts 25
A Definition Style Table <HTML> <HEAD><TITLE> My First Table </TITLE> </HEAD><BODY> <TABLE BORDER=0 BGCOLOR="Yellow"> <TR><TD VALIGN=top><FONT SIZE=+2><B>HTML</B></FONT></TD> <TD>Hyper. Text Markup Language. It is the language you develop web pages in. <BR>You use the result of HTML without even knowing it. <P ALIGN=right>(Web Page Design)</P> </TD></TR> </TABLE> </BODY></HTML> 26
Simple Column Layout <HTML> <HEAD><TITLE> Color My. Table </TITLE></HEAD><BODY> <B> <center> <FONT SIZE="+3">TWO COLUMN Page Layout</FONT></center> <TABLE BORDER=0 WIDTH=100%> <TR> <TD BGCOLOR=#FF 00 FF VALIGN=TOP WIDTH=20%> <FONT SIZE="+1"><B> <BR> FRONTPAGE <BR> SPORTS <BR> TRAFFIC <BR> POLITICS</FONT> </TD> <TD BGCOLOR=#FF 00 CC VALIGN=TOP WIDTH=80%><FONT SIZE="+3"> <B> HEADLINE 2 </B></FONT></B><BR> <FONT SIZE="+1">This is the right column of the newspaper. This is quite a lot of text here that includes all kinds of cool stuff. </FONT> </TD> </TR> </TABLE> </BODY></HTML> 27
Objectives. . . l How to create tables » Basic <table>, <tr>, <td> tags l Some arguments with table » Height, width, border l Special “tricks” » » l Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples Creating page layouts 28
Cell padding and cell spacing Cell padding specifies the number of pixels from the cell border to the text. Useful for simple announcement boxes. l Cell spacing specifies number of pixels between cells of the table. Spacing number of l pixels between cells Text Padding number of pixels from cell border to text 29
Cell Padding Announcement Box <HTML> <HEAD><TITLE> Color My. Table </TITLE> <BODY> A single cell <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> table Padding of 52 from border to text 30
Using Cell Spacing. . . 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. <HTML> <HEAD><TITLE> Cell Spacing </TITLE> <BODY> <B> <center> <FONT SIZE="+3">The Local News </FONT></center> <DIV ALIGN=CENTER> <TABLE BORDER=2 CELLSPACING=50 CELLPADDING=1> <TR><TD>DATA 1</TD><TD>DATA 2</TD></TR> <TR><TD>DATA 3</TD><TD>DATA 4</TD></TR> </TABLE> </DIV> </BODY></HTML> Cell Spacing of 50 31
Attributes: colspan and rowspan colspan - Allows a cell to span columns l rowspan - Allows a cell to span rows l » These are useful for performing a page layout 32
Column & Row Spacing l Colspan - span more than 1 cell column. This row has colspan=2 This row has colspan=3 This row has colspan=2 33
Colspan Example <HTML> <HEAD><TITLE>Spanning columns </TITLE> <BODY<FONT SIZE="+3">Colspan </FONT> <TABLE BORDER=1 BGCOLOR="RED"> <TR> <TD COLSPAN=3 BGCOLOR="blue">Your title here</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> 3 rows & Cols. The first row spans all cols! 34
Using Rowspan l 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 35
Row. Span Example <HTML> <HEAD><TITLE> Rowspan </TITLE> <BODY> <center> <FONT SIZE="+3">My Page </FONT></center> <TABLE BORDER=1 BGCOLOR="RED"> <TR> <TD ROWSPAN=3 BGCOLOR="blue"> Visit<ul> <li> uncle's site </li> <li> my dad's site </li> <li> my site </li> </ul> </TD><TD BGCOLOR="YELLOW">other stuff</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> 3 rows & Cols. The first colomn spans all rows! 36
A Narrow Column <HTML> <HEAD><TITLE> My First Table </TITLE> <BODY> <TABLE BGCOLOR="#ffff 99" BORDER=0> <TR><TD ROWSPAN=99 BGCOLOR="#cc 3333"> </TD> <TD>Now</TD></TR> <TR><TD>IS The</TD></TR> <TR><TD>Time </TD></TR> <TR><TD>For </TD></TR> <TR><TD>All </TD></TR> <TR><TD>Good Men </TD></TR> <TR><TD>To Come </TD></TR> <TD>To The Aid </TD></TR> <TR><TD>Of Their </TD></TR> <TR><TD>Country. </TD></TR> </TABLE> </BODY></HTML> 37
Objectives. . . l How to create tables » Basic <table>, <tr>, <td> tags l Some arguments with table » Height, width, border l Special “tricks” » » l Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples Creating page layouts 38
Creating Layouts l Suppose you want to make a page layout as follows: Title Your Logo N a v i g a t i o n This Coloumn has colspan 5 Main Page Rowspan 4 Colspan 4 rowspan 4 39
Wouldn’t this solve the problem? <HTML> 1 st col 15% of <HEAD> <TITLE> Sample Table </TITLE> </HEAD> screen <BODY> <TABLE BORDER=1 height=100% width=100%> Span the title 4 columns <TR> <TD width=15%> <img src=donald. gif > </TD> <TD colspan=4> Title </TD> </TR> <TD width=15%> <UL> <LI> Nav 1</LI> <LI> Nav 2 </LI> <LI> Nav 3 </LI> </OL> </TD> <TD colspan=4> Main Body </TD> Put Nav Put Main </TR> </TABLE> Items in Body in bullet list Title and body not centered Navigation not upper right hand corner 40
Lets Refine It. . . <HTML> <HEAD> <TITLE> Sample Table </TITLE> </HEAD> Center In cell <BODY> <TABLE BORDER=1 height=100% width=100%> <TR> Valign at Top Of cell <TD align=center width=15%> <img src=donald. gif > </TD> <TD colspan=4 align=center> Title </TD> </TR> <TD width=15% valign=top> <OL> <LI> Nav 1</LI> <LI> Nav 2 </LI> <LI> Nav 3 </LI> </OL> </TD> <TD colspan=4> Start a new table that <TABLE WIDTH=100% BORDER=0 CELLSPACING=0 is 100% of remaining CELLPADDING=0> space. <TR> <TD align=center valign=middle><font size=+2> Main Body </font></TD> </TR> </TABLE> </TR> Align in center of </TABLE> </BODY></HTML> cell 41
Would Output. . . 42
Precisely Placing text Need to sub-divide this cell to precisely place this text 43
One possible method <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> <TD width=15% valign=top> <OL> <LI> Nav 1</LI> <LI> Nav 2 </LI> <LI> Nav 3 </LI> </OL> </TD> <TD colspan=4> <TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0> <TR> <TD align=center valign=middle colspan=3><font size=+2> Main Body </font></TD> <tr height=4%><td> <td>Copyright by me 2005 <td></td > </TR> </TABLE> </BODY></HTML> 44
Review of homework l Look at homework file at » http: //condor. depaul. edu/~dlash/website/Lab 4. html l Also don’t forget to include a link to your lab on your home page 45
Objectives. . . l How to create tables » Basic <table>, <tr>, <td> tags l Some arguments with table » Height, width, border l Special “tricks” » » l Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples Creating page layouts 46
Starting up FTP Enter your webserver name: students. depaul. edu Enter your web server userid: dlash Enter your web server password: apb 73 a 1 ks Click OK when your done 1. Start->Internet Applications->FTP (Start->programs->depaul online->ftp from at home with De. Paul Online) 2. Fill in: Host Name: students. depaul. edu User Id: your De. Paul userid Password: your De. Paul password 47
How to tell if your connected? On this screen I entered the wrong password. Note error message here and that this side is blank. Successful connection! Note the status here and the PC files are here and Web server files are here. 48
More on FTP Main Screen. Current directory on PC PC Files and directories Current directory on Web server Files and directories 49
Navigating FTP Note the different directory name Navigate to location of file on PC and highlight the file you want to copy Navigate to public_html directory (by double clicking folder name). Note the new folder location. IT IS VITAL THAT YOU COPY TO public_html 50
Copy The File SECOND WARNING: Again make sure you are in public_html directory on web server Highlight file and then hit the -> button to copy from PC side to Web server side You can click “date” to sort by date and then file you transferred should appear at the top. ANOTHER WARNING LOOK AT THE FILE NAME. MAKE SURE NO CAPITALS OR SPACES 51
WARNING! FTP Timeout after 2 -3 mins Unfortunately, if you don’t use the FTP screen for about 2 -3 minutes, your connection will timeout If you get this you must click connect or close and then resign in again. 52
- Slides: 52