1/5/2019

Eastern Mediterranean University

School of Computing and Technology
Department of Information Technology

ITEC229
Client-Side Internet and Web Programming

LISTs & TABLEs

CHAPTER 4

Prepared by: R. Kansoy

LOGO
1

Contents

4.1 Lists
4.1.1 Ordered Lists
4.1.2 Unordered Lists
4.1.3 Definition Lists
4.1.4 Nested Lists
4.2 Tables

2
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

1
 1/5/2019

4.1 LISTs

 HTML supports 3 types of lists:

 Ordered Lists
 Unordered Lists
 Definition Lists
 Nested Lists

 Lists may be nested to obtain multiple hierarchy

levels

3
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

4.1 LISTs

4.1.1 Ordered List - <ol>

 Lists whose elements must appear in a certain order

 Such lists usually have their items prefixed with a number or

letter

 An ordered list starts with the <ol> tag and finishes with
</ol> tag.

 Each list item writtin within the <li>... </li> tags.

 By default, ordered lists use decimal sequence numbers (1, 2,

3, …)
<ol>
<li>Apples</li> 1. Apples
<li>Bananas</li> 2. Bananas
<li>Coconuts</li> 3. Coconuts
</ol>
4
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

2
 1/5/2019

4.1 LISTs

4.1.1 Ordered List - <ol>

 To change sequence type, use TYPE attribute in <OL>
opening tag;

 TYPE = “1” (default) – Decimal sequence (1, 2, 3, …)

 TYPE = “I” – Uppercase Roman numerals (I, II, III, …)
 TYPE = “i” – Lowercase Roman numerals (i, ii, iii, …)
 TYPE = “A” – Uppercase alphabetical (A, B, C, …)
 TYPE = “a” – Lowercase alphabetical (a, b, c, …)

<ol type=“a”>
<li>Apples</li> a. Apples
<li>Bananas</li> b. Bananas
<li>Coconuts</li> c. Coconuts
</ol>

5
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

4.1 LISTs

4.1.2 Unordered List - <ul>

 Lists whose elements do not have to appear in a
certain order.

 An unordered list starts with the <ul> tag and finishes

with </ul> tag.

 Each list item written within the <li>...</li> tags.

 The list items are marked with bullets (typically small

black discs).

<ul>
<li>Apples</li> • Apples
<li>Bananas</li> • Bananas
<li>Coconuts</li> • Coconuts
</ul>
6
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

3
 1/5/2019

4.1 LISTs

4.1.2 Unordered List - <ul>

 To change the type of a an unordered list,

use TYPE attribute in <OL> opening tag;

 TYPE = “disc” (default) –

 TYPE = “circle” –
 TYPE = “square” –

<ul type=”square”>
<li>Apples</li>  Apples
<li>Bananas</li>  Bananas
<li>Coconuts</li>  Coconuts
</ul>

7
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

4.1 LISTs

4.1.3 Definition List - <dl>

 A definition list is a list of items, with a description of

each item.
 More complex than the other 2 lists due to their having 2
elements per list item

 <dl> tag defines a definition list.

 <dt> defines the item in the list.

 <dd> describes the item in the list.

8
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

4
 1/5/2019

4.1 LISTs

4.1.3 Definition List - <dl>

<dl>
<dt>Internet Explorer</dt>
<dd>Developed by Microsoft</dd>
<dt>Netscape</dt>
<dd>Developed by Netscape</dd>
</dl>

Internet Explorer
Developed by Microsoft
Netscape
Developed by Netscape

9
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

4.1 LISTs

4.1.4 Nested Lists

 Contained in another list element
 Lists can be nested of the same or different types
 Nesting the new list inside the original;
 Indents list one level and changes the bullet type to
reflect the Nesting
• Send us a letter, including:
<ul> 1. Your full name
<li>Send us a letter, including:</li> 2. Your order number
<ol> 3. You contact information
<li>Your full name</li> • Use the web form to send an email
<li>Your order number</li>
<li>Your contact information</li>
</ol>
<li> Use the web form to send an email </li>
</ul>

10
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

10

5
 1/5/2019

4.2 TABLEs

 Tables are used when you need to show "tabular data" i.e.
information that is logically presented in rows and columns.

 Building tables in HTML may at first seem complicated but if you

