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

HTML Tables and Forms

Creating Web Pages with HTMLCIS 133 Web Programming Concepts

1

2

Tables

Structural technique based on rows and columns

3

Tables on the World Wide Web• 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

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 <table>, <tr>, and <td> Tags• 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

<table> tag that identifies the start and ending of the table

<tr> (for table row) <td> (for table data)

tag indicates the presence of individual table cells

6

HTML Structure of a Table

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 <td> 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 <th> Tag HTML provides the <th> tag for table headings Text formatted with the <th> tag is centered within the

cell and displayed in a boldface font The <th> 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

Text in cells formatted with the <th> tag is bold and centered above each table column

Row of table headings

9

Result of Table Headingsas Displayed in the Browser

Table headings appear bold and

centered over their columns

10

Creating a Table Caption

HTML allows you to specify a caption for a table The syntax for creating a caption is: <caption align=“alignment”>caption text</caption>

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

Caption will be centered above the table

Caption text

Placing the caption text within a pair of <b> tags causes the caption to display as bold

12

Result of a Table Caption

Table caption

A table with caption

13

Modifying the Appearance of a Table 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 By default, browsers display tables without table borders A table border can be added using the border attribute to

the <table> tag The syntax for creating a table border is: <table border=“value”> … </table> 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

The effect on a table’s border when the border size is varied

16

Adding a 5-Pixel Border to a Table

Only the outside border is affected by the border attribute; the internal gridlines are not affected

17

Spanning Rows and Columns 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 <td> or <th> tag. The syntax for these attributes is: <td rowspan=“value” colspan=“value”> … </td> value is the number of rows or columns that the cell spans in the

table

18

Spanning Rows and Columns 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

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

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

This cell spans two columns

These cells span three

rows

Sp

ann

ing

cell

s

22

Aligning a Table and its Contents 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 <td> or <th> element with:

align=“position” Or CSS

23

Aligning a Table on the Web Page 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 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

26

Setting a Background Color 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 <table>, <tr>, <td>, or <th> tags as follows:<table bgcolor=“color”>

<tr bgcolor=“color”>

<td bgcolor=“color”>

<th bgcolor=“color”> color is either a color name or hexadecimal color value

Or use CSS

27

Results of a Table with a Colored Background

28

Applying a Background Imageto a Table, Row, and Cell

parch.jpg

<table background=“parch.jpg”>

<tr background=“parch.jpg”>

<td background=“parch.jpg”>

29

Forms

Data Entry and data capture

30

Creating Web Forms 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

32

Form tag Surrounds all form related tags (input, textarea, etc.) SYNTAX

<form id=“formname” name=“formname” action=“page2.html” method=“get” >

other form elements go in between

</form>

33

Input tag Used for a variety of input boxes

SYNTAX<input type=“sometype” ……./>

34

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

<input type=“text” size="value“ value=“show me in box” width=“30”/><input type=“hidden” value=“show me in box” /><input type=“password” />

35

TextArea Used to display a tall and wide textbox SYNTAX

<textarea cols=“number” rows=“number”> content</textarea>

36

Radio button types Also called option buttons (buttons with circles)

SYNTAXFootball <input type=“radio” name=“mydot” value=“F” checked/>Baseball <input type=“radio” name=“mydot” value=“B” />Tennis <input type=“radio” name=“mydot” value=“T” />

Choose a sport:

Football ● Baseball o Tennis o

37

Checkbox button types Also called option buttons (buttons with circles)

SYNTAXFootball <input type=“checkbox” name=“box1” value=“Football” />Baseball <input type=“checkbox” name=“box2” value=“B” checked/>Tennis <input type=“checkbox” name=“box3” value=“Tennis” />

Choose a sport:

Football □ Baseball Tennis □■

38

Button types 3 types

Submit – sends web page to server Reset – clears all form fields Push – performs activity on web page

SYNTAX<input type=“submit” name=“submitButton” value=“Submit Form” /><input type=“button” name=“pushButton” onclick=“javascript functionx();” /><input type=“reset” name=“reset” value=“Reset Form” />

<script>functionx(){ statements …..}

</script>

39

HTML 5 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. 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 *