Computing Concepts Advanced HTML: Tables and Forms

2 Contents  Tables  Forms

3 Why use Tables?  For tabular data Price list  For layout Used extensively for layout, not covered today

The Basic Table

5 Basic tables  Rows and cells  Borders  Headings  Alignment  Captions  Percentage widths  There is more to cover – not this year

Tables  Tables are defined with the tag  A table is divided into rows (with the tag), and each row is divided into data cells (with the tag)  The letters td stands for "table data," which is the content of a data cell  A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

7 Tables row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

8 Example

9 Table borders  If you do not specify a border attribute the table will be displayed without any borders  Sometimes useful, but most of the time, you want the borders to show, at least during design.  Table with a one pixel border  Table with a fat border  Table with no border

10 Table Headings  Headings in a table are defined with the tag. Heading Another Heading row 1, cell 1 row 1, cell 2 Centred and bold

11 Alignment Within Tables My Grades January February Computing Concepts A How many rows? How many columns?

12 Table Captions Years Level C Level I Level H

13 Empty Cells  Borders around empty table cells are missing  To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible: A B C Empty cell filled with a non breaking space

14 Percentage widths A B C D What will this look like in a browser?

15 Table Review 1  Creates a table  Creates a row  Creates a cell  Creates a header, centred and bold  Creates a caption

16 Table Review 2  Attributes width align border  There are more but not just yet

17 Draw this My Grades January February Computing Concepts A

18 Answer

19 Add Another Row My Grades January February Computing Concepts A Write the code to add another row to this table

20 Another Row My Grades January February Computing Concepts A PDP Pass Missed my tutor, Failed Tip: Copy and Paste a row and change the content

Forms

 A method of interaction between the user and a web site  HTML tags are used to build the interface and controls  CGI or Javascript technologies are used to process the form information

Forms  A form is an area that can contain form elements  Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form  A form is defined with the tag input elements

Form Structure  A form is made up of four separate elements:  Labels  Boxes for entering text  Option blocks check boxes radio buttons menus  Buttons

Form Elements  Text fields Text fields are used when you want the user to type letters, numbers, etc. in a form  Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices  Check Boxes Checkboxes are used when you want the user to select one or more options of a limited number of choices.

Processing the Form  A form is a means of collecting information  The information needs to be processed  A form uses the Action attribute to point to a script or program that will process the information  The Method attribute works in conjunction with the Action attribute to specify how information is sent to the server

Action Attribute & the Submit Button  When the user clicks on the "Submit" button, the content of the form is sent to the server.  The form's action attribute defines the name of the file to send the content to.  The file defined in the action attribute usually does something with the received input.

Form Example First name: Last name:

29 What next? Cascading Style Sheets HTML assignment, at least 4 linked pages A list 2 images Table Colour and formatting Links Comments To get a higher mark you have to research beyond the course handouts and can demonstrate a wider knowledge of the use of HTML and demonstrate its effective use in our web pages

30 Further Reading  Tutorial – highly recommended  Reference  Beginners book Mac Bride, Teach Yourself HTML Publishing on the World Wide Web (Teach Yourself) January 2003;Hodder Arnold Teach Yourself; ISBN: ,

31 Questions?