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

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://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 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: Your full name Your order number You contact information Use the web form to send an email <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 email </li> </ul> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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>555 77 854</td> <td>555 77 855</td> </table> </body> </html> Horizontal Headers: Name Telephone Bill Gates 555 77 854 555 77 855 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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>555 77 854</td> <td>555 77 855</td> </table> </body> </html> Vertical Headers: First Name: Bill Gates Telephone: 555 77 854 555 77 855 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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>555 77 854</td> <td>555 77 855</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>555 77 855</td></tr> </body> </html> Cell that spans two columns: Name Telephone Bill Gates 555 77 854 555 77 855 Cell that spans two rows: First Name: Bill Gates Telephone: 555 77 854 555 77 855 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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

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

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

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

Thank You ! END of CHAPTER 4 LISTs & TABLEs http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229