1. HTML Tables and Forms Creating Web Pages with HTML CIS 133 Web Programming Concepts 1

2. Tables Structural technique based on rows and columns 2

3. Tables on the World Wide Web 3 A table allows you to organize information on a web page using HTML tags Useful when you want to arrange information into rows and columns Useful for newspaper style websites or for lists Can be complex with Images Borders Background colors Information spanning rows or columns

4. Defining a Table Structure 4  The first step to creating a table is to plan and specify the table structure:  the number of rows and columns  the location of column headings  the placement of a table caption  Once the table structure is in place, you can start entering data into the table

5. Using the,, and Tags 5 Tables consist of rows, columns and cells A row is a horizontal line of information A column is a vertical line of information A cell is the intersection of a row and a column The tags involved are tag that identifies the start and ending of the table (for table row) (for table data) tag indicates the presence of individual table cells

6. HTML Structure of a Table 6 Beginning of the table structure First row of six in the table End of the table structure Table cells You do not need to indent the tags or place them on separate lines, but you may find it easier to interpret your code if you do so. After the table structure is in place, you’re ready to add the text for each cell.

7. Creating Headings with the Tag 7  HTML provides the tag for table headings  Text formatted with the tag is centered within the cell and displayed in a boldface font  The tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text

8. Adding Table Headings to the Table 8 Text in cells formatted with the tag is bold and centered above each table column Row of table headings

9. Result of Table Headings as Displayed in the Browser 9 Table headings appear bold and centered over their columns

10. Creating a Table Caption 10  HTML allows you to specify a caption for a table  The syntax for creating a caption is: caption text  alignment indicates the caption placement  a value of “bottom” centers the caption below the table  a value of “top” or “center” centers the caption above the table  a value of “left” or “right” place the caption above the table to the left or right

11. Inserting a Table Caption 11 Caption will be centered above the table Caption text Placing the caption text within a pair of tags causes the caption to display as bold

12. Result of a Table Caption 12 Table caption A table with caption

13. Modifying the Appearance of a Table 13  You can modify the appearance of a table by adding:  gridlines  borders  background color  HTML also provides tags and attributes to control the placement and size of a table

14. Working with the Table Border 14  By default, browsers display tables without table borders  A table border can be added using the border attribute to the tag  The syntax for creating a table border is: …  value is the width of the border in pixels  The size attribute is optional; if you don’t specify a size, the browser creates a table border 1 pixel wide  Can also use CSS

15. Tables with Different Borders Values 15 The effect on a table’s border when the border size is varied

16. Adding a 5-Pixel Border to a Table 16 Only the outside border is affected by the border attribute; the internal gridlines are not affected

17. Spanning Rows and Columns 17  To merge several cells into one, you need to create a spanning cell  A spanning cell is a cell that occupies more than one row or column in a table  Spanning cells are created by inserting the rowspan and colspan attribute in a or tag.  The syntax for these attributes is: …  value is the number of rows or columns that the cell spans in the table

18. Spanning Rows and Columns 18  When a cell spans several rows or columns, it is important to adjust the number of cell tags used in the table row  When a cell spans several rows, the rows below the spanning cell must also be adjusted

19. Example of Spanning Cells 19 This cell spans two columns and two rows This cell spans three columns This cell spans three rows

20. A Table Structure with a Row-Spanning Cell 20 HTML code Resulting table Four table cells in the first row Only three table cells are required for the second and third rows

21. Adding Spanning Cells to a Table 21 This cell spans two columns These cells span three rows Spanning cells

22. Aligning a Table and its Contents 22  By default, cell text is placed in the middle of a cell, aligned with the cell’s left edge  You can specify a different horizontal alignment for a or element with: align=“position”  Or CSS

23. Aligning a Table on the Web Page 23  To align a table with the surrounding text, use the align attribute as follows: align=“alignment”  alignment equals “left”, “right”, or “center”  left or right alignment places the table on the margin of the Web page and wraps surrounding text to the side  center alignment places the table in the horizontal center of the page, but does not allow text to wrap around it

24. Aligning the Contents of a Table 24  By default, cell text is placed in the middle of the cell, aligned with the cell’s left edge  By using the align and valign attributes, you can specify the text’s horizontal and vertical placement  To align the text for a single column, you must apply the align attribute to every cell in that column  Or use CSS

25. Values of the align and valign Attributes 25

26. Setting a Background Color 26  Table elements support the bgcolor attribute.  To specify a background color for all of the cells in a table, all of the cells in a row, or for individual cells, by adding the bgcolor attribute to either the,,, or tags as follows:  color is either a color name or hexadecimal color value  Or use CSS

27. Results of a Table with a Colored Background 27

28. Applying a Background Image to a Table, Row, and Cell 28 parch.jpg

29. Forms Data Entry and data capture 29

30. Creating Web Forms 30  Control elements  Elements in a form in which a user can enter information  Input boxes  Selection lists  Option buttons  Check boxes  Group boxes  Text areas  Buttons

31. Parts of a Web Form 31

32. Form tag 32  Surrounds all form related tags (input, textarea, etc.)  SYNTAX other form elements go in between

33. Input tag 33  Used for a variety of input boxes  SYNTAX

34. Text boxes, Password boxes, Hidden boxes 34  By default, displays 20 characters of text on a single line  To change width, add width

35. TextArea 35  Used to display a tall and wide textbox  SYNTAX content

36. Radio button types 36  Also called option buttons (buttons with circles)  SYNTAX Football Baseball Tennis Choose a sport: Football ● Baseball o Tennis o

37. Checkbox button types 37  Also called option buttons (buttons with circles)  SYNTAX Football Baseball Tennis Choose a sport: Football □ Baseball ■ Tennis □

38. Button types 38  3 types  Submit – sends web page to server  Reset – clears all form fields  Push – performs activity on web page  SYNTAX functionx() { statements ….. }

39. HTML 5 39  HTML5 has several new input types for forms. These new features allow better input control and validation.  Color - used for input fields that should contain a color  Date - select a date  Datetime - select a date and time (with time zone)  datetime-local - select a date and time (no time zone)  Month - select a month and year  Time - select a time  Week - select a week and year

40. HTML 5 40 * - automatically validated  HTML5 has several new input types for forms. These new features allow better input control and validation.  Email – an email address. *  Number - input fields that should contain a numeric value – can restrict values  Range - used for input fields that should contain a value from a range of numbers  Search - used for search fields (a search field behaves like a regular text field)  Tel – a telephone number  url - used for input fields that should contain a URL address *