advweb-1/37 depaul university snl 262 web page design tables! - chapt 15 instructor: david a. lash
Post on 22-Dec-2015
214 views
TRANSCRIPT
![Page 1: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/1.jpg)
AdvWeb-1/37
DePaul University SNL 262
Web Page Design
Tables! - Chapt 15
Instructor: David A. Lash
![Page 2: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/2.jpg)
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
![Page 3: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/3.jpg)
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”
![Page 4: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/4.jpg)
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
![Page 5: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/5.jpg)
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
![Page 6: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/6.jpg)
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
![Page 7: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/7.jpg)
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
![Page 8: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/8.jpg)
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
![Page 9: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/9.jpg)
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
![Page 10: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/10.jpg)
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
![Page 11: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/11.jpg)
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
![Page 12: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/12.jpg)
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
![Page 13: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/13.jpg)
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.)
![Page 14: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/14.jpg)
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
![Page 15: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/15.jpg)
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.
![Page 16: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/16.jpg)
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
![Page 17: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/17.jpg)
AdvWeb-17/37
Options: Background color
bgcolor="#rrggbb" or color name - sets a color for background for table or table cell.
![Page 18: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/18.jpg)
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
![Page 19: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/19.jpg)
AdvWeb-19/37
Some Special Table Tricks
Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples
![Page 20: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/20.jpg)
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.
![Page 21: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/21.jpg)
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
![Page 22: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/22.jpg)
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
![Page 23: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/23.jpg)
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
![Page 24: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/24.jpg)
AdvWeb-24/37
Would look like ...
The Local News
Announcing Earlier Class Dismissal Today!
![Page 25: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/25.jpg)
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
![Page 26: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/26.jpg)
AdvWeb-26/37
Would Look Like ...
The Local News
DATA1 DATA2
DATA3 DATA4
![Page 27: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/27.jpg)
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
![Page 28: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/28.jpg)
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
![Page 29: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/29.jpg)
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!
![Page 30: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/30.jpg)
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
![Page 31: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/31.jpg)
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!
![Page 32: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/32.jpg)
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
![Page 33: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/33.jpg)
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
![Page 34: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/34.jpg)
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
![Page 35: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/35.jpg)
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
![Page 36: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/36.jpg)
AdvWeb-36/37
Would Output ...
Title
1. Nav1 2. Nav2 3. Nav3 Main Body
![Page 37: AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash](https://reader038.vdocument.in/reader038/viewer/2022103123/56649d7e5503460f94a60b88/html5/thumbnails/37.jpg)
AdvWeb-37/37
Some Special Table Uses
Goto This Web Page - Click Here