Transcript Introducing HTML and XHTML

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
• 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
3
Defining a Table Structure

The first step to creating a table is to plan and
specify the table structure:




4
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 <table>, <tr>, and <td> 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
<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
HTML Structure of a Table
Beginning of the
table structure
Table cells
First row of six
in the table
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.
End of the table
structure
6
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



7
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
8
Result of Table Headings
as Displayed in the Browser
Table headings
appear bold and
centered over
their columns
9
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>




10
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
Placing the caption text within a pair of <b> tags causes the caption to
display as bold
Caption text
Caption will be
centered above
the table
11
Result of a Table Caption
A table with caption
Table caption
12
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
13
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

14
Tables with Different Borders Values
The effect on a table’s border when the border size is varied
15
Adding a 5-Pixel Border to a Table
Only the outside border is
affected by the border
attribute; the internal
gridlines are not affected
16
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>

17
value is the number of rows or columns that the cell spans in the
table
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
18
Example of Spanning Cells
This cell
spans two
columns and
two rows
This cell
spans three
rows
19
This cell
spans three
columns
A Table Structure with a
Row-Spanning Cell
Four table
cells in the
first row
Only three table
cells are
required for the
second and third
rows
HTML code
Resulting table
20
Adding Spanning Cells to a Table
These cells
span three
rows
21
Spanning cells
This cell
spans two
columns
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
22
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
23
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
24
Values of the align and valign Attributes
25
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
26
Results of a Table
with a Colored Background
27
Applying a Background Image
to a Table, Row, and Cell
parch.jpg
<tr background=“parch.jpg”>
<table background=“parch.jpg”>
28
<td background=“parch.jpg”>
Forms
Data Entry and data capture
29
Creating Web Forms

Control elements

Elements in a form in which a user can enter information







30
Input boxes
Selection lists
Option buttons
Check boxes
Group boxes
Text areas
Buttons
Parts of a Web Form
31
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>
32
Input tag

Used for a variety of input boxes

SYNTAX
<input type=“sometype” ……./>
33
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” />
34
TextArea


Used to display a tall and wide textbox
SYNTAX
<textarea cols=“number” rows=“number”>
content
</textarea>
35
Radio button types

Also called option buttons (buttons with circles)

SYNTAX
Football <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 ●
36
Baseball o
Tennis o
Checkbox button types

Also called option buttons (buttons with circles)

SYNTAX
Football <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 □
37
Baseball ■
Tennis □
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>
38
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
39
HTML 5

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 *
40
* - automatically validated