1 Using HTML tables...

2 What we talked about last time l l Named colors and specify Hexadecimal number »Browser Safe Colors, l l,, l » l Special character (e.g., $, need special numerical characters »&#162 to get the ¢ sign. »<META&gt to get » to get 2 blank spaces.

3 Objectives... l How to create tables »Basic,, tags l Some arguments with table »Height, width, border l Special “tricks” »Cell text alignment »Padding the columns and Rows »Spanning Columns and Rows »Special Examples l Creating page layouts

4 Competency Objectives 1. Can create a table of elements 2. Can add color, alignment, size 3. Understand some of capabilities of tables 4. Can use tables for layout Competency Alert: You need to know this ! Common Problem Area! People seem to forget this

5 HTML Tables l An orderly arrangement of text and/or graphics into vertical columns and horizontal rows. l 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

6 A couple of table examples... A table used as a page layout device A simple table Competency Alert: You need to know this !

7 HTML Tables Organization l Tables are organized by rows and columns Each these are called a “cell”

8 The Basic Table Structure The bare minimum tags needed to describe a table are …, … Defines the start and 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.

9 The Basic Table Structure Simple Table Cell 1 Cell 2 Cell 3 Cell 4 Table Row Table data (column) Start & End Table Competency Alert: You need to know this !

10 Not all rows need not be same the size Notice you do not need same columns in each row Cell 1 Cell 2 Cell 1 Cell 2 Cell 3

11 How ‘null’ columns are treated What would the following display? Cell1 Cell2 Cell ? Cell 1 Cell 2 Cell 3 Row 1 w/ 5 cols, Col 3-4 empty, col 5 has cell ? Row 2: Cols 1-3 only have data

12 Using for Table Headers Use the tag for Table headers. Each element within is made bold and centered Character Description Frodo The ring bearer, that is, he carries the ring. Sam Frodo's trusted assistant. He carries the stuff (and Frodo too sometimes) Automatic Bold & center Competency Alert: You need to know this !

13 Not closing tags in tables. Tables are another example of how ‘wrong’ html displays correctly. My First Table Description Size Weight Gun 5 Inch Barrel 20 Ounces T-Rex 40 Feet High Multiple Tons Hurricane Floyd 400 Miles Radius ???? No, tag Missing and tag Common Problem Area! People seem to forget this

14 Tables Are Their Own Environment Simple Table Character Description Frodo The ring bearer, that is, he carries the ring. Sam Frodo's trusted assistant. He carries the stuff (and Frodo too sometimes) Is this line italics or not? You might think each table cell would be default italics Line AFTER table still gets italics. Italics is turned off after the cell. Common Problem Area! People seem to forget this

15 Table Cells Format Like Documents... Test A litte 'tune' Happy Days Are here again. The skies are are blue again But my favorite 'tune' is: Create a ol within this cell. Format some text. Include an image centered. Competency Alert: You need to know this !

16 Objectives... l How to create tables »Basic,, tags l Some arguments with table »Height, width, border l Special “tricks” »Cell text alignment »Padding the columns and Rows »Spanning Columns and Rows »Special Examples l Creating page layouts

17 Table Attributes Row and Column Width Some other attributes for the 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.)

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 ???? Set overall table size Specify per column or one for overall. Notice how browser overrides the 10% column to ‘even’ column out.

19 Using Percentages fills to current window 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 ???? If specify width and height as percentage, browser will automatically resize table

20 Other table attributes: Borders l border=# - 0 or no border is the default Simple Table Character Description Frodo The ring bearer, that is, he carries the ring. Sam Frodo's trusted assistant. He carries the stuff (and Frodo too sometimes) Is this line italics or not? Border = 0 And border=10

21 Options: Background Color l bgcolor="#rrggbb" or color name - sets a color for background for table or 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

22 Color MyTable Color My World - Chicago As time goes on I realize just what you mean to me. But now, now that your near Promise your love That I've waited to share And dreams of our moments together Color my world with hope of loving you Set default table background to red Use green for row Override table and row color and make column yellow Table bgcolor example...

23 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, or tags. l valign=top|bottom|middle – set the vertical alignment of the table, row or cell. Can be used with,, or tags.

24 Alignment Attributes My First Table Name Rank Serial Number George Washington General 1 George Bush President 42 George Ryan ??? ????? Right justify Center justify

