LESSON 3: LISTS

AND TABLES
 OBJECTIVES
• Know the different list and table tags.

• Demonstrate how to use the list and

table tag.
Single Tags

<tagName>

Example: <BR>
Single Tags with Attributes

<tagName attributes>

Example: <HR width=“50%”>

 Paired Tags with Attributes

<tagName attributes > … </tagName>

Example: <H1 align=“center”> … </H1>

Unordered List
Tag
is equivalent to the
bullets feature of MS
Office.

Its list items are

marked with special
symbols.
Unordered List Tag
<ul> - Designates the start of an
unordered list.

<li> - Designates an item in the list.

</li> - Closing tag for every list item.

</ul> - Designates the end of an

unordered list.
HTML Code Browser Display

<UL> • SimCity
<LI>SimCity</LI> • Quake
<LI>Quake</LI> • Bridge
<LI>Bridge</LI>
</UL>
<UL> Un-ordered List

<LI> Line Item

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
List Tags and Its Attributes
Attributes Description Value

disc – solid-shaded
Deprecated. Use styles bullets
instead.
circle – circular/hole
type Specifies the style of the
bullets
bullet points of the list
items square – dark square
bullets

EXAMPLE: <ul type=“square”>

HTML Code Browser Display

<UL type = “circle”> • SimCity

<LI>SimCity</LI> • Quake
<LI>Quake</LI> • Bridge
<LI>Bridge</LI>
</UL>
Q: What happens if I start a new
list without closing the original one?
<UL>
<LI>SimCity</LI>
<LI>Quake II</LI>
<UL>
<LI>SimCity 3000</LI>
<LI>Quake III</LI>
</UL>
<LI>Bridge</LI>
</UL>
 Browser Display
1. Different bullets
2. Additional tab • SimCity
• Quake II
• SimCity 3000
• Quake III
• Bridge
Types of Lists
In addition to un-ordered lists,
HTML supports two other
types

• Ordered Lists
• Definition List
Ordered List
is equivalent to the
numbering feature
of MS Office.

Its list items are

marked with
numbers or letters.
List Tags and Its Attributes

<ol> - Designates the start of an

ordered list.

<li> - Designates an item in the list.

</li> - Closing tag for every list item.

</ol> - Designates the end of an

ordered list.
 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, …

<OL type = “a”>

Ordered List Browser Display

<OL> 1. SimCity
<LI>SimCity</LI> 2. Quake
<LI>Quake</LI> 3. Bridge
<LI>Bridge</LI>
</OL> Numbers
instead of discs,
circles or
squares
Ordered List Browser Display

<OL type = “a”> a. SimCity

<LI>SimCity</LI> b. Quake
<LI>Quake</LI> c. Bridge
<LI>Bridge</LI>
</OL>
Q: How would one start an ordered
list with something other than 1
Browser Display

25. SimCity
26. Quake
27. Bridge
Ordered List Browser Display

<OL start = “25”> 25. SimCity

<LI>SimCity</LI> 26. Quake
<LI>Quake</LI> 27. Bridge
<LI>Bridge</LI>
</OL>
Definition List Tag
a definition list is
not a list of single
items.

It is a list of items
with a description
of each item
(term).
Definition List Browser Display
<DL> SimCity Term
<DT>SimCity</DT>
A great simulation
<DD>A great
simulation game in game in which one
which one build build cities
cities </DD> Quake
<DT>Quake</DT> Definition
<DD> One of the One of the best of
best of the shoot- the shoot-em-up
em-up genre genre
</DD>
</DL>
<DL> Definition List

<DT> Term

<DD> Definition
Table Tags
The TABLE element characterizes a grid for
multi-dimensional data arranged in rows and
columns.
Table Tags
 Table
<TABLE>
(made up of rows)
Row
<TR>
(made up of data cells)
Heading Data Cell
<TH> (Can contain paragraphs,
images, lists, forms, tables)
Data Cell
<TD> (Can contain paragraphs,
images, lists, forms, tables)
HTML Code Browser Display

<TABLE border = "1" > Outdoo

<TR> Indoor
r
<TH>Indoor</TH>
<TH>Outdoor</TH>
Squash Cricket
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
 <TABLE> Attributes
• BORDER
– Determines the thickness of the table border
– Example: <TABLE BORDER = “2”>

• CELLPADING
– Determines the distance between the border of a cell and
the contents of the cell
– Example: <TABLE CELLPADDING = “3”>

• CELLSPACING
– Determines the empty spacing between the borders of two
adjacent cells
– Example: <TABLE CELLSPACING = “1”>
HTML Code Browser Display

<TABLE border = "1" > Outdoo

Indoor
<TR> r
<TH>Indoor</TH> Squash Cricket
<TH>Outdoor</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
HTML Code Browser Display

<TABLE> Outdoo
Indoor
<TR> r
<TH>Indoor</TH> Squash Cricket
<TH>Outdoor</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
<TABLE>,<TR>,<TH>,<TD> Attributes
• ALIGN
– Possible values: Center, Left, Right
– Example: <TH ALIGN = “center”>
50% of
• BGCOLOR the
– Example: <TD BGCOLOR = “red”> screen
width
• WIDTH
– Example: <TR WIDTH = “40%”>

• HEIGHT
– Example: <TABLE HEIGHT = “200”>
 <TR> Attributes

• VLAIGN
– Determines the vertical alignment of the
contents of all of the cells in a particular row
– Possible values: Top, Middle, Bottom
– Example: <TR VALIGN = “bottom”>
 <TH> & <TD> Attributes
• NOWRAP
– Extend the width of a cell, if necessary, to fit the contents of
the cell in a single line
– Example: <TD NOWRAP>

• COLSPAN
– No. of rows the current cell should extend itself downward
– Example: <TD COLSPAN = “2”>

• ROWSPAN
– The number of columns the current cell should extend itself
– Example: <TD ROWSPAN = “5”>

• VALIGN
– Same as that for <TR>
HTML Code Browser Display
<TABLE border=“1” >
<TR>
Indoor Outdoor
<TH colspan=“2”> Squash Cricket
Indoor Outdoor
</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Caption Tag
• The caption element is an optional table
component which displays a caption/title for the
table directly above, below or to either side of
the table. The caption element is contained
within the TABLE element, but is used at the
same level as the table row element [TR] is.
HTML Code Browser Display

<TABLE border = "1" > My favorite sports

<CAPTION> Squash Cricket
My favorite sports
</CAPTION>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
HTML Code Browser Display

<TABLE border = "1" > My favorite sports

<CAPTION> Squash Cricket
My favorite sports
</CAPTION> Must be placed
<TR>
immediately after
<TD>Squash</TD>
the<TABLE> tag
<TD>Cricket</TD>
</TR>
</TABLE>
Empty Cells in a Table
• Table cells with no content are not
displayed very well in most browsers.
Note: Borders around the empty table cell are
missing (NB! Mozilla Firefox displays the
border). To avoid this, add a non-breaking space
(&nbsp;) to empty data cells, to make the
borders visible:
HTML CODE BROWSER
DISPLAY
HTML CODE BROWSER
DISPLAY
 Table Attributes
• ToDisplay
include other symbols
Code inside the table, Description
refer to this
! ! Exclamation Point
table.
“ &quot; Double Quote
# # Number Sign
& &amp Ampersand
, , Comma
* * Asterisk
- - Hyphen
/ / Forward Slash
: : Colon
; ; Semi-Colon
\ \ Back Slash
^ ^ Caret
&nbps Non-Breaking Space
| &brvbar; Broken Vertical Bar
TRY THIS
HTML CODE