Chapter # 3

Lists, Images and Tables

Dr. Shaukat Ali

Department of Computer Science
University of Peshawar
Lists Tags
• HTML can display different items in the form of lists.
• Lists are used to present in more readable form.
• Different types of lists that are supported by HTML are:
Ordered Lists.
Unordered Lists.
Definition Lists.

2
Ordered Lists
• An ordered list is a list of items in which each item is marked with
a number in the ascending order.
• Ordered lists are also known as numbered list.
• <OL> tag is used to create an ordered list. </OL> should be at the
end of the list.
• <LI> tag is used with each of the items in the list. </LI> tag at the
end of an item is optional.
• Attributes are:
TYPE: Specifies the number scheme for the list. The default
number scheme is 1, 2, 3, 4, …. Possible schemes/values are:
 1 for 1, 2, 3, 4, …..
 A for A, B, C, ……
 a for a, b, c, ……..
 I for I, II, III, ……
 I for I, ii, iii, …….
Start: Specifies the starting number of the list.
Value: Changes the numbering sequence in the middle of the
list. It is used in <LI> tag.
3
Example Ordered Lists

4
Unordered Lists Tags
• An unordered list is a list in which each item is marked
with a symbol.
• Unordered list is also known as unnumbered list.
• <UL> tag is used to create an unordered list. </UL>
should be at the end of the list.
• <LI> tag is used with each of the items in the unordered
list. </LI> tag at the end of an item is optional.
• Attribute is:
TYPE:
Specifies the type of the symbol to appear with
each item of the list. Possible values are
FILLROUND, SQUARE, CIRCLE. The default
value is FILLROUND.

5
Example Unordered Lists

6
Definition Lists
• Definition list is a list of terms. It consists of terms and
description of the terms.
• <DL> tag is used to create a definition list and </DL> is
used at the end of the list.
• <DT> tag is used with each term in the definition and
</DT> is used at the end of the term.
• <DD> tag is used with each of the description of the
term and </DD> is used at the end of each description.
• Example:
<DL>
<DT> Data.</DT>
<DD>Raw facts about an entity.</DD>
</DL>
7
Example Definition Lists

8
Nested Lists
• Defining a list inside of another list is called nested lists.
• Lists can be nested in any fashion. Like:
 Ordered List inside of Unordered list.
 Unordered list inside of Ordered list.
 Definition list inside of Ordered list.
 Definition list inside of Unordered list.
 Ordered list inside of Definition list.
 Unordered list inside of Definition list.
 Ordered list inside of Ordered list.
 Unordered list inside of Unordered list.
 Definition list inside of Definition list.
9
Example Nested Lists

10
Another Nested Lists Example

11
Images in HTML
• A web page may contain different types of graphics and graphics
makes websites more attractive and interesting.
• HTML can be used to add both static and animated graphics in
websites.
• The images put into a web page are called inline images.
• The popular types of images used in web pages are .GIF, .JPG,
.PNG, .BMP.
• <IMG> tag is used to insert images in web pages.
• <IMG> tag has no ending tag.
• Attributes are:
SRC: Specifies the name and path of image to be displayed.
Only name of the image is specified if the image is stored in
the same directory in which web page is stored, otherwise,
complete path of the image is specified.
12
Images in HTML
ALIGN: Specifies the alignment of the image with respect to
screen. Possible alignment values are left, right, center.
BORDER: Specifies the size of border around the image in
pixels. The possible values are 1, 2, 3, so on. The default value
is 0.
WIDTH : Specifies the width of the image in pixels or in
percentage of the area covered by the browser..
HEIGHT : Specifies the height of the image in pixels or in
percentage of the area covered by the browser.
ALT : Specifies the text to be displayed in tool-tip or if the
browser cannot display the image.
• Example :
<IMG SRC = “Pic.jpg” ALIGN = “Right” BORDER = “2”>

13
Images in HTML Example

14
Images in HTML Example

15
TABLES in HTML
• A table is a two dimensional matrix, consisting of rows
and columns.
• Tables are intended for displaying data in rows and
columns in a web page.
• All table related tags are included between <TABLE>--
</TABLE>.
• <TR>---</TR> tag is used to define row in a table.
• <TD>--</TD> tag is used to define column in a row.
• </TH>---</TH> tag is used to define header row (column
headers) in a table. Contents is automatically center and
appears in boldface.
• <CAPTION>--</CAPTION> element contents (text) is
inserted directly above the table in the browser window.

16
<TABLE> tag
• <TABLE>--</TABLE> tag shows the beginning and ending of a table.
• Attributes of <TABLE> element are:
 ALIGN : Specifies the horizontal alignment of the table in the browser
window. Possible values are: Left, Right and Center.
 VALIGN : Specifies the vertical alignment of cell contents. Possible values
are: Top, Bottom and Middle.
 WIDTH : Specifies the width of the table. It can be given as number of
pixels or as percentage relative to the browser window.
 BORDER: Specifies the border thickness of the table. Its value can be any
number of pixels.
 CELLPADDING : Specifies the distance between the data in a cell and the
boundaries of the cell in pixels.
 CELLSPACING : Specifies the spacing between adjacent cells in pixels.
 COLSPAN : Specifies the number of columns for a cell. It is used inside
<TH> or <TD> tags. A Cell may be consists of many columns.
 ROWSPAN : Specifies the number of rows for a cell. It is used inside
<TD> tag. A cell may consists of many rows.
<TABLE ALIGN =“Left” BORDER=“1” CELLPADDING = “5”
VALIGN = “Top” CELLSPACING = “2” WIDTH = “90%” >

17
<CAPTION> Tag
• <CAPTION>--</CAPTION> tag gives information
about the contents of the table.
• <CAPTION>--</CAPTION> appears within the
<TABLE>--</TABLE> tag.
• The caption can be placed either above or below the
table depending on its ALIGN attribute value.
ALIGN : It controls placing of the caption with
respect to the table. The possible values can be
Bottom, Top.

18
<TR> Tag
• <TR>--</TR> tag is used to create row in the table.
• <TR>--</TR> contains <TD>---</TD> to define the
columns in the row.
• Attributes are:
ALIGN: Specifies the horizontal alignment of the
row. Possible values are Left, Right and Center.
BGCOLOR : Specifies the background color of the
row. Its value can be color name or hexadecimal
value.
VALIGN : Specifies the vertical alignment of the
contents of the row. The possible values are Top,
Middle, or Bottom.
<TR ALIGN= “Right” BGCOLOR= “Red” VALIGN = “Top> --
</TR>
19
First Table Example

20
CELLPADDING Attribute Example

21
CELLPADDING Attribute Example

22
CELLSPACING Attribute Example

23
CELLSPACING Attribute Example

24
BGCOLOR Attribute Example

25
COLSPAN and ROWSPAN attributes

26
COLSPAN and ROWSPAN attributes

27
Image in Table

28
Image in Table

29
End of Chapter # 3.