Using HTML tables.... Objectives... How to create tables Basic,, tags Some arguments with table...

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


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


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 &center


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



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.



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.


know this!

Objectives . . .





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 . . .





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 . . .





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



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 . . .





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 . . .





Date post:	02-Jan-2016
Category:	Documents
Upload:	aleesha-mercy-hodges
View:	216 times
Download:	0 times