using html tables.... objectives... how to create tables basic,, tags some arguments with table...
Post on 02-Jan-2016
215 Views
Preview:
TRANSCRIPT
Using HTML tables . . .
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
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
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
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!
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”
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.
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!
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>
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
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!
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
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
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!
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
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.)
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.
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
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
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
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
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.
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
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
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>
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
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
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
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
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
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
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>
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
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>
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>
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
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
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
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
Would Output ...
Precisely Placing text
Need to sub-divide this cell to precisely place this text
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>
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
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
top related