Embed Size (px)
Citation preview
David Lash
DePaul University
SNL 262 Web Page Design
Tables! - Chapt 15
Instructor: David A. Lash
2David Lash
What we talked about 2 weeks ago ...
Creating Lists Ordered Lists (<ol> … </ol> &<li> .. </li>) Unordered Lists (<ul> … </ul> &<li> .. </li>) Definition lists (<dl> … </dl>, <dt> .. </dt>, <dd> …
</dd>) Lists within lists (remember to match up start and end of lists).
Creating HTML links Creating absolute links
<A href=“http://www.depaul.edu/~dlash/myfile.html”> my home page </A>
Creating relative links <A href=“myfaq.html”> my FAQ Page </A>
Creating email links <A href=“mailto:[email protected]"> Mail me please </A>
3David Lash
What we talked about last week<BODY BGCOLOR="TEAL" LINK="BLUE" VLINKS="RED" ALINK="Pink"> Named colors and specify Hexadecimal number
Browser Safe Colors,
<body background="tile.gif"><U>, <I>, <B><font>
<font size=xx> <font color=xx> <font style=xx> <font style=xx color=yy size=zz>
Special character (e.g., $, #, @, <, >,) need special numerical characters ¢ to get the ¢ sign. <META> to get <META> &NBSP; &NBSP; to get 2 blank spaces.
4David Lash
What we will talk about this week…
How to create tables Basic <table>, <tr>, <td> tags
Some arguments with table Height, width, border
Special “tricks” Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples
Creating page layouts
5David Lash
HTML TablesAn orderly arrangement of text and/or graphics into
vertical columns and horizontal rows.
• Table with integrated graphicshttp://www.24hourhtmlcafe.com/hour14/fearful2.htm
Within HTML tables perform many functions
• See example at: http://www.depaul.edu/~dlash/extra/Webpage/examples/examletable.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 devicehttp://arnb.com/webdesign/chap5/tables/advert.htm
6David Lash
HTML Tables
Col 1, Row 1
Col 2 Row 1
Col 1, Row 2
Col 2, Row 2
Col 1, Row 3
Col 2 Row 3
An orderly arrangement of text and/or graphics into vertical columns and horizontal rows.
Eachthese arecalled a “cell”
7David Lash
The Basic Table Structure
The bare minimum tags needed to describe a table are
<TABLE> … </TABLE>, <TR> … </TR>, <TD> … </TD>
EnclosesTABLEDefn
Start& EndTable rowStart
& EndTableColmn
8David Lash
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>
TableRow
TableColumn
Start& EndTable
Creates the example 4 cell table Click Herehttp://condor.depaul.edu/~dlash/website/basic.html
9David Lash
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 answerhttp://www.depaul.edu/~dlash/website/guess1table.html
10David Lash
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 answerhttp://www.depaul.edu/~dlash/website/guess2table.html
11David Lash
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>
Click Here for answerhttp://www.depaul.edu/~dlash/extra/Webpage/examples/guess3table.html
Row 1 w/ 5 cols
Col 3-4 emptyCol 5
Row 2Cols 1-3
only have data
12David Lash
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>
Click Here for examplehttp://www.depaul.edu/~dlash/website/simpletablewTH.html
AutomaticBold ¢er
13David Lash
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 examplehttp://www.depaul.edu/~dlash/website/TableEx.html
14David Lash
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 thinkeach element in the table would be bold
Description Size Weight
Gun 5 Inch Barrel 20 Onces
T-Rex 40 Feet High Multiple Tons
Hurricane Floyd 400 Miles Radius ????
Instead that bold is ignored w/I table
15David Lash
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>
Cell1
1. Happy 2. Days
Are here again.
The skies are are blue again
Create a ol within this cell
Format some text.
16David Lash
What we will talk about this week…
How to create tables Basic <table>, <tr>, <td> tags
Some arguments with table Height, width, border
Special “tricks” Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples
Creating page layouts
17David Lash
Options: Table, Row and Column Width
Some other attributes for the table tagwidth=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.)
18David Lash
Specifying Column Size<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
Set overall table size
Sets individual
element
19David Lash
Options: Borders
Some other attributes for the table tagborder=# - 0 or no border is the default
see below for more details.
20David Lash
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
21David Lash
Options: Background Color
bgcolor="#rrggbb" or color name - sets a color for background for table or table cell.
22David Lash
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>
The Local News
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
23David Lash
What we will talk about this week…
How to create tables Basic <table>, <tr>, <td> tags
Some arguments with table Height, width, border
Special “tricks” Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples
Creating page layouts
24David Lash
Some Special Table Tricks Cell text alignment Padding the columns and Rows Spanning Columns and RowsSpecial Examples
25David Lash
Options: AlignmentSome other attributes for the table tagalign=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.
26David Lash
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
27David Lash
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.
Text
SpacingNumber of pixels betw
cells
PaddingNumber of pixels from cell border to text
Text
28David Lash
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 text52 pixels
from border
(next slide http://www.depaul.edu/~dlash/website/Announce.html
29David Lash
Would look like ...
The Local News
Announcing Earlier Class Dismissal Today!
30David Lash
Cell Padding And SpacingCell 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
tablecells
31David Lash
Would Look Like ...
The Local News
DATA1 DATA2
DATA3 DATA4
32David Lash
Options: colspan and rowspan
colspan - Allows a cell to span columnsrowspan - Allows a cell to span rows
Useful for performing a page layout
33David Lash
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
34David Lash
Col Span ExampleExample 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
3 rows & Cols. The first row spans all cols!
35David Lash
Col & Row Spacing
Rowspan allows 1 cell to span more than 1 rows of cells.
This col has rowspan=3
This col spans
both colsrowspan=2
This colhas
rowspan=3
36David Lash
RowSpan ExampleJust 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
3 rows & Cols.
The first col spans all
rows!
37David Lash
Creating Layouts Suppose you want to make a page layout as
follows:
This Colhas colspan 5
TitleNavigation
Main Page
rowspan4
Rowspan 4Colspan 4
Your Logo
38David Lash
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>
See how this would displayhttp://www.depaul.edu/~dlash/website/layout1.html
1st col15% of screen
Spantitle
Put NavItems In BL
Put MainBody in
39David Lash
Would Output ...
Title
1. Nav1 2. Nav2 3. Nav3
Main Body
Navigation not upper right hand corner
Title and body not centered
40David Lash
Lets Refine It ...<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>
Next slidehttp://www.depaul.edu/~dlash/website/layout2.html
CenterIn cell
StartNew table
Align in Center of cell
Valign atTop Of cell
41David Lash
Would Output ...
Title
1. Nav1 2. Nav2 3. Nav3 Main Body
42David Lash
Some Special Table Uses
Goto This Web Page - Click Here
43David Lash
What we talked about …
How to create tables Basic <table>, <tr>, <td> tags
Some arguments with table Height, width, border
Special “tricks” Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples
Creating page layouts
44David Lash
Review of homework
Look at homework file at http://condor.depaul.edu/~dlash/website/Lab4.html
Also don’t forget to include a link to your lab on your home page
