2
Table
Tables are commonly used
on Web pages in two ways:
◦ To organize information
◦ To format the layout of an
entire Web page
XHTML
Using Tables
Composed of rows and columns – similar
to a spreadsheet.
4
XHTML
Table Elements
<table> Element
Contains the table
Common attributes: border, width, align
<tr> Element
Contains a table row
<td> Element
Contains a table cell
<caption> Element
◦ Configures a description of the table
5
<table border="1">
<caption>Courses List</caption>
XHTML
<tr>
<td>Course</td>
Table Example
<td>Code</td>
</tr>
<tr>
<td>Web</td>
<td>311</td>
</tr>
<tr>
<td>Java</td>
<td>112</td>
</tr>
<tr>
<td>Network</td>
<td>221</td>
</tr>
</table>
6
<table border="1">
<caption>Courses List</caption>
XHTML
<tr>
<th>Course</th>
Table Example 2
<th>Code</th>
</tr>
Using the <th> Element
<tr>
<td>Web</td>
<td>311</td>
</tr>
<tr>
<td>Java</td>
<td>112</td>
</tr>
<tr>
<td>Network</td>
<td>221</td>
</tr>
</table>
7
XHTML
Common Table Attributes
border
cellpadding
cellspacing
summary
width
◦ Percentage or pixels?
8
XHTML
Common Table Cell Attributes
align
colspan
rowspan
valign
9
XHTML
colspan Attribute
<table border="1">
<tr>
<td colspan=“2”>Books
List</td>
</tr>
<tr>
<td>Web</td>
<td>311</td>
</tr>
<tr>
<td>Network</td>
<td>221</td>
</tr>
</table>
10
<table border="1" width="75%"
Table Row
summary="This table lists my
educational background.">
<thead>
<tr>
<th>School Attended</th>
Groups
<th>Years</th>
</tr>
</thead>
<tbody> <thead>
<tr> table head rows
<td>Schaumburg High School</td>
<td>2005 - 2009</td> <tbody >
</tr>
<tr> table body rows
<tfoot>
<td>Harper College</td>
<td>2009 - 2010</td>
</tr> table footer rows
</tbody>
</table>
Checkpoint 1
12
XHTML FORMS
Overview of Forms
Forms are used all over the Web to
◦ Accept information
◦ Provide interactivity
Types of forms:
◦ Search form, Order form, Newsletter sign-up form,
Survey form, Add to Cart form, and so on…
14
Two Components of Using Forms
15
XHTML Using Forms
<form> tag
◦ Contains the form elements on a web page
◦ Container tag
<input /> tag
◦ Configures a variety of form elements including text boxes, radio
buttons, check boxes, and buttons
◦ Stand alone tag
<textarea> tag
◦ Configures a scrolling text box
◦ Container tag
<select> tag
◦ Configures a select box (drop down list)
◦ Container tag
<option> tag
◦ Configures an option in the select box
◦ Container tag
16
Sample Form XHTML
<form>
Email: <input type="text" name="CustEmail" /><br />
<input type="submit" />
</form>
17
XHTML <form> element
The form tag attributes:
◦ action
Specifies the server-side program or script that will
process your form data
◦ method
get – default value,
form data passed in URL
post – more secure,
form data passed in HTTP Body
◦ name or id
Identifies the form
18
XHTML<input /> Text box
Accepts text information
Attributes:
◦ type=―text‖
◦ name
◦ id
◦ size
◦ maxlength
◦ value
19
XHTML<input /> Password box
Accepts text information that needs to
be hidden as it is entered
Attributes:
◦ type=―password‖
◦ name
◦ id
◦ size
◦ maxlength
◦ value
20
XHTML<input /> Check box
Allows the user to select one or more
of a group of predetermined items
Attributes: <form>
<input type="checkbox"
◦ type=―checkbox‖
name="vehicle" value="Bike" /> I
◦ name have a bike<br />
◦ id <input type="checkbox"
◦ checked name="vehicle" value="Car" /> I
◦ value have a car
</form>
21
XHTML<input /> Radio Button
Allows the user to select exactly one from a group
of predetermined items
Attributes: <form>
◦ type=―radio‖ <input type="radio" name="sex"
◦ name value="male" /> Male<br />
◦ id <input type="radio" name="sex"
◦ checked value="female" /> Female
◦ value
</form>
22
XHTML<textarea> Scrolling Text Box
<form>
Attributes:
<label> Comments: </label><br />
◦ name <textarea rows="2" cols="20">
◦ id Enter your comments!
◦ cols </textarea>
◦ rows </form>
23
XHTML<select> Select List
Configures a select list (along with <option> tags)
Also known as: Select Box, Drop-Down List,
Drop-Down Box, and Option Box.
Allows the user to select one or more items
from a list of predetermined choices.
Attributes: <select>
◦ name <option>Volvo</option>
◦ id <option>Saab</option>
◦ size <option>Mercedes</option>
◦ multiple <option>Audi</option>
</select>
24
XHTML<option>
Options in a Select List
Configures the options in a Select List
Attributes:
◦ value <select multiple="multiple" size="2">
◦ selected <option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option
value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Selected
25
XHTML<input /> Submit Button
Attributes:
◦ type=―submit‖
◦ name
◦ id
◦ value
26
XHTML<input /> Reset Button
Attributes:
◦ type=―reset‖
◦ name
◦ id
◦ value
27
Checkpoint 2
28
XHTML Form Enhancements
<label> Tag
Associates a text label with a form control
Two Different Formats:
<label>Email: <input type="text" name="CustEmail"
id ="CustEmail" /></label>
Or
<label for="email">Email: </label>
<input type="text" name="CustEmail" id= "email" />
29
XHTML Form Enhancements
<fieldset> & <legend> Tags
The Fieldset Element
◦ Container tag
◦ Creates a visual group of form elements on a web page
The Legend Element
◦ Container tag
◦ Creates a text label within the fieldset
<fieldset><legend>Customer Information</legend>
<label>Name:
<input type="text" name="CustName"
id="CustName" size="30" /></label><br />
<label>Email:
<input type="text" name="CustEmail"
id="CustEmail" /></label>
</fieldset>
30
XHTML Form Enhancements
<fieldset> & <legend> Tags
Without
XHTML Form Enhancements
tabindex attribute
Attribute that can be used on form controls and
anchor tags
Modifies the default tab order
Assign a numeric value
32
XHTML Form Enhancements
accesskey attribute
Attribute that can be used on form controls
and anchor tags
Create a ―hot-key‖ combination to place the
focus on the component
33
Server-Side
Processing
34
Server-Side Scripting
One of many technologies in which a
server-side script is embedded within a
Web page document saved with a file
extension such as:
◦ .php (PHP)
◦ .asp (Active Server Pages)
◦ .cfm (Adobe ColdFusion)
◦ .jsp (Sun JavaServer Pages)
◦ .aspx (ASP.Net).
36
Common Uses of
Server-Side Scripting
Search a database
Place an order at an online store
Send a web page to a friend
Subscribe to a newsletter
37
Summary
This chapter introduced the XHTML
techniques used to create and configure
tables.
You learned about how to configure form
elements.
You also learned how to configure a form
to access server-side processing.
38