25 Objectives... l How to create tables »Basic,, tags l Some arguments with table »Height, width, border l Special “tricks” »Cell text alignment »Padding the columns and Rows »Spanning Columns and Rows »Special Examples l Creating page layouts

26 A Definition Style Table My First Table HTML HyperText Markup Language. It is the language you develop web pages in. You use the result of HTML without even knowing it. (Web Page Design)

27 Simple Column Layout Color MyTable TWO COLUMN Page Layout FRONTPAGE SPORTS TRAFFIC POLITICS HEADLINE 2 This is the right column of the newspaper. This is quite a lot of text here that includes all kinds of cool stuff.

28 Objectives... l How to create tables »Basic,, tags l Some arguments with table »Height, width, border l Special “tricks” »Cell text alignment »Padding the columns and Rows »Spanning Columns and Rows »Special Examples l Creating page layouts

29 Cell padding and cell spacing l 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. Text Spacing number of pixels between cells Padding number of pixels from cell border to text Text

30 Cell Padding Announcement Box Color MyTable The Local News Announcing Earlier Class Dismissal Today! Padding of 52 from border to text A single cell table

31 Using Cell Spacing Cell Spacing The Local News DATA1 DATA2 9. DATA3 DATA Cell Spacing of 50

32 Attributes: colspan and rowspan l colspan - Allows a cell to span columns l rowspan - Allows a cell to span rows »These are useful for performing a page layout

33 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

34 Colspan Example 3 rows & Cols. The first row spans all cols! Spanning columns Colspan Your title here TEXT Text TEXT TEXT TEXT <TD BGCOLOR="ORANGE">TEXT

35 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

36 RowSpan Example 3 rows & Cols. The first colomn spans all rows! Rowspan My Page Visit uncle's site my dad's site my site other stuff TEXT TEXT TEXT TEXT TEXT

37 A Narrow Column My First Table Now IS The Time For All Good Men To Come To The Aid Of Their Country.

38 Objectives... l How to create tables »Basic,, tags l Some arguments with table »Height, width, border l Special “tricks” »Cell text alignment »Padding the columns and Rows »Spanning Columns and Rows »Special Examples l Creating page layouts

39 Creating Layouts l Suppose you want to make a page layout as follows: This Coloumn has colspan 5 Title NavigationNavigation Main Page rowspan 4 Rowspan 4 Colspan 4 Your Logo

40 Wouldn’t this solve the problem? Sample Table Title Nav1 Nav2 Nav3 Main Body 1 st col15% of screen Span the title 4 columns Put Nav Items in bullet list Put Main Body in Navigation not upper right hand corner Title and body not centered

41 Lets Refine It... Sample Table Title Nav1 Nav2 Nav3 <TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0> Main Body Center In cell Start a new table that is 100% of remaining space. Align in center of cell Valign at Top Of cell

42 Would Output...

43 Precisely Placing text Need to sub-divide this cell to precisely place this text

44 One possible method Sample Table Title Nav1 Nav2 Nav3 Main Body Copyright by me 2005

45 Review of homework l Look at homework file at » l Also don’t forget to include a link to your lab on your home page

46 Objectives... l How to create tables »Basic,, tags l Some arguments with table »Height, width, border l Special “tricks” »Cell text alignment »Padding the columns and Rows »Spanning Columns and Rows »Special Examples l Creating page layouts

47 Starting up FTP Enter your webserver name: students.depaul.edu Enter your web server userid: dlash Enter your web server password: apb73a1ks Click OK when your done 1. Start->Internet Applications->FTP (Start->programs->depaul online->ftp from at home with DePaul Online) 2. Fill in: Host Name: students.depaul.edu User Id: your DePaul userid Password: your DePaul password

48 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.

49 More on FTP Main Screen. PC Files and directories Current directory on PC Current directory on Web server Web server Files and directories

50 Navigating FTP Navigate to location of file on PC and highlight the file you want to copy Note the different directory name Navigate to public_html directory (by double clicking folder name). Note the new folder location. IT IS VITAL THAT YOU COPY TO public_html

51 Copy The File Highlight file and then hit the -> button to copy from PC side to Web server side SECOND WARNING: Again make sure you are in public_html directory on web server 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

52 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.