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

Tables Structural technique based on rows and columns 2

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Values of the align and valign Attributes 25

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

Results of a Table with a Colored Background 27

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

Forms Data Entry and data capture 29

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

Parts of a Web Form 31

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

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

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

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

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

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

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 ….. }

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

HTML 5 40 * - automatically validated  HTML5 has several new input types for forms. These new features allow better input control and validation.  – an 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 *