Tables and
Forms in
HTML
Tables and
Forms in
HTML
Z
Scope of the
Lesson
• HTML Tables
• Nested Tables
• Cells Width
• Cell Spacing andZ Padding
• Column and Row Span
• HTML Forms
• Form Fields
• Form Controls
Objectives
• Discuss the basic coding of tables in
HTML.
•Understand the coding syntax of creating
tables and forms in ZHTML.
•Explain thoroughly the coding styles of
forms in HTML.
HTML
Tables
• Tables represent tabular data
• A table consists of one or several row
• Each row has one or more columns
• Tables comprised ofZseveral core tags:
<table></table>: begin / end table
<tr></tr>: create table row
<td></td>: create tabular data (cell)
HTML
Tables
• Start and end of a table
<table>…………….</table>
• Start and end of a row
<tr>………………Z........</tr>
• Start and end of a cell in a row
<td>…………………...</td>
Simple HTML Table -
Example
<table border="1" cellspacing="0"
cellpadding="5">
<tr>
<td><p>Name</p></td>
<td><p>Juan Dela Cruz</
p></td>
</tr>
<tr>
Z
<td><p>Age</p></td>
<td><p>21</p></td>
</tr>
<tr>
<td><p>Address</p></td>
<td><p>Manila, Philippines</
p></td>
</tr>
</table>
Complete HTML
•Tables Tables
rows split into three sections:,
heading, body and footer, each containing
table rows.
• Divides the table into semantic sections
Z
• Table sections:
• <thead> denotes table heading
•<tbody> denotes collection of table rows
that contain the very data
•<tfoot> denotes table footer but comes
before the <tbody> tag
Complete HTML Tables -
Example
<table> First comes the header
<thead
> <tr><td>Column heading</
td><td>Column heading</td></tr>
</thead> Then comes the footer
< t f oot> Z
<tr> < td>Column f ooter</
t d><td>Co lumn footer</td></tr>
</tfoot>
Last comes the body (data)
<tbody
> <tr><td>Cell 1</td><td>Cell 2</td></
tr>
<tr><td>Cell 3</td><td>Cell 4</td></
tr>
Complete HTML Tables -
Example
<table>
<thead>
<tr><td>Column heading</
td><td>Column heading</td></tr>
</thead>
< t f oot> Z
<tr> < td>Column f ooter</
t d><td>Co lumn footer</td></tr>
</tfoot>
<tbody>
<tr><td>Cell 1</td><td>Cell 2</
td></tr>
<tr><td>Cell 3</td><td>Cell 4</
td></tr>
</tbody>
Nested
•Table Data Tables
“cell” (<td>) can contain nested
tables (tables within tables):
<table border="1">
<tr>
<td>Contact:</td>
<td>
Z
<table border="1">
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
Nested
Tables
•Table Data “cell” (<td>) can contain nested
tables (tables within tables):
<table border="1">
<tr>
<td>Contact:</td>
<td> Z
<table border="1">
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
Cells Spacing and
Padding
• Tables have two important attributes:
cellspacing
cellpadding
cell cell cell cell
Z
cell cell cell
cell
Definesthe empty
space around the cell Defines the empty
contents space between
the cells
Cell Spacing and
Padding -
<html> Example
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15"
ce l l padding="0" bgcolor="red">
<tr><td bgcolor="yeZ
llow">First</td>
<td bgcolor="yellow">Second</
td></tr>
</table>
<br/>
<table cellspacing="0"
cel l p adding="10" bgcolor="yellow"
border="1">
<tr><td>First</td><td>Second</td></
tr>
Cell Spacing and
Padding -
<html>
Example
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15"
ce l l padding="0" bgcolor="red">
<tr><td bgcolor="yeZ
llow">First</td>
<td bgcolor="yellow">Second</
td></tr>
</table>
<br/>
<table cellspacing="0"
cel l p adding="10" bgcolor="yellow"
border="1">
<tr><td>First</td><td>Second</td></
tr>
Column and Row
Span
• Tables cells have two important attributes:
colspan rowspan
rowspan="2"
rowspan="1"
colspan="1" colspan="1"
Z cell[1,2]
cell[1,1] cell[1,1]
cell[1,2] cell[2,1]
cell[2,1] rowspan="1"
colspan="2"
Defines how Defines how
many columns many rows the
the cell occupies cell occupies
Column and Row Span -
Example
<html>
<head><title>Colspan and Rowspan</title></
head>
<body>
<br/>
<table cellspacing="0" cellpadding="10"
border="1">
<tr bgcolor="yellowZ "><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr bgcolor="#FFCC66"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr
bgcolor="#CCCCFF"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
</body>
Column
<html>
and Row Span -
Example
<head><title>Colspan
head>
and Rowspan</title></
br/>
<body>
< ta ble cing="0"
< c e l lspa cel l p adding="10"
b order="1"><t r "yellow"><td >Cel l [ 1 , 1 ] < /
bgcolor=n="2">CelZl [ t d >
< td colspa2 ,1]</td></tr>
<t r "#FFCC66"><t d>Ce
< td rowspa , 2 ] < /ltld[ >
1 , 2 ] < / d>
bgcolor=n="2">Cell[2 t
< td>Cell[3
<t r , 2 ] </ t d > < / d>Ce l l [ 1 , 3 ] < /
bgcolor=tr> t d>
"#CCCCFF"><
<td>Cell[2,3]</td></tr>
</table> C e ltl [ 1 , 1 ] Cell[2,1]
</body>
</html> Cell[1,2] Cell[3,2]
Cell[2,2]
Cell[1,3] Cell[2,3]
HTML
•Forms are the Forms
primary method for gathering
data from site visitors.
• Create a form block with
<form></form>
Z
• Example:
<form name="myForm"
method="post"
action="path/to/some-script.php">
...
</form>
HTML
•Forms are the Forms
primary method for gathering
data from site visitors.
•
<form></form>
Z
• Example:
<form name="myForm"
method="post"
action="path/to/some-script.php">
...
</form>
The "action" attribute tells where
the form data should be sent
Form
• Text fields areFields
single-line entry fields:
<input type="text" name="FirstName"
value="This i s a t e x t f i e l d " >
•Text areas can contain multiple lines of
text:
Z
<textarea name="Comments">This i s a multi-
l i n e t e x t field</textarea>
•Hidden fields contain data not shown to
user:
<input type="hidden"
name="Account" value="This is
a hidden t e x t f i e l d " >
Form Input
• Create aControls
checkbox:
<input type="checkbox"
name="fruit"
value="apple">
• Create a radio button:
type="radio"Z name="title"
value="Mr.">
<input
•Radio buttons can be grouped, allowing
only one to be selected from a group:
<input type="radio"
name="town" value="Sofia">
<input type="radio"
name="town" value="Varna">
Form Input
Controls
• Drop down menu list:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<optio n
value="Value
2">Female</option> Z
<optio n
value="Value
3">Other</option>
</select>
• Submit button:
<input t ype="submi t "
Form Input
Controls
• Reset Button: clears the form
<input type="reset" name="resetBtn"
value="Clear the form">
•Image Button: acts like submit but image is
displayed instead of button
Z
<input t ype="image"
src="submit . g i f " name="submitBtn"
•Ordinary alt="Submit">
Button: used for JavaScript, no
default action.
<input t ype="but t on"
v a lue=" s imple button">
Form Input
•PasswordControls
input: acts like normal text field
but hides the text with * signs
<input t ype="password"
name="pass" value="">
•Multiple selected field: code is like drop
down menu but displayZ s list of items to select
<selec t
name="products"
multiple="multiple">
<option value="Value 1"
sele cted="se lected">keyboard</o pt i o n
>
<option value="Value 2">mouse</
option>
HTML Forms -
Example
<form method="POST" action="apply-now.php">
<input name="subject" type="hidden" value="Class" / >
<p>Degree:
<select name="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="true">Master of
Business Administration</option>
</select> Z
</p>
<p>
F i r s t Name: <input type="text" name="firstname" / >
</p>
<p>
Last Name: <input type="text" name="lastname" / >
</p>
<p>
Student I D: <input type="password" name="studentid"
/>
</p>
HTML Forms -
<p> Example
Gender:
<input name="gender" type="radio" value="Male"
checked="true" / > Male
<input name="gender" type="radio" value="Female" / >
Female
</p>
<p>
E-mail: <input type="text" name="email" value="" / >
</p> Z
<p>
<textarea name="terms" cols="30" rows="4"
readonly="true">TERMS AND CONDITIONS
By clicking the Send Form button you agree to
submit
t h i s form.</textarea>
</p>
<p>
<input type="submit" name="button" value="Send
Form" / >
</p>
</form>
HTML Forms -
<p> Example
Gender:
<input name="gender" type="radio" value="Male"
checked="true" / > Male
<input name="gender" type="radio" value="Female" / >
Female
</p>
<p>
E-mail: <input type="text" name="email" value="" / >
</p> Z
<p>
<textarea name="terms" cols="30" rows="4"
readonly="true">TERMS AND CONDITIONS
By clicking the Send Form button you agree to
submit
t h i s form.</textarea>
</p>
<p>
<input type="submit" name="button" value="Send
Form" / >
</p>
</form>
Thank you!
Z
