Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
AdvWeb-1/37
DePaul University SNL 262
Web Page Design
Tables! - Chapt 15
Instructor: David A. Lash
AdvWeb-2/37
HTML Tables An 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
AdvWeb-3/37
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”
AdvWeb-4/37
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
AdvWeb-5/37
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
AdvWeb-6/37
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
AdvWeb-7/37
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
AdvWeb-8/37
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
AdvWeb-9/37
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
AdvWeb-10/37
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
AdvWeb-11/37
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
AdvWeb-12/37
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
AdvWeb-13/37
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.)
AdvWeb-14/37
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
Sets the overall sizes
Sets individual
element
AdvWeb-15/37
Options: Borders
Some other attributes for the table tag border=# - 0 or no border is the default see
below for more details.
AdvWeb-16/37
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
AdvWeb-17/37
Options: Background color
bgcolor="#rrggbb" or color name - sets a color for background for table or table cell.
AdvWeb-18/37
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
AdvWeb-19/37
Some Special Table Tricks
Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples
AdvWeb-20/37
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.
AdvWeb-21/37
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
AdvWeb-22/37
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
AdvWeb-23/37
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
AdvWeb-24/37
Would look like ...
The Local News
Announcing Earlier Class Dismissal Today!
AdvWeb-25/37
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
tablecells
AdvWeb-26/37
Would Look Like ...
The Local News
DATA1 DATA2
DATA3 DATA4
AdvWeb-27/37
Options: colspan and rowspan
colspan - Allows a cell to span columns rowspan - Allows a cell to span rows
– Useful for performing a page layout
AdvWeb-28/37
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
AdvWeb-29/37
Col Span Example
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
3 rows & Cols. The first
row spans all
cols!
AdvWeb-30/37
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
AdvWeb-31/37
RowSpan Example
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
3 rows & Cols.
The first col spans all
rows!
AdvWeb-32/37
Creating Layouts
Suppose you want to make a page layout as follows:
This Colhas
colspan5
Title
Navigation
Main Page
rowspan4
rowspan4
colspan4
Your Logo
AdvWeb-33/37
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
PutMainBody in
AdvWeb-34/37
Would Output ...
Title
1. Nav1 2. Nav2 3. Nav3
Main Body
Navigation not upper right hand corner
Title and body not centered
AdvWeb-35/37
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
AdvWeb-36/37
Would Output ...
Title
1. Nav1 2. Nav2 3. Nav3 Main Body
AdvWeb-37/37
Some Special Table Uses
Goto This Web Page - Click Here
