Eastern Mediterranean University School of Computing and Technology

Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC 229 Client-Side Internet and Web Programming LISTs & TABLEs CHAPTER 4 Prepared by: R. Kansoy LOGO

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/itec 229

4. 1 LISTs v HTML supports 3 types of lists: § Ordered Lists § Unordered Lists § Definition Lists § Nested Lists v Lists may be nested to obtain multiple hierarchy levels 3 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 1 LISTs 4. 1. 1 Ordered List - <ol> v Lists whose elements must appear in a certain order v Such lists usually have their items prefixed with a number or letter v An ordered list starts with the <ol> tag and finishes with </ol> tag. v Each list item writtin within the <li>. . . </li> tags. v By default, ordered lists use decimal sequence numbers (1, 2, 3, …) <ol> <li>Apples</li> <li>Bananas</li> <li>Coconuts</li> </ol> 1. 2. 3. Apples Bananas Coconuts 4 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 1 LISTs 4. 1. 1 Ordered List - <ol> v To change sequence type, use TYPE attribute in <OL> opening tag; § § § TYPE TYPE = “ 1” (default) – Decimal sequence (1, 2, 3, …) = “I” – Uppercase Roman numerals (I, III, …) = “i” – Lowercase Roman numerals (i, iii, …) = “A” – Uppercase alphabetical (A, B, C, …) = “a” – Lowercase alphabetical (a, b, c, …) <ol type=“a”> <li>Apples</li> <li>Bananas</li> <li>Coconuts</li> </ol> a. b. c. Apples Bananas Coconuts 5 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 1 LISTs 4. 1. 2 Unordered List - <ul> v Lists whose elements do not have to appear in a certain order. v An unordered list starts with the <ul> tag and finishes with </ul> tag. v Each list item written within the <li>. . . </li> tags. v 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 6 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 1 LISTs 4. 1. 2 Unordered List - <ul> v 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 7 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 1 LISTs 4. 1. 3 Definition List - <dl> v A definition list is a list of items, with a description of each item. v More complex than the other 2 lists due to their having 2 elements per list item v <dl> tag defines a definition list. v <dt> defines the item in the list. v <dd> describes the item in the list. 8 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 1 LISTs 4. 1. 3 Definition List - <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/itec 229

4. 1 LISTs 4. 1. 4 Nested Lists v Contained in another list element v Lists can be nested of the same or different types v 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: 1. Your full name 2. Your order number 3. 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> 10 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 2 TABLEs v Tables are used when you need to show "tabular data" i. e. information that is logically presented in rows and columns. v 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. v All tags and text that apply to the table go inside <TABLE>…</TABLE> tags v TABLE Attributes; 11 § 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/itec 229

4. 2 TABLEs v CAPTION element is inserted directly above the table in the browser window § Helps text-based browsers interpret table data v TABLE Elements § THEAD element • Header info • For example, titles of table and column headers § TBODY element • Used formatting and grouping purposes 12 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 2 TABLEs v A table is divided into rows v Each row is divided into data cells v <TR>…</TR> § stands for "table row" § starts and ends horizontal rows. v <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/itec 229

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

4. 2 TABLEs v Possible to make some data cells larger than others v 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/itec 229

4. 2 TABLEs <html> <body> <h 4>Horizontal Headers: </h 4> Horizontal Headers: <table border="1"> <tr> Name Telephone <th>Name</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/itec 229

4. 2 TABLEs 17 <html> <body> <h 4>Vertical Headers: </h 4> <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> Vertical Headers: First Name: Bill Gates Telephone: 555 77 854 Telephone: 555 77 855 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

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> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </TBODY> </table> TABLE 1 Header 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 18 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 2 TABLEs <html> <body> <h 4>Cell that spans two columns: </h 4> <table border="1"> <tr><th>Name</th> <th colspan="2">Telephone</th></tr> <td>Bill Gates</td> Name <td>555 77 854</td> <td>555 77 855</td> Bill Gates </tr> </table> <h 4>Cell that spans two rows: </h 4> <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> Cell that spans two columns: Telephone 555 77 854 555 77 855 Cell that spans two rows: First Name: Bill Gates Telephone: 555 77 854 555 77 855 19 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 2 TABLEs v COLGROUP element § Used to group and format columns v Each COL element § In the <COLGROUP>…</COLGROUP> tag § Can format any number of columns (specified by the SPAN attribute) v Background color or image § Add to any row or cell § Use BGCOLOR and BACKGROUND attributes 20 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 2 TABLEs 21 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 2 TABLEs 22 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 2 TABLEs 23 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

4. 2 TABLEs 24 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

LISTs & TABLEs END of CHAPTER 4 LOGO http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229