keep cool and watch your step, it is actually strictly logical - just
like everything else in HTML.

 All tags and text that apply to the table go inside

<TABLE>…</TABLE> tags

 TABLE Attributes;
 BORDER: lets you set the width of the table’s border in pixels
 ALIGN: specifies the horizontal alignment of the content in
the entire table, in a row or in a single cell. For example, left,
center or right.
 WIDTH: pixels (absolute) or a percentage
 VALIGN: specifies the vertical alignment of the content in a
cell. For example, top, middle or bottom.
11
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

11

4.2 TABLEs

 CAPTION element is inserted directly above the table

in the browser window
 Helps text-based browsers interpret table data

 TABLE Elements
 THEAD element
• Header info
• For example, titles of table and column headers
 TBODY element
• Used for formatting and grouping purposes

12
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

12

6
 1/5/2019

4.2 TABLEs

 A table is divided into rows

 Each row is divided into data cells

 <TR>…</TR>
 stands for "table row"
 starts and ends horizontal rows.

 <TH>…</TH>
 suitable for titles and column headings
 used in the header part of a table.
 all major browsers will display the text in the
<th> element as bold and centered.

13
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

13

4.2 TABLEs

 <TD>...</TD>
 stands for "table data".
 starts and ends each cell in the rows of the table.
 holds the content of a data cell.
 used in the body part of a table.
 aligned left by default.
 a <td> tag can contain
 text,
 links,
 images,
 lists,
 forms,
14
 other tables, etc.
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

14

7
 1/5/2019

4.2 TABLEs

 Possible to make some data cells larger than others

 Cells can be merged with the rowspan and colspan
attributes
 The values of these attributes specify the number of
rows or columns occupied by the cell
 Can be placed inside any data cell or table header cell
 Modified cells will cover the areas of other cells
• Reduces number of cells in that row or column

15
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

15

4.2 TABLEs

<html>
<body>

<h4>Horizontal Headers:</h4>
Horizontal Headers:
<table border="1">
<tr>
Name Telephone Telephone
<th>Name</th>
<th>Telephone</th> Bill Gates 555 77 854 555 77 855
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
16
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

16

8
 1/5/2019

4.2 TABLEs

<html>
<body>
<h4>Vertical Headers:</h4> Vertical Headers:
<table border="1">
<tr>
First Name: Bill Gates
<th>First Name:</th>
<td>Bill Gates</td> Telephone: 555 77 854
</tr> Telephone: 555 77 855
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
17
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

17

4.2 TABLEs

<table border="1">
<caption> TABLE 1 </caption>
<THEAD>
<tr>
<th>Header 1</th> TABLE 1
<th>Header 2</th> Header 1 Header 2
</tr>
</THEAD> row 1, cell 1 row 1, cell 2
<TBODY> row 2, cell 1 row 2, cell 2
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</TBODY>
</table>
18
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

18

9
 1/5/2019

4.2 TABLEs

<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr><th>Name</th>
<th colspan="2">Telephone</th></tr>
<tr> Cell that spans two columns:
<td>Bill Gates</td>
<td>555 77 854</td> Name Telephone
<td>555 77 855</td>
Bill Gates 555 77 854 555 77 855
</tr>
</table> Cell that spans two rows:
<h4>Cell that spans two rows:</h4> First Name: Bill Gates
<table border="1">
<tr><th>First Name:</th><td>Bill 555 77 854
Gates</td></tr> Telephone:
<tr><th rowspan="2">Telephone:</th>
555 77 855
<td>555 77 854</td>
</tr>
<tr><td>555 77 855</td></tr>
</table>
</body>
</html>
19
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

19

4.2 TABLEs

 COLGROUP element
 Used to group and format columns

 Each COL element

 In the <COLGROUP>…</COLGROUP> tag
 Can format any number of columns (specified by the
SPAN attribute)

 Background color or image

 Add to any row or cell
 Use BGCOLOR and BACKGROUND attributes

20
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

20

10
 1/5/2019

4.2 TABLEs

21
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

21

4.2 TABLEs

22
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

22

11
 1/5/2019

4.2 TABLEs

23
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

23

4.2 TABLEs

24
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

24

12
 1/5/2019

LISTs & TABLEs

END of CHAPTER 4

LOGO
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

25

13