DePaul University

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


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


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

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