1. Client-Side Internet and Web Programming
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

2. 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

3. 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

4. 4.1.1 Ordered List - <ol>
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>
<li>Bananas</li>
<li>Coconuts</li>
</ol>
Apples
Bananas
Coconuts

5. 4.1.1 Ordered List - <ol>
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>
<li>Bananas</li>
<li>Coconuts</li>
</ol>
a. Apples
b. Bananas
c. Coconuts

6. 4.1.2 Unordered List - <ul>
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>
<li>Bananas</li>
<li>Coconuts</li>
</ul>
Apples
Bananas
Coconuts

7. 4.1.2 Unordered List - <ul>
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>
<li>Bananas</li>
<li>Coconuts</li>
</ul>
Apples
Bananas
Coconuts

8. 4.1.3 Definition List - <dl>
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.

9. 4.1.3 Definition List - <dl>
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

10. 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:
Your full name
Your order number
You contact information
Use the web form to send an
<ul>
<li>Send us a letter, including:</li>
<ol>
<li>Your full name</li>
<li>Your order number</li>
<li>Your contact information</li>
</ol>
<li> Use the web form to send an </li>
</ul>

11. 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.

12. 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

13. 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.

14. 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,
other tables, etc.

15. 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

16. 4.2 TABLEs <html> <body>
<h4>Horizontal Headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
</tr>
<td>Bill Gates</td>
<td> </td>
<td> </td>
</table>
</body>
</html>
Horizontal Headers:
Name
Telephone
Bill Gates

17. 4.2 TABLEs <html> <body>
<h4>Vertical Headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<th>Telephone:</th>
<td> </td>
<td> </td>
</table>
</body>
</html>
Vertical Headers:
First Name:
Bill Gates
Telephone:

18. 4.2 TABLEs <table border="1">
<caption> TABLE 1 </caption> <THEAD>
<tr> <th>Header 1</th> <th>Header 2</th> </tr>
</THEAD>
<TBODY> <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>
TABLE 1
Header 1
Header 2
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2

19. 4.2 TABLEs Name Telephone Bill Gates 555 77 854 555 77 855 First Name:
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr><th>Name</th>
<th colspan="2">Telephone</th></tr>
<tr>
<td>Bill Gates</td>
<td> </td>
<td> </td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<tr><th>First Name:</th><td>Bill Gates</td></tr>
<tr><th rowspan="2">Telephone:</th>
<tr><td> </td></tr>
</body>
</html>
Cell that spans two columns:
Name
Telephone
Bill Gates
Cell that spans two rows:
First Name:
Bill Gates
Telephone:

20. 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

21. 4.2 TABLEs

22. 4.2 TABLEs

23. 4.2 TABLEs

24. 4.2 TABLEs

25. Thank You ! END of CHAPTER 4 LISTs & TABLEs