LISTs & TABLEs

1. 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.2Tables http://sct.emu.edu.tr/it/itec229

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 http://sct.emu.edu.tr/it/itec229

4. 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://sct.emu.edu.tr/it/itec229

5. 4.1 LISTs 4.1.1 Ordered List - <ol> • To change sequence type, use TYPE attribute in <OL> openingtag; • 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://sct.emu.edu.tr/it/itec229

6. 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://sct.emu.edu.tr/it/itec229

7. 4.1 LISTs 4.1.2 Unordered List - <ul> • To change the type of a an unordered list, use TYPE attribute in <OL> openingtag; • TYPE = “disc” (default)– • TYPE = “circle”– • TYPE = “square”– <ultype=”square”> <li>Apples</li> <li>Bananas</li> <li>Coconuts</li> </ul> • Apples • Bananas • Coconuts http://sct.emu.edu.tr/it/itec229

8. 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://sct.emu.edu.tr/it/itec229

9. 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://sct.emu.edu.tr/it/itec229

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 theNesting • 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://sct.emu.edu.tr/it/itec229

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 borderinpixels • 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://sct.emu.edu.tr/it/itec229

12. 4.2 TABLEs • CAPTION element is inserted directly above the tablein thebrowser window • Helps text-based browsers interpret table data • TABLE Elements • THEAD element • Header info • For example, titles of table and column headers • TBODYelement • Used for formatting and grouping purposes http://sct.emu.edu.tr/it/itec229

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 andcolumn 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://sct.emu.edu.tr/it/itec229

14. 4.2 TABLEs • <TD>...</TD> • stands for "table data". • starts and ends each cell in the rows of thetable. • holds the content of a data cell. • used in the bodypart of a table. • alignedleft by default. • a<td> tag can contain • text, • links, • images, • lists, • forms, • other tables, etc. http://sct.emu.edu.tr/it/itec229

15. 4.2 TABLEs • Possible to make some data cells larger than others • Cells can be merged with the rowspanandcolspan 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://sct.emu.edu.tr/it/itec229

16. 4.2 TABLEs <html> <body> <h4>HorizontalHeaders:</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> Horizontal Headers: http://sct.emu.edu.tr/it/itec229

17. 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> VerticalHeaders: http://sct.emu.edu.tr/it/itec229

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 http://sct.emu.edu.tr/it/itec229

19. 4.2 TABLEs <html> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr><th>Name</th> <thcolspan="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><throwspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr><td>555 77 855</td></tr> </table> </body> </html> Cell that spans two columns: Cell that spans two rows: http://sct.emu.edu.tr/it/itec229

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 theSPAN attribute) • Background color or image • Add to any row or cell • Use BGCOLOR and BACKGROUND attributes http://sct.emu.edu.tr/it/itec229

21. 4.2 TABLEs http://sct.emu.edu.tr/it/itec229

22. 4.2 TABLEs http://sct.emu.edu.tr/it/itec229

23. 4.2 TABLEs http://sct.emu.edu.tr/it/itec229

24. 4.2 TABLEs http://sct.emu.edu.tr/it/itec229

25. Thank You ! LISTs & TABLEs http://sct.emu.edu.tr/it/itec229 END of CHAPTER 4