by Asst. Lect.

Zahraa
Ayad

Internet Programming

Lecture 5




HTML & CSS Lists, Tables and
Containers

14 November 2023 1
 by Asst. Lect. Zahraa
Ayad

Outlines
 HTML Lists
 Ordered List
 Unordered List
 Definition List

 Styling Lists

 HTML Tables

 Styling Tables

 HTML Containers (Boxes)

 Styling Containers

14 November 2023 2
 by Asst. Lect. Zahraa
Ayad

HTML Lists
 There are three Types of HTML Lists:

1. Ordered lists are lists where each item in the list is numbered. For example, the
list might be a set of steps for a recipe that must be performed in order.

2. Unordered lists are lists that begin with a bullet point (rather than characters that
indicate order).

3. Def inition lists are made up of a set of terms along with the def initions for each of
those terms.

14 November 2023 3
 by Asst. Lect. Zahraa
Ayad

Ordered Lists
 The <ol> Element

 The ordered list is created with the <ol> element.

 The <li> Element

 Each item in the list is placed between an opening <li> tag and a closing </li> tag.

 The li stands for list item.

14 November 2023 4
 by Asst. Lect. Zahraa
Ayad

Ordered Lists (Cont.)

 Example:

14 November 2023 5
 by Asst. Lect. Zahraa
Ayad

Unordered Lists
 The <ul> Element

 The unordered list is created with the <ul> element.

 The <li> Element

 Each item in the list is placed between an opening <li> tag and a closing </li> tag.

 The li stands for list item.

 A common application of unordered lists is creating the navigation bar for

websites.

14 November 2023 6
 by Asst. Lect. Zahraa
Ayad

Unordered Lists (Cont.)

 Example:

14 November 2023 7
 by Asst. Lect. Zahraa
Ayad

Def inition Lists

 The <dl> Element
 The definition list is created with the <dl> element and usually consists of a series
of terms and their definitions.
 Inside the <dl> element you will usually see pairs of <dt> and <dd> elements.
 The <dt> Element
 This is used to contain the term being defined (the definition term).
 The <dd> Element
This is used to contain the definition (the definition description).
 Sometimes you might see a list where there are two terms used for the same
definition or two different definitions for the same term.

14 November 2023 8
 by Asst. Lect. Zahraa
Ayad

Def inition Lists (Cont.)

 Example:

14 November 2023 9
 by Asst. Lect. Zahraa
Ayad

Styling Lists
 We can change the style of ordered and unordered lists by using the following CSS
properties:

1. list-style-type

Possible values: decimal, decimal-leading-zero, lower-alpha, upper-

alpha, lower-roman, upper-roman.
 For ordered lists:

Possible values: none, disc, circle, square.

 For unordered lists:

Syntax: list-style-image: url(“path to image");

2. List-style-image

14 November 2023 10
 by Asst. Lect. Zahraa
Ayad

Styling Lists (Cont.)

 Example:

14 November 2023 11
 by Asst. Lect. Zahraa
Ayad

HTML Tables
 The <table> Element
The <table> element is used to create a table. The contents of the table are written out
row by row.

 The <tr> Element

 You indicate the start of each row using the opening <tr> tag. (The tr stands for table row.)
 It is followed by one or more <td> elements (one for each cell in that row).
 At the end of the row you use a closing </tr> tag.
 The <td> Element
 Each cell of a table is represented using a <td> element. (The td stands for table data.)
 At the end of each cell you use a closing </td> tag.

14 November 2023 12
 by Asst. Lect. Zahraa
Ayad

HTML Tables (Cont.)

 The <th> Element
 The <th> element is used just like the <td> element but its purpose is to represent
the heading for either a column or a row. (The th stands for table heading)

 The colspan and rowspan Attributes

 Sometimes you may need the entries in a table to stretch across more than one
column or more than one row.
 The colspan and rowspan attributes can be used on a <th> or <td> element and
indicates how many columns or rows that cell should run across.

 Example: <td colspan=“2”> indicates that the cell should run across two columns.
 Example: <td rowspan=“3”> indicates that the cell should run across three rows.

14 November 2023 13
 by Asst. Lect. Zahraa
Ayad

HTML Tables (Cont.)

 Example 1:

14 November 2023 14
 by Asst. Lect. Zahraa
Ayad

HTML Tables (Cont.)

 Example 2:

14 November 2023 15
 by Asst. Lect. Zahraa
Ayad

Styling Tables
 We can add styling to tables by using the following CSS properties :

1. width: Possible values: 100px, 300px ,….

2. padding: Possible values: 5px,… (to affect all paddings)

Possible values: 5px 20px 5px 20px (to specify a different value for each
one (Syntax padding: top right bottom left;)

3. Background-color: Possible values: red, green,… (any color you want)

14 November 2023 16
 by Asst. Lect. Zahraa
Ayad

Styling Tables (Cont.)

 Table border properties:

1. border: Possible values: none, 1px solid black, 5px dotted red, 10px dashed green
(Syntax border: thickness style color;)

2. border-spacing: Possible values: 2px, 3px, ….

3. border-collapse: Possible values: collapse,

separate

14 November 2023 17
 by Asst. Lect. Zahraa
Ayad

Styling Tables (Cont.)

 Example:

14 November 2023 18
 by Asst. Lect. Zahraa
Ayad

Styling Tables (Cont.)

 Example 2:

14 November 2023 19
 by Asst. Lect. Zahraa
Ayad

HTML Containers (Boxes)

 By default, each HTML element is enclosed with a box.

 We can group multiple HTML elements using containers (or boxes).

 The mostly used container is the <div> container.

 The <div> element is used to group HTML elements for styling purposes.

14 November 2023 20
 by Asst. Lect. Zahraa
Ayad

HTML Containers (Cont.)

 Example:

14 November 2023 21
 by Asst. Lect. Zahraa
Ayad

HTML Containers (Cont.)

 The output

14 November 2023 22
 by Asst. Lect. Zahraa
Ayad

Styling <div> Element

1. We can control the dimensions of the container using width and height CSS
properties.

14 November 2023 23
 by Asst. Lect. Zahraa
Ayad

Styling <div> Element (Cont.)

 The output:

14 November 2023 24
 by Asst. Lect. Zahraa
Ayad

Styling <div> Element (Cont.)

2. overflow property: The overflow property tells the browser what to do if the content contained
within a box is larger than the box itself. It can have one of two values:

Possible values: hidden, scroll,

auto

3. We can apply other styling properties to <div> container like border, margin, padding , etc.

14 November 2023 25
 by Asst. Lect. Zahraa
Ayad

Styling <div> Element (Cont.)

 Example:

14 November 2023 26
 by Asst. Lect. Zahraa
Ayad

End of Lecture 5

14 November 2023 27