DePaul University

1
DePaul University

• SNL 262
• Web Page Design
• Tables! - Chapt 15
• Instructor David A. Lash

2
What we talked about 2 weeks ago ...

• Creating Lists
• Ordered Lists (ltolgt lt/olgt ltligt .. lt/ligt)
• Unordered Lists (ltulgt lt/ulgt ltligt .. lt/ligt)
• Definition lists (ltdlgt lt/dlgt, ltdtgt .. lt/dtgt,
  ltddgt lt/ddgt)
• Lists within lists (remember to match up start
  and end of lists).
• Creating HTML links
• Creating absolute links
• ltA hrefhttp//www.depaul.edu/dlash/myfile.htm
  lgt my home page lt/Agt
• Creating relative links
• ltA hrefmyfaq.htmlgt my FAQ Page lt/Agt
• Creating email links
• ltA hrefmailtodlash_at_condor.depaul.edu"gt Mail
  me please lt/Agt

3
What we talked about last week

• ltBODY BGCOLOR"TEAL" LINK"BLUE" VLINKS"RED"
  ALINK"Pink"gt
• Named colors and specify Hexadecimal number
• Browser Safe Colors,
• ltbody background"tile.gif"gt
• ltUgt, ltIgt, ltBgt
• ltfontgt
• ltfont sizexxgt
• ltfont colorxxgt
• ltfont stylexxgt
• ltfont stylexx coloryy sizezzgt
• Special character (e.g., , , _at_, lt, gt,) need
  special numerical characters
• 162 to get the sign.
• ltMETAgt to get ltMETAgt
• NBSP NBSP to get 2 blank spaces.

4
What we will talk about this week

• How to create tables
• Basic lttablegt, lttrgt, lttdgt 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

5
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

• See example at http//www.depaul.edu/dlash/extr
  a/Webpage/examples/examletable.html

• Table with integrated graphics
• http//www.24hourhtmlcafe.com/hour14/fearful2.htm

• Example of table as a page layout device
• http//arnb.com/webdesign/chap5/tables/advert.htm

6
HTML Tables

• An orderly arrangement of text and/or graphics
  into vertical columns and horizontal rows.

Each these are called a cell
7
The Basic Table Structure

• The bare minimum tags needed to describe a table
  are
• ltTABLEgt lt/TABLEgt,
• ltTRgt lt/TRgt,
• ltTDgt lt/TDgt

Encloses TABLE Defn
Start End Table row
Start End Table Colmn
8
The Basic Table Structure

ltHTMLgt ltHEADgtltTITLEgt Simple Table lt/TITLEgt
lt/HEADgt ltBODYgt ltTABLEgt ltTRgt
ltTDgt Cell 1lt/TDgtltTDgtCell
2lt/TDgt lt/TRgtltTRgt
ltTDgt Cell 3lt/TDgtltTDgtCell 4lt/TDgt
lt/TRgt lt/TABLEgt lt/BODYgt lt/HTMLgt

Table Row
Start End Table
Table Column
Creates the example 4 cell table Click
Here http//condor.depaul.edu/dlash/website/basic
.html
9
Guess The Table Format - 1?
What would the following display?
ltTABLEgt ltTRgt ltTDgt
Cell 1lt/TDgtltTDgtCell 2lt/TDgt lt/TRgtltTRgt
ltTDgt Cell 1lt/TDgtltTDgtCell
2lt/TDgtltTDgtCell 3lt/TDgt lt/TRgt
lt/TABLEgt
Click Here for answer http//www.depaul.edu/dlash
/website/guess1table.html
10
Guess The Table Format - 2?
What would the following display?
ltTABLEgt ltTRgt
ltTDgtCell1lt/TDgt
ltTDgtCell2lt/TDgt ltTDgtlt/TDgt
lt/TRgtltTRgt ltTDgt Cell lt/TDgt
lt/TRgtltTRgt ltTDgt Cell
1lt/TDgt ltTDgtCell 2lt/TDgt
ltTDgtCell 3lt/TDgt lt/TRgt
lt/TABLEgt
Click Here for answer http//www.depaul.edu/dlash
/website/guess2table.html
11
Guess The Table Format - 3?
What would the following display?
ltTABLEgt ltTRgt
ltTDgtCell1lt/TDgt
ltTDgtCell2lt/TDgt ltTDgtlt/TDgt
ltTDgtlt/TDgt ltTDgtCell ?
lt/TDgt lt/TRgtltTRgt
ltTDgt Cell 1lt/TDgt ltTDgtCell 2lt/TDgt
ltTDgtCell 3lt/TDgt
lt/TRgt lt/TABLEgt
Row 1 w/ 5 cols Col 3-4 empty Col 5
Row 2 Cols 1-3 only have data
Click Here for answer http//www.depaul.edu/dlash
/extra/Webpage/examples/guess3table.html
12
Introducing the ltTHgt
Another basic but option TAG is the ltTHgt
similar to ltTDgt ltTABLEgt ltTRgt
ltTHgt Col 1 lt/THgt ltTHgt Col 2 lt/THgt
lt/TRgtltTRgt ltTDgt Cell
1lt/TDgtltTDgtCell 2lt/TDgt lt/TRgtltTRgt
ltTDgt Cell 1lt/TDgtltTDgtCell 2lt/TDgt
lt/TRgt lt/TABLEgt
Automatic Bold center
Click Here for example http//www.depaul.edu/dlas
h/website/simpletablewTH.html
13
Another Example

• ltHTMLgt
• ltHEADgtltTITLEgt My First Table lt/TITLEgt lt/HEADgt
• ltBODYgt ltTABLEgt
• ltTRgt ltTHgt Description ltTHgt SizeltTHgt Weightlt/TRgt
• ltTRgtltTDgtGunltTDgt5 Inch Barrel ltTDgt 20 Ounceslt/TRgt
• ltTRgtltTDgtT-RexltTDgt40 Feet High ltTDgt Multiple
  Tonslt/TRgt
• ltTRgtltTDgtHurricane FloydltTDgt400 Miles Radius ltTDgt
  ????
• lt/TRgt
• lt/TABLEgt
• lt/BODYgtlt/HTMLgt
• (Sometime can get by w/o closing tags lt/TDgt,
  lt/THgt, lt/TRgt but this is risky business (e.g.,
  I.E., VS Navigator.)

Click Here for example http//www.depaul.edu/dlas
h/website/TableEx.html
14
Tables Are Their Own Environment
ltHTMLgt ltHEADgtltTITLEgt My First Table lt/TITLEgt
ltBODYgt ltBgt ltTABLEgt ltTRgt ltTHgt
Description lt/THgt ltTHgt Sizelt/THgtltTHgt Weight lt/THgt
lt/TRgt ltTRgt ltTDgtGunlt/TDgtltTDgt5 Inch
Barrellt/TDgt ltTDgt 20 Ounceslt/TDgt lt/TRgt
ltTRgt ltTDgtT-Rexlt/TDgtltTDgt40 Feet High lt/TDgt
ltTDgt Multiple Tonslt/TDgt lt/TRgt ltTRgt
ltTDgtHurricane Floydlt/TDgtltTDgt400 Miles Radiuslt/TDgt
ltTDgt ????lt/TDgt lt/TRgt lt/TABLEgt lt/Bgt
lt/BODYgtlt/HTMLgt
Youd think each element in the table would be
bold
Instead that bold is ignored w/I table
15
Table Cells Format Like Documents...
lthtmlgtltheadgt lttitlegt Test lt/titlegt
lt/headgt ltbodygt lttable border1gt lttrgt
lttdgtCell1 ltfont colorbluegt
ltolgt ltligt Happy ltligt Days lt/olgtlt/tdgt lttdgt
Are here again. lt/tdgtlt/trgt lttrgtlttdgt The
ltigtskieslt/igt are are ltbgtbluelt/bgt again lt/tdgt
lttdgt ltimg src"../donald.gif"gt lt/tdgt
lt/trgt lt/tablegt lt/bodygt lt/htmlgt
Create a ol within this cell
Format some text.
16
What we will talk about this week

• How to create tables
• Basic lttablegt, lttrgt, lttdgt 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

17
Options Table, Row and Column Width

• Some other attributes for the table tag
• widthnumber, percentage - specifies the width
  (in pixels) of entire window or of size of
  current element. (Can be set at table, row or
  cell level.)
• heightnumber, percentage - specifies the height
  (in pixels) of entire window or of size of
  current window. (Can be set at table, row or cell
  level.)

18
Specifying Column Size

• ltHTMLgt ltHEADgtltTITLEgt My First Table lt/TITLEgt
• ltBODYgt
• ltTABLE WIDTH500 HEIGHT400gt
• ltTRgt
• ltTH WIDTH10gt Description lt/THgt ltTH
  WIDTH40gt Size lt/THgt ltTH WIDTH40gt Weight lt/THgt
  
• lt/TRgt ltTRgt
• ltTD WIDTH10gtGunlt/TDgt ltTDgt5 Inch Barrel
  lt/TDgt ltTDgt 20 Ounces lt/TDgt
• lt/TRgt ltTRgt
• ltTD WIDTH10gtT-REXlt/TDgtltTDgt40 Feet
  Highlt/TDgt ltTDgt Multiple Tonslt/TDgt
• lt/TRgt ltTRgt
• ltTD WIDTH10gtHurricane Floydlt/TDgt ltTDgt400
  Miles Radius lt/TDgtltTDgt ???? lt/TDgt
• lt/TRgt
• lt/TABLEgt
• lt/BODYgtlt/HTMLgt
• Click Here
• http//www.depaul.edu/dlash/website/TableEx3.html
  

Set overall table size
Sets individual element
19
Options Borders

• Some other attributes for the table tag
• border - 0 or no border is the default see
  below for more details.

20
Implementing Borders

• ltHTMLgt ltHEADgtltTITLEgt My First Table
  lt/TITLEgtlt/HEADgt
• ltBODYgt
• ltTABLE BORDER3 WIDTH500 HEIGHT400gt
• ltTRgt
• ltTH WIDTH10gt Description lt/THgt
• ltTH WIDTH40gtSizelt/THgt
• ltTH WIDTH40gt Weightlt/THgt
• lt/TRgtltTRgt
• ltTD WIDTH10gtGunltTDgt5 Inch Barrel lt/TDgt
• ltTDgt 20 Ounces lt/TDgt
• lt/TRgtltTRgt
• ltTD WIDTH10gtT-REXlt/TDgt
• ltTDgt40 Feet Highlt/TDgt
• ltTDgt Multiple Tons lt/TDgt
• lt/TRgtltTRgt
• ltTD WIDTH10gtHurricane Floyd lt/TDgt ltTDgt400
  Miles
• Radiuslt/TDgtltTDgt????lt/TDgt
• lt/TRgt lt/TABLEgt lt/BODYgtlt/HTMLgt

21
Options Background Color

• bgcolor"rrggbb" or color name - sets a color
  for background for table or table cell.

22
Tables and BGCOLOR

• Can use BGCOLOR attribute in the TABLE,TR or
  TD tag.
• ltHTMLgt ltHEADgtltTITLEgt Color MyTable
  lt/TITLEgt
• ltBODYgt
• ltBgt
• ltcentergt ltFONT SIZE"3"gtThe Local News
  lt/FONTgtlt/centergt
• ltTABLE BORDER1 BGCOLOR"RED"gt
• ltTRgt
• ltTDgtTEXTlt/TDgtltTDgtTEXTlt/TDgtltTDgtTEXTlt/TDgt
• lt/TRgtltTR BGCOLOR"GREEN"gt
• ltTDgtTEXTlt/TDgtltTDgtTEXTlt/TDgt
• ltTD BGCOLOR"YELLOW"gtTEXTlt/TDgt
• lt/TRgt ltTRgt
• ltTDgtTEXTlt/TDgtltTDgtTEXTlt/TDgtltTDgtTEXTlt/TDgt
• lt/TRgt
• lt/TABLEgt lt/BODYgtlt/HTMLgt

23
What we will talk about this week

• How to create tables
• Basic lttablegt, lttrgt, lttdgt 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

24
Some Special Table Tricks

• Cell text alignment
• Padding the columns and Rows
• Spanning Columns and Rows
• Special Examples

25
Options Alignment

• Some other attributes for the table tag
• alignleftrightcenter sets the horizontal
  alignment for a table, row, or cell. Can be used
  with ltTABLEgt ltTRgt, ltTDgt or ltTHgt tags.
• valigntopbottommiddle set the vertical
  alignment of the table, row or cell. Can be used
  with ltTABLEgt, ltTRgt, ltTDgt or ltTHgt tags.

26
Options Alignment

• ltHTMLgt ltHEADgtltTITLEgt My First Table lt/TITLEgt
• ltBODYgt
• ltTABLE BORDER2 WIDTH500 HIEGHT500gt
• ltTRgt
• ltTHgt Name lt/THgt ltTHgt Ranklt/THgt ltTHgt Serial
  Numberlt/THgt
• lt/TRgtltTRgt
• ltTD ALIGNRIGHTgtGeorge Washingtonlt/TDgt
• ltTDgtGeneral lt/TDgt
• ltTDgt 1lt/TDgt
• lt/TRgt ltTRgt
• ltTD ALIGNCENTERgtGeorge Bushlt/TDgt
• ltTDgtPresident lt/TDgt
• ltTD ALIGNRIGHTgt 42lt/TDgt
• lt/TRgt ltTR ALIGNRIGHTgt
• ltTD ALIGNLEFTgtGeorge Ryan lt/TDgt
• ltTDgt??? lt/TDgt
• ltTDgt ????? lt/TDgt
• lt/TRgt
• lt/TABLEgtlt/BODYgtlt/HTMLgt

27
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 betw cells
Text
Text
Padding Number of pixels from cell border to
text
28
Cell Padding And Spacing

• Cell padding specifies the number of pixels from
  the cell border to the text. Useful for simple
  announcement boxes.
• ltHTMLgt ltHEADgtltTITLEgt Color MyTable lt/TITLEgt
• ltBODYgt
• ltBgt
• ltcentergt
• ltFONT SIZE"3"gtThe Local News lt/FONTgtlt/centergt
• ltDIV ALIGNCENTERgt
• ltTABLE BORDER2 CELLSPACING0 CELLPADDING52gt
• ltTRgt
• ltTD ALIGNCENTER BGCOLOR"RED" VALIGNmiddlegtltBgtAn
  nouncing Earlier Class Dismissal Today!lt/Bgt
• lt/TDgtlt/TRgt
• lt/TABLEgt
• lt/DIVgt
• lt/BODYgtlt/HTMLgt

1 Row 1 Col (A Box!)
Start text 52 pixels from border
(next slide http//www.depaul.edu/dlash/website/A
nnounce.html
29
Would look like ...
30
Cell Padding And Spacing

• Cell spacing specifies number of pixels between
  cells of the table.
• ltHTMLgt ltHEADgtltTITLEgt Color MyTable lt/TITLEgt
• ltBODYgt
• ltBgt
• ltcentergt
• ltFONT SIZE"3"gtThe Local News lt/FONTgtlt/centergt
• ltDIV ALIGNCENTERgt
• ltTABLE BORDER2 CELLSPACING50 CELLPADDING1gt
• ltTRgtltTDgtDATA1lt/TDgtltTDgtDATA2lt/TDgtlt/TRgt
• ltTRgtltTDgtDATA3lt/TDgtltTDgtDATA4lt/TDgtlt/TRgt
• lt/TABLEgt
• lt/DIVgt
• lt/BODYgtlt/HTMLgt
• (next slide http//www.depaul.edu/dlash/website/C
  ellspacing.html)

50 pixels between table cells
31
Would Look Like ...
32
Options colspan and rowspan

• colspan - Allows a cell to span columns
• rowspan - Allows a cell to span rows
• Useful for performing a page layout

33
Column Row Spacing

• Colspan allows 1 cell to span more than 1
  Columns of cells.

This row has colspan2
This row has colspan3
This row has colspan2
34
Col Span Example

• Example Colspan
• ltHTMLgt ltHEADgtltTITLEgt Color MyTable lt/TITLEgt
• ltBODYltFONT SIZE"3"gtThe Local News lt/FONTgt
• ltTABLE BORDER1 BGCOLOR"RED"gt
• ltTRgt
• ltTD COLSPAN3 BGCOLOR"blue"gtTEXTlt/TDgt
• ltTRgt
• ltTDgtTEXTlt/TDgtltTD BGCOLOR"BLUE"gtTEXTlt/TDgtltTD
  BGCOLOR"YELLOW"gtTEXTlt/TDgt
• lt/TRgtltTRgt
• ltTDgtTEXTlt/TDgtltTD BGCOLOR"BLUE"gtTEXTlt/TDgtltT
  D
• BGCOLOR"ORANGE"gtTEXTlt/TDgt
• lt/TRgt lt/TABLEgtlt/BODYgtlt/HTMLgt
• http//www.depaul.edu/dlash/website/Colspan_examp
  le.html

3 rows Cols. The first row spans all cols!
35
Col Row Spacing

• Rowspan allows 1 cell to span more than 1 rows of
  cells.

This col has rowspan3
This col spans both cols rowspan2
This col has rowspan3
36
RowSpan Example

• Just like Col Span but with rows!
• ltHTMLgt ltHEADgtltTITLEgt Color MyTable lt/TITLEgt
• ltBODYgt
• ltcentergt
• ltFONT SIZE"3"gtThe Local News lt/FONTgtlt/centergt
• ltTABLE BORDER1 BGCOLOR"RED"gt
• ltTRgt
• ltTD ROWSPAN3 BGCOLOR"blue"gtTEXTlt/TDgtltTD
  BGCOLOR"YELLOW"gtTEXTlt/TDgtltTD BGCOLOR"ORANGE"gtTEX
  Tlt/TDgt
• lt/TRgtltTR gt
• ltTDgtTEXTlt/TDgtltTD BGCOLOR"BLUE"gtTEXTlt/TDgt
• lt/TRgtltTRgt
• ltTD BGCOLOR"BLUE"gtTEXTlt/TDgtltTD
  BGCOLOR"ORANGE"gtTEXTlt/TDgt
• lt/TRgtlt/TABLEgtlt/BODYgtlt/HTMLgt
• http//www.depaul.edu/dlash/website/Rowspan.html

3 rows Cols. The first col spans all rows!
37
Creating Layouts

• Suppose you want to make a page layout as
  follows

Your Logo
Title
This Col has colspan 5
N a v i g a t i o n
Main Page
Rowspan 4 Colspan 4
rowspan 4
38
Wouldnt this solve the problem?

• ltHTMLgt
• ltHEADgt ltTITLEgt Sample Table lt/TITLEgt lt/HEADgt
• ltBODYgt
• ltTABLE BORDER1 height100 width100gt
• ltTRgt
• ltTD width15gt ltimg srcdonald.gif gt lt/TDgt
• ltTD colspan4gt Title lt/TDgt
• lt/TRgt ltTRgt
• ltTD width15gt ltULgt ltLIgt Nav1lt/LIgt ltLIgt Nav2
  lt/LIgt ltLIgt Nav3 lt/LIgt lt/OLgt lt/TDgt
• ltTD colspan4gt Main Body lt/TDgt
• lt/TRgt
• lt/TABLEgt

1st col 15 of screen
Span title
Put Nav Items In BL
Put Main Body in

• See how this would display
• http//www.depaul.edu/dlash/website/layout1.html

39
Would Output ...
Title and body not centered
Navigation not upper right hand corner
40
Lets Refine It ...

• ltHTMLgt
• ltHEADgt ltTITLEgt Sample Table lt/TITLEgt lt/HEADgt
• ltBODYgt
• ltTABLE BORDER1 height100 width100gt
• ltTRgt
• ltTD aligncenter width15gt ltimg
  srcdonald.gif gt lt/TDgt
• ltTD colspan4 aligncentergt Title lt/TDgt
• lt/TRgt ltTRgt
• ltTD width15 valigntopgt ltOLgt ltLIgt Nav1lt/LIgt
  ltLIgt Nav2 lt/LIgt ltLIgt Nav3 lt/LIgt lt/OLgt lt/TDgt
• ltTD colspan4gt
• ltTABLE WIDTH100 BORDER0
  CELLSPACING0
• CELLPADDING0gt
• ltTRgt
• ltTD aligncenter valignmiddlegtltfont
  size2gt
• Main Body lt/fontgtlt/TDgt
• lt/TRgt
• lt/TABLEgt
• lt/TRgt
• lt/TABLEgt lt/BODYgtlt/HTMLgt

Center In cell
Start New table
Valign at Top Of cell
Align in Center of cell

• Next slide
• http//www.depaul.edu/dlash/website/layout2.html

41
Would Output ...
42
Some Special Table Uses

• Goto This Web Page - Click Here

43
What we talked about

• How to create tables
• Basic lttablegt, lttrgt, lttdgt 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

44
Review of homework

• Look at homework file at
• http//condor.depaul.edu/dlash/website/Lab4.html
• Also dont forget to include a link to your lab
  on your home page