1. 225 City Avenue, Suite 106 Bala Cynwyd, PA 19004 610.206.0101, phone 610.206.0102, fax www.learnquest.com presents… HTML Lists, Tables and Forms v2.0

2. Objectives This chapter will explain: Creating ordered and unordered lists Using tables to display data Using tables to enhance page layout Using forms to allow users to enter data on a web page How to integrate form data with a server-side process 2

3. Lists  HTML supports two tags for creating lists: Creates an unordered list. These lists are bulleted with a small graphic Creates an ordered list. These lists are bulleted with letters or numbers 3

4. Lists: The LI Tag  The Tag is used to indicate a single item in a list Blue Red Green The code at the left generates the following in a browser: 4

5. Lists: Attributes of the UL Tag  Most of the UL attributes are deprecated in favor of CSS. However they are: type – can be set to ‘disc’, ‘square’ or ‘circle’ compact – compacts the list to use less space. This attribute is not widely implemented 5

6. Lists: Attributes of the OL Tag  These attributes are also deprecated in favor of CSS but may still be used. They are: type - values are 1, a, A, I, and I start – a number at which to start compact – same as UL. See previous slide 6

7. Tables: Basic Syntax  HTML tables are constructed from three basic tags: - Marks the beginning and end of the table. - Marks the beginning and end of each row. - Marks the beginning and end of each cell within a row Each tag has attributes that are specific to it 7

8. Tables: A Simple Example John Doe Sally Brown The code to the left produces the table below 8

9. Tables: The TABLE Tag The attributes of the TABLE tag are: summary -- purpose/structure for speech output width -- table width border -- controls frame width around table frame -- which parts of frame to render rules -- rulings between rows and columns cellspacing -- spacing between cells cellpadding -- spacing within cells summary width border frame rules cellspacing cellpadding Of these, width, border, cellpadding, and cellspacing are the most commonly used 9

10. Tables: Width  The width attribute can be set to a number of pixels or to a percentage of the current screen width  To set to pixels:  To set to a percentage: 10

11. Tables: Border  The border attribute sets the size of the table (not cell) border John Doe John Doe 11

12. Tables: Cellpadding  Cellpadding sets the amount of area, in pixels, around the content of each cell <table border="1" cellpadding="0"> John Doe <table border="1" cellpadding="10"> John Doe 12

13. Tables: Cellspacing  Cellspacing sets the space BETWEEN cells <table border="1" cellspacing="0"> John Doe <table border="1" cellspacing="10"> John Doe 13

14. Tables: The TR Tag  The TR tag has two useful attributes: align – values are ‘left’, ‘right’, and ‘middle’. Default is ‘left’ valign – values are ‘top’, ‘bottom’, and ‘middle’. Default is ‘middle’ These two attributes affect the horizontal and vertical alignment for the data in all cells of the row 14

15. Tables: The TD Tag  Creates a cell in a row  Normally all rows will have the same number of cells; if not the table will have a slightly irregular look  The TD tag accepts the ALIGN and VALIGN attributes which set alignment for the individual cell  The TD tag also accepts the ROWSPAN and COLSPAN attributes which are explained in the following slides 15

16. Tables: TD: rowspan  The rowspan attribute causes a cell to stretch down into one or more rows below it. Cells in the rows below are pushed to the right. Hello World Zap Bam moved right Again moved 16

17. Tables: TD: colspan  colspan causes a cell to stretch into the cells to its right  Cells in the same row are pushed to the right Hello World Moved right Zap Bam Boom Again moved 17

18. Tables: Colors  The attribute bgcolor may be used to set a background color for the entire table, individual rows and individual cells. Most common colors can be named, e.g.  Colors can also be specified by a six digit hexadecimal number preceded by a hash mark. The first two digits set the amount of red in the color, the next two the amount of green, and the last two, the amount of blue. So: #FFOOOO – brightest possible red #999999 – medium gray #FFFFFF – white #000000 – black #FFCC00 – golden yellow  A handy color wheel for determining color values resides at: http://www.visibone.com/colorlab/ 18

19. Tables: TH Tag  The tag can be used to create headers for a table. Use it in place of anywhere that you want the text in the cell to be bold-faced and centered First Name Last Name John Doe 19

20. FORMs: Introduction  Although the web began as a way of displaying text and pictures, it has grown far beyond that. FORMs allow users to enter data that will be passed to a program or script on the web server for execution  Writing such programs is complex and beyond the scope of this course. Instead we will examine creating data entry fields in a web page 20

21. FORMS: The FORM Tag  The FORM tag marks the beginning and end of a group of data entry fields which will be sent to a server as a block  The FORM tag allows more than one FORM to exist on a page 21

22. FORMS: The FORM Tag  The FORM tag includes two important attributes: METHOD – values are ‘GET’ and ‘POST’ ACTION – value is the URL to which data will be sent  A typical FORM tag example: http://www.learnquest.com/cgi- bin/process.jsp 22

23. FORMs: The METHOD Attribute  The METHOD attribute specifies how data will be transferred to the server  The GET method can hold only a small amount of data. Data names and values are appended to the outgoing URL and can be seen in the browser’s address bar  The POST method places the data behind the scenes in the underlying http document. Much more data can be moved, and it is not visible in the address bar  POST is the preferred method for FORMs 23

24. FORMS: The INPUT Tag  The input tag is used for several input types. These are controlled by the TYPE attribute, which can take the following values: text – a text field for single line data entry radio – radio button. These are grouped by the "name" attribute checkbox – an "on/off" check box button – a button that needs some JavaScript to do anything submit – a button which initiates the send process reset – a button that will reset all fields in the form to the values they held when the page was first loaded 24

25. FORMS:INPUT: Text  Important attribute of this tag are:  NAME – should be unique SIZE – the width of the field in characters  MAXLENGTH - The maximum number of characters the user may enter  VALUE – an initial display value Example 25

26. FORMS: INPUT: Radio  Important attributes of the RADIO tag are: NAME – All radio buttons with the same name will be in one group VALUE – the value to be sent to the server if this radio button is selected when the form is submitted CHECKED – This attribute takes no value. If present, it causes this button to be selected when the page is first loaded  Example: Box Disc 26

27. FORMS: INPUT: Checkbox  Important attributes of the CHECKBOX tag are: NAME – should be unique VALUE – the value to be sent if the CHECKBOX is checked when the form is submitted CHECKED – like RADIO, if present causes the CHECKBOX to be checked when the page is first loaded  Example Happy? 27

28. FORMS: INPUT: Button  The two important attributes of the Button tag are VALUE and onClick VALUE specifies the label that will appear on the button onClick specifies what the button will do when it is clicked. This action is normally coded in JavaScript 28

29. FORMS: INPUT: Submit The submit button also takes a VALUE to describe its label but it has a predefined action: when it is clicked the form it is a part of is submitted 29

30. FORMS: INPUT: Reset  The RESET attribute sets all values in the FORM to the values they had when the page was first loaded 30

31. Summary  In this chapter we learned to work with lists, tables and forms 31

32. Any Questions? 32