LISTs & TABLEs

LOGO

LISTs & TABLEsLISTs & TABLEs

CHAPTER 4

Eastern Mediterranean UniversitySchool of Computing and TechnologyDepartment of Information Technology

ITEC229ITEC229Client-Side Internet and Web ProgrammingClient-Side Internet and Web Programming

Prepared by: R. Kansoy

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

http://sct.emu.edu.tr/it/itec229http://sct.emu.edu.tr/it/itec2292

4.1 LISTs

http://sct.emu.edu.tr/it/itec2293

HTML supports 3 types of lists:

Ordered Lists

Unordered Lists

Definition Lists

Nested Lists

Lists may be nested to obtain multiple hierarchy levels

4.1 LISTs


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

<ol><ol> <li>Apples</li><li>Apples</li> <li>Bananas</li><li>Bananas</li> <li>Coconuts</li><li>Coconuts</li></ol></ol>

1.1. ApplesApples2.2. BananasBananas3.3. CoconutsCoconuts

4.1 LISTs

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, …)

5 http://sct.emu.edu.tr/it/itec229

<ol t<ol typeype=“=“aa”>”> <li>Apples</li><li>Apples</li> <li>Bananas</li><li>Bananas</li> <li>Coconuts</li><li>Coconuts</li></ol></ol>

<ol t<ol typeype=“=“aa”>”> <li>Apples</li><li>Apples</li> <li>Bananas</li><li>Bananas</li> <li>Coconuts</li><li>Coconuts</li></ol></ol>

a.a. ApplesApplesb.b. BananasBananasc.c. CoconutsCoconuts

4.1.1 4.1.1 Ordered List - <ol>Ordered List - <ol>

4.1 LISTs


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><ul> <li>Apples</li><li>Apples</li> <li>Bananas</li><li>Bananas</li> <li>Coconuts</li><li>Coconuts</li></ul></ul>

<ul><ul> <li>Apples</li><li>Apples</li> <li>Bananas</li><li>Bananas</li> <li>Coconuts</li><li>Coconuts</li></ul></ul>

• ApplesApples• BananasBananas• CoconutsCoconuts

4.1.2 Uno4.1.2 Unordered List - <rdered List - <uul>l>

4.1 LISTs


To change the type of a an unordered list, use TYPE attribute in <OL> opening tag;

TYPE = “disc” (default) –

TYPE = “circle” –

TYPE = “square” –

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

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

ApplesApples BananasBananas CoconutsCoconuts

4.1.2 Uno4.1.2 Unordered List - <rdered List - <uul>l>

4.1 LISTs


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.

4.1.3 Definition 4.1.3 Definition List - <List - <ddl>l>

4.1 LISTs


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

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

Internet ExplorerInternet ExplorerDeveloped by MicrosoftDeveloped by Microsoft

NetscapeNetscapeDeveloped by NetscapeDeveloped by Netscape

4.1.3 Definition 4.1.3 Definition List - <List - <ddl>l>

4.1 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

<ul><ul><li>Send us a letter, including:</li><li>Send us a letter, including:</li> <ol><ol> <li>Your full name</li><li>Your full name</li>

<li>Your order number</li><li>Your order number</li><li>Your contact <li>Your contact

information</li>information</li> </ol></ol><li> Use the web form to send an email<li> Use the web form to send an email </li></li></ul></ul>

<ul><ul><li>Send us a letter, including:</li><li>Send us a letter, including:</li> <ol><ol> <li>Your full name</li><li>Your full name</li>

<li>Your order number</li><li>Your order number</li><li>Your contact <li>Your contact

information</li>information</li> </ol></ol><li> Use the web form to send an email<li> Use the web form to send an email </li></li></ul></ul>

• Send us a letter, including:Send us a letter, including:1.1. Your full nameYour full name2.2. Your order numberYour order number3.3. You contact informationYou contact information

• Use the web form to send an emaiUse the web form to send an emaill

4.1.4 Nest4.1.4 Nested Listed Listss

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 pixelsALIGN: 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 percentageVALIGN: specifies the vertical alignment of the content in a cell. For example, top, middle or bottom.


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

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.

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.

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

4.2 TABLEs


<html><body>

<h4>Horizontal Headers:</h4><table border="1"><tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th></tr><tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table></body></html>

<html><body>

<h4>Horizontal Headers:</h4><table border="1"><tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th></tr><tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table></body></html>

Name Telephone Telephone

Bill Gates 555 77 854 555 77 855

Horizontal Headers:

4.2 TABLEs


<html><body><h4>Vertical Headers:</h4><table border="1"><tr> <th>First Name:</th> <td>Bill Gates</td></tr><tr> <th>Telephone:</th> <td>555 77 854</td></tr><tr> <th>Telephone:</th> <td>555 77 855</td></tr></table></body></html>

<html><body><h4>Vertical Headers:</h4><table border="1"><tr> <th>First Name:</th> <td>Bill Gates</td></tr><tr> <th>Telephone:</th> <td>555 77 854</td></tr><tr> <th>Telephone:</th> <td>555 77 855</td></tr></table></body></html>

First Name: Bill Gates

Telephone: 555 77 854

Telephone: 555 77 855

Vertical Headers:

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

Header 1 Header 2

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

TABLE 1

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> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table>

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

<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>555 77 854</td> <td>555 77 855</td></tr></table>

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

Name Telephone

Bill Gates 555 77 854 555 77 855

First Name:

Bill Gates

Telephone:555 77 854

555 77 855

Cell that spans two columns:

Cell that spans two rows:

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

4.2 TABLEs


LOGOhttp://sct.emu.edu.tr/it/itec229http://sct.emu.edu.tr/it/itec229

LISTs & TABLEsLISTs & TABLEs

END of CHAPTER 4

LISTs & TABLEs

Documents

Transcript of LISTs & TABLEs