CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)

1
CS101 Introduction to ComputingLectureHTML
Lists and Tables (Web Development Lecture 3)
2
HTML Code
Browser Display

• ltULgt
• ltLIgtSimCitylt/LIgt
• ltLIgtQuakelt/LIgt
• ltLIgtBridgelt/LIgt
• lt/ULgt

• SimCity
• Quake
• Bridge

3
ltULgt Un-ordered List
ltLIgt Line Item
4

• The default bullet for these lists is a disc
• That, however, can be changed to a circle or a
  square with the help of the type attribute

5
HTML Code
Browser Display

• ltUL type circlegt
• ltLIgtSimCitylt/LIgt
• ltLIgtQuakelt/LIgt
• ltLIgtBridgelt/LIgt
• lt/ULgt

• SimCity
• Quake
• Bridge

6
type square
7
Q What happens if I start a new list without
closing the original one?

• ltULgt
• ltLIgtSimCitylt/LIgt
• ltLIgtQuake IIlt/LIgt
• ltULgt
• ltLIgtSimCity 3000lt/LIgt
• ltLIgtQuake IIIlt/LIgt
• lt/ULgt
• ltLIgtBridgelt/LIgt
• lt/ULgt

8
Browser Display

1. Different bullets
2. Additional tab

• SimCity
• Quake II
• SimCity 3000
• Quake III
• Bridge

9
Such structures, i.e., those in which a new one
starts before the first list is finished, are
called Nested Lists
10
Types of Lists

• In addition to un-ordered lists, HTML supports
  two other types
• Ordered Lists
• Definition List

11
Ordered List
Browser Display
OL instead of UL

• ltOLgt
• ltLIgtSimCitylt/LIgt
• ltLIgtQuakelt/LIgt
• ltLIgtBridgelt/LIgt
• lt/OLgt

• SimCity
• Quake
• Bridge

Numbers instead of discs, circles or squares
12
Ordered List
Browser Display

• ltOL type agt
• ltLIgtSimCitylt/LIgt
• ltLIgtQuakelt/LIgt
• ltLIgtBridgelt/LIgt
• lt/OLgt

• SimCity
• Quake
• Bridge

13
Ordered List Types
type Result
A A, B, C,
a a, b, c,
I I, II, III, IV,
i i, ii, iii, iv,
1 1, 2, 3,
14
Q How would one start an ordered list with a
number other than 1
Browser Display

• SimCity
• Quake
• Bridge

15
Ordered List
Browser Display
ltOL start 25gt ltLIgtSimCitylt/LIgt
ltLIgtQuakelt/LIgt ltLIgtBridgelt/LIgt lt/OLgt

• SimCity
• Quake
• Bridge

16
Definition List
Browser Display

• ltDLgt
• ltDTgtSimCitylt/DTgt
• ltDDgtA great simulation game in which one build
  cities lt/DDgt
• ltDTgtQuakelt/DTgt
• ltDDgt One of the best of the shoot-em-up genre
  lt/DDgt
• lt/DLgt

• SimCity
• A great simulation game in which one build
  cities
• Quake
• One of the best of the shoot-em-up genre

Term
Definition
17
ltDLgt Definition List
ltDTgt Term
ltDDgt Definition
18

• Ordered lists as well as definition lists can be
  nested just like the un-ordered lists
• Can any type of list be nested into any other
  type?

19

• Lists are one way of presenting data in a an
  ordered or formal fashion
• Tables provide another - more customizable - way
  of displaying ordered information on Web pages

20
Browser Display
Indoor Outdoor
Squash Cricket
21
HTML Code
Browser Display

• ltTABLE border "1" gt
• ltTRgt
• ltTHgtIndoorlt/THgt
• ltTHgtOutdoorlt/THgt
• lt/TRgt
• ltTRgt
• ltTDgtSquashlt/TDgt
• ltTDgtCricketlt/TDgt
• lt/TRgt
• lt/TABLEgt

Indoor Outdoor
Squash Cricket
22
ltTABLEgt Table (made up of rows)
ltTRgt Row (made up of data cells)
ltTHgt Heading Data Cell (Can contain paragraphs, images, lists, forms, tables)
ltTDgt Data Cell (Can contain paragraphs, images, lists, forms, tables)
23
ltTABLEgt Attributes

• BORDER
• Determines the thickness of the table border
• Example ltTABLE BORDER 2gt
• CELLPADING
• Determines the distance between the border of a
  cell and the contents of the cell
• Example ltTABLE CELLPADDING 3gt
• CELLSPACING
• Determines the empty spacing between the borders
  of two adjacent cells
• Example ltTABLE CELLSPACING 1gt

24
HTML Code
Browser Display

• ltTABLE border "1" gt
• ltTRgt
• ltTHgtIndoorlt/THgt
• ltTHgtOutdoorlt/THgt
• lt/TRgt
• ltTRgt
• ltTDgtSquashlt/TDgt
• ltTDgtCricketlt/TDgt
• lt/TRgt
• lt/TABLEgt

Indoor Outdoor
Squash Cricket
25
HTML Code
Browser Display

• ltTABLEgt
• ltTRgt
• ltTHgtIndoorlt/THgt
• ltTHgtOutdoorlt/THgt
• lt/TRgt
• ltTRgt
• ltTDgtSquashlt/TDgt
• ltTDgtCricketlt/TDgt
• lt/TRgt
• lt/TABLEgt

Indoor Outdoor
Squash Cricket
26
ltTABLEgt,ltTRgt,ltTHgt,ltTDgt Attributes

• ALIGN
• Possible values Center, Left, Right
• Example ltTH ALIGN centergt
• BGCOLOR
• Example ltTD BGCOLOR redgt
• WIDTH
• Example ltTR WIDTH 40gt
• HEIGHT
• Example ltTABLE HEIGHT 200gt

40 of the window width
27
ltTRgt Attributes

• VLAIGN
• Determines the vertical alignment of the contents
  of all of the cells in a particular row
• Possible values Top, Middle, Bottom
• Example ltTR VALIGN bottomgt

28
ltTHgt ltTDgt Attributes

• NOWRAP
• Extend the width of a cell, if necessary, to fit
  the contents of the cell in a single line
• Example ltTD NOWRAPgt
• COLSPAN
• No. of rows the current cell should extend itself
  downward
• Example ltTD COLSPAN 2gt
• ROWSPAN
• The number of columns the current cell should
  extend itself
• Example ltTD ROWSPAN 5gt
• VALIGN
• Same as that for ltTRgt

29
HTML Code
Browser Display

• ltTABLE border1 gt
• ltTRgt
• ltTH colspan2gt Indoor Outdoor
• lt/THgt
• lt/TRgt
• ltTRgt
• ltTDgtSquashlt/TDgt
• ltTDgtCricketlt/TDgt
• lt/TRgt
• lt/TABLEgt

Indoor Outdoor Indoor Outdoor
Squash Cricket
30
Year Quarter Expenses Expenses Income Income
Year Quarter Quetta Dubai Quetta Dubai
2001 1 1,900 8,650 9,000 7,780
2001 2 2,230 8,650 8,500 8,670
2001 3 4,000 8,650 9,900 9,870
2001 4 2,200 8,650 9,800 9,900
2002 1 7,780 8,650 7,780 9,000
2002 2 8,670 8,650 8,670 8,500
2002 3 9,870 8,650 9,870 9,900
2002 4 9,900 8,650 9,900 9,800
31
HTML Code
Browser Display

• ltTABLE border "1" gt
• ltCAPTIONgt
• My favorite sports
• lt/CAPTIONgt
• ltTRgt
• ltTDgtSquashlt/TDgt
• ltTDgtCricketlt/TDgt
• lt/TRgt
• lt/TABLEgt

My favorite sports
Squash Cricket
Caption must be placed immediately after
theltTABLEgt tag
32
End of HTML tag review
33
What have we learned today?

1. We now know how Web pages are built using HTML
2. We also know how to make our personal Web pages
   available to everyone on the Internet

34
Useful URLs

• HTML for the Conceptually Challenged
• http//www.arachnoid.com/lutusp/html_tutor.html
• NCSAs Beginner's Guide to HTML
• http//archive.ncsa.uiuc.edu/General/Internet/WWW/
  HTMLPrimerAll.html

35
Useful URL

• The Table Sampler
• http//www.netscape.com/assist/net_sites/table_sam
  ple.html