using html tables.... objectives... how to create tables basic,, tags some arguments with table...
TRANSCRIPT
![Page 1: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/1.jpg)
Using HTML tables . . .
![Page 2: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/2.jpg)
Objectives . . .
• 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
![Page 3: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/3.jpg)
Competency Objectives
1. Can create a table of elements2. Can add color, alignment, size3. Understand some of capabilities of tables4. Can use tables for layout
Competency Alert:You need to
know this!
Common Problem Area!
People seem to forget this
![Page 4: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/4.jpg)
HTML Tables
An orderly arrangement of text and/or graphics into vertical columns and horizontal rows.
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
![Page 5: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/5.jpg)
A couple of table examples . . .
http://arnb.com/webdesign/chap5/tables/advert.htm
A table used as a page layout deviceA simple table
Competency Alert:You need to
know this!
![Page 6: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/6.jpg)
HTML Tables Organization
Col 1, Row 1
Col 2 Row 1
Col 1, Row 2
Col 2, Row 2
Col 1, Row 3
Col 2 Row 3
Tables are organized by rows and columns
Eachthese arecalled a “cell”
![Page 7: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/7.jpg)
The Basic Table Structure
The bare minimum tags needed to describe a table are
<TABLE> … </TABLE>, <TR> … </TR>,
<TD> … </TD>
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.
![Page 8: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/8.jpg)
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
Table data (column)
Start& EndTable
Competency Alert:You need to
know this!
![Page 9: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/9.jpg)
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>
![Page 10: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/10.jpg)
How ‘null’ columns are treated
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>
Row 1 has 5 cols, Col 3-4 empty, col 5 has cell ?
Row 2: Cols 1-3only have data
![Page 11: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/11.jpg)
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 ¢er
Competency Alert:You need to
know this!
![Page 12: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/12.jpg)
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
![Page 13: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/13.jpg)
Tables Are Their Own Environment
<HTML><HEAD><TITLE> Simple Table </TITLE> </HEAD><BODY><i><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> <i> Sam </i> </TD><TD>Frodo's trusted assistant. He carries the stuff (and Frodo too sometimes)</TD> </TR> </TABLE>Is this line italics or not? </i> </BODY>
</HTML>
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
![Page 14: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/14.jpg)
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 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!
![Page 15: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/15.jpg)
Objectives . . .
• 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
![Page 16: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/16.jpg)
Table Attributes 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 17: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/17.jpg)
Specifying Column Size
<HTML> <HEAD><TITLE> My First Table </TITLE> </HEAD><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> <TR> <TD WIDTH=20%>Gun</TD> <TD>5 Inch Barrel </TD> <TD> 20 Ounces </TD> </TR> <TR> <TD WIDTH=20%>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>
Set overall table size
Specify per column or one for overall. Notice how browser overrides the 10% column to ‘even’ column out.
![Page 18: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/18.jpg)
Using Percentages fills to current window size. <HTML> <HEAD><TITLE> My First Table </TITLE> <BODY> <TABLE border=1 WIDTH=100% HEIGHT=100%> <TR> <TH WIDTH=20%> Description </TH> <TH WIDTH=40%> Size </TH> <TH WIDTH=40%> Weight </TH> </TR> <TR> <TD WIDTH=20%>Gun</TD> <TD>5 Inch Barrel </TD> <TD> 20 Ounces </TD> </TR> <TR> <TD WIDTH=20%>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>
If specify width and height aspercentage, browser will automatically resize table
![Page 19: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/19.jpg)
Other table attributes: Borders
• 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
![Page 20: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/20.jpg)
Options: Background Color
• bgcolor="#rrggbb" or color name - sets a color for background for table or table cell.
• Can specify bgcolor for overall table background, for a row, and for a column. • Column specification overrides row• Row specification overrides table specification
![Page 21: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/21.jpg)
Table bgcolor example . . .
<html> <head><title> Color MyTable </title> </head>
<body>
<div align=center> Color My World - Chicago </div>
<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">
<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> <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>
Set default table background to red
Use green for row
Override table and row color and make column yellow
![Page 22: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/22.jpg)
Attributes: 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 23: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/23.jpg)
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>
<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>
Right justify
Center justify
![Page 24: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/24.jpg)
Objectives . . .
• 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
![Page 25: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/25.jpg)
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>HyperText Markup Language.<br>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>
![Page 26: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/26.jpg)
Objectives . . .
• 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
![Page 27: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/27.jpg)
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.
Spacing number of pixels betweencells
Padding number of pixels from cell border to text
![Page 28: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/28.jpg)
Cell Padding Announcement Box<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>
Padding of 52 from border to text
A single cell table
![Page 29: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/29.jpg)
Using Cell Spacing . . . 1. <HTML> <HEAD><TITLE> Cell Spacing </TITLE>
2. <BODY>
3. <center>
4. <FONT SIZE="+3">The Local News </FONT></center>
5. <DIV ALIGN=CENTER>
6. <TABLE BORDER=2 CELLSPACING=50 CELLPADDING=1>
7. <TR><TD>DATA1</TD><TD>DATA2</TD></TR>
8. <TR><TD>DATA3</TD><TD>DATA4</TD></TR>
9. </TABLE>
10.</DIV>
11.</BODY></HTML>
Cell Spacing of 50
![Page 30: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/30.jpg)
Attributes: colspan and rowspan
• colspan - Allows a cell to span columns• rowspan - Allows a cell to span rows
• These are useful for performing a page layout
![Page 31: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/31.jpg)
Column & Row Spacing
• Colspan - span more than 1 cell column.
This row has colspan=2
This row has colspan=3
This row has colspan=2
![Page 32: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/32.jpg)
Colspan Example
3 rows & Cols. The first row spans all cols!
<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>
![Page 33: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/33.jpg)
Using Rowspan
• Rowspan allows 1 cell to span more than 1 rows of cells.
This col has rowspan=3
This col spansboth colsrowspan=2
This col has rowspan=3
![Page 34: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/34.jpg)
RowSpan Example
3 rows & Cols. The first colomn spans all rows!
<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>
![Page 35: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/35.jpg)
A Narrow Column
<HTML> <HEAD><TITLE> My First Table </TITLE> <BODY> <TABLE BGCOLOR="#ffff99" BORDER=0> <TR><TD ROWSPAN=99 BGCOLOR="#cc3333"> </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><TR> <TD>To The Aid </TD></TR><TR><TD>Of Their </TD></TR> <TR><TD>Country.</TD></TR></TABLE> </BODY></HTML>
![Page 36: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/36.jpg)
Objectives . . .
• 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
![Page 37: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/37.jpg)
Creating Layouts
• Suppose you want to make a page layout as follows:
This Coloumnhas colspan 5
TitleNavigation
Main Page
rowspan 4
Rowspan 4Colspan 4
Your Logo
![Page 38: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/38.jpg)
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%> <OL> <LI> Nav1</LI> <LI> Nav2 </LI> <LI> Nav3 </LI> </OL> </TD>
<TD colspan=4> Main Body </TD></TR> </TABLE>
1st col15% of screen
Span the title 4 columns
Put NavItems in bullet list
Put MainBody in
Navigation not upper right hand corner
Title and body not centered
![Page 39: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/39.jpg)
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>
Center In cell
Start a new table that is 100% of remaining space.
Align in center of cell
Valign at Top Of cell
![Page 40: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/40.jpg)
Would Output ...
![Page 41: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/41.jpg)
Precisely Placing text
Need to sub-divide this cell to precisely place this text
![Page 42: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/42.jpg)
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> <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 colspan=3><font size=+2> Main Body </font></TD> <tr height=4%><td> <td>Copyright by me 2005 <td></td> </TR> </TABLE> </TR></TABLE> </BODY></HTML>
![Page 43: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/43.jpg)
Review of homework
• Look at homework file at • http://www.rivastudio.cn/?page_id=28
• Also don’t forget to include a link on your home page
![Page 44: Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment](https://reader035.vdocuments.us/reader035/viewer/2022062422/56649ee65503460f94bf5c1b/html5/thumbnails/44.jpg)
Objectives . . .
• 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