<TABLE>..

</TABLE> defines an HTML tables

<TR>..</TR> is used within the TABLE element to define
rows of the table.

<TD>..</TD> is used within the TR element to define
actual cells (columns) of the table.

<TH>..</TH> - Works just like TD except that textual
content is rendered in bold and center.
csc318/dec 2013/nuraina daud
csc318/dec 2013/nuraina daud
Codes
<table>
<tr><th>ITEM </th></tr>
<tr> <td> item 1</td></tr>
<tr> <td> item 2</td></tr>
</table>

Output
csc318/dec 2013/nuraina daud
Codes

<table border=2>
<tr><th>ITEM </th>
<th>CELL</th>
</tr>
<tr> <td> item 1</td>
<td> cell 1</td>
</tr>
<tr> <td> item 2</td>
<td> cell 2</td>
</tr>
</table>
Output


csc318/dec 2013/nuraina daud
bgcolor
Color of back ground
Ex: bgcolor="#99FF33
Bordercolor
Color of border
Ex: bordercolor=#000000
Border
The thickness of border
Ex: border=2
No border border=0

background/ bgimage
Image of back ground
Ex: background=cat.jpg
Align
Alignment of table
Center, left, right
Height
Height of table
In pixel or %
Ex: height=130,
height=50%

Width
Width of table
Pixel or %
Ex: width=350 , width=50%
Notes-Using % will cause the table to be resized based on the
resolution of monitor
Cellpadding
Space between cells
Ex: cellpadding=3
No space between cells cellpadding=0
Cellspacing
Space between border of cells and items
Ex: cellspacing=3
the number spaces

csc318/dec 2013/nuraina daud
cellpadding




Defines the empty
space around the cell
content
cellspacing




Defines the
empty space
between cells
Tables have two important attributes:
cell cell
cell cell
cell
cell
cell
cell
csc318/dec 2013/nuraina daud
bgcolor
Color of background
Ex: bgcolor=#99CC00
Background
Image of background
Ex: background=cat.jpg
Bordercolor
Color of border
Ex bordercolor=#000000

Width
Width of item
Pixel, %
Ex width=230, width=50%
Height
Height of item
Pixel, %
Ex height=230,
height=30%
csc318/dec 2013/nuraina daud
align
Horizontal align
Left,right,center
Ex: align=center
valign
Vertical align
Top, middle, baseline
Ex: valign=top

csc318/dec 2013/nuraina daud
Merge of 2 columns
<table>
<tr> <td colspan="2">
BANNER IS PLACED HERE
</td>
</tr>
<tr>
<td> MENU</td>
<td>CONTENTS</td>
</tr>
</table>
BANNER IS PLACED HERE
MENU CONTENTS
colspan
= 2
Merge of 3 rows
<table>
<tr>
<td rowspan=3> Column
1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</table>
csc318/dec 2013/nuraina daud
r
o
w
s
p
a
n

=

3

Using the table tag, create a webpage for your class
timetable.
Use different color for different codes (MATH).
Merge row cells for break time
Bold the text for day and time.

Save the page using the following name format
<your short name>page.htm
Ex: ainapage.htm, nikpage.htm
csc318/dec 2013/nuraina daud
Display more than one web pages at the same
time.
Must have at least 2 web pages
One for the frame
At least one page for the contents
Advantage
Fixed navigation bar can be provided
Disadvantage
Surfer cannot bookmark individual page
Web site of other people or organization is nested
inside the current webpage
Not all web browser support frame

<frameset rows="*" cols="15%,*"
framespacing="0" frameborder="no"
border="0">

<frame src="menu.htm name="mainFrame
title="menu" />

<frame src="intro.htm" name="rightFrame"
scrolling="No" noresize="noresize" />
</frameset>

BORDER:
Sets the border between frames.
The value determines the thickness in pixels.
BORDERCOLOR:
Sets the color of the border.
Takes color names or hexadecimal color codes as value.
Applicable only if FRAMEBORDER is set.
FRAMEBORDER:
A '1' or 'yes' value displays a border while '0' or 'no'
removes the border.
The BORDERCOLOR attribute work only if this
attribute is set to display a border.

FRAMESPACING:
Places some space between the edges of the frame and
its contents.
Value has to be specified in pixels and this attribute is
recognized only by Internet Explorer.
COLS and ROWS:
We've met COLS before. ROWS is similar and puts
frames in horizontals rows instead of vertical columns.
The values taken by these attributes can be a number
(which determines the size in pixels) or percentages or
wildcard *.

SRC:
required attribute
URL of a document to load in the frame.
BORDERCOLOR:
Defines color for the border.
Both, color names and hexadecimal color codes are accepted
values.
FRAMEBORDER:
Places a border. Values can be '1' or 'YES' that display a border or '0'
or 'NO' which prevent border display.
MARGINWIDTH:
Defines the amount of space in pixels between the left and right
hand sides of the frame and its contents.
MARGINHEIGHT:
Defines the amount of space in pixels between the top and bottom
edges of the frame and its contents.

NAME:
Specifies a name for the frame that can be used for easy
reference.
This is especially helpful when using scripting languages
such as JavaScript or VBScipt.
NORESIZE:
Frames can be sized by the user if a border is present.
By placing this attribute, you can prevent your visitors from
resizing frames. This attribute takes no values.
SCROLLING:
'YES' will display a scroll bar even though one is not
required.
'NO' will prevent any scroll bars and
'AUTO' lets the browser to decide if the frame needs a scroll
bar.

<FRAMESET ROWS="20%, *">
<FRAME SRC="topframe.html"
NAME="top">
<FRAMESET COLS="50%, *">
<FRAME SRC="leftbot.html"
NAME="left_bot">
<FRAME SRC="rightbot.html"
NAME="right_bot">
</FRAMESET>
</FRAMESET>
_blank: Indicates a new window.
_parent: Specifies the parent frame which contains
the source link.
_self: The new document is loaded in the same
frame.
_top: This indicates a new document window. It is a
good way to break out of frames and load the
document in the same window.
frame-name: You can use this to specify in which
frame the document should be loaded.
RESOURCE WINDOW: This loads the document in
a new browser window. This is same as _blank.

<A HREF="test.html" TARGET="_blank"> Loads
test.html in a new browser window</A>
<A HREF="test2.html" TARGET="_self"> Loads
test2.html in this window</A>
<A HREF="test2.html" TARGET=content"> Loads
test2.html in frame named content</A>

Form starts with tag
<form>
..
</form>

<input />
Use to input data from user
Non container element no close tag
TYPE attribute determines how the input process
is executed such as:
TYPE=text
TYPE=button
TYPE=reset
TYPE=checkbox
TYPE=radio

Input short text
<INPUT TYPE=text>
Attributes
Name : Name of field, important when more than one text
fields are declared in a form.
Size: specifies width (char) of the text field
Value: provide initial value

<INPUT type=password>
Works as text field except chars are secured.
Attributes:
Name : Name of field, important when more that one
text fields are declared in a form.
Size: specifies width (char) of the text field
Value: provide initial value
<html>
<head>
<title > Test Input element </title>
</head>
<body>
<h2> Input element </h2>
<form>
Name: <INPUT TYPE=text
VALUE="Enter
your Name" SIZE=15>
<br>
password: <INPUT TYPE=password
VALUE="Name" SIZE=15>
</form>
</body>
</html>

Example:
Choose gender :
Male <INPUT TYPE=radio CHECKED >
Female <INPUT TYPE=radio>
Attributes
Name: specifies name of objects / group
Checked: radio button will be selected when loaded.
Value: Assign a value to the radio button

Similar to radio button
Attributes
Name: specifies name of objects / group
Checked: box will be selected when loaded.
Value: Assign a value to the box

<html>
<head>
<title > Test Input element </title>
</head>
<body>
<h2> Input element </h2>
<form>
Choose gender : <br>
Male <INPUT TYPE=radio CHECKED >
Female <INPUT TYPE=radio>
<br><br>
Choose your favorite singer <br>
Siti Nurhaliza <input type="checkbox"
name="checkbox" id="checkbox" />
Mawi <input type="checkbox"
name="checkbox2" id="checkbox2" />
</form>
</body>
</html>
3 types
Generic : <INPUT type=button>
Allow user to defined event handler
Reset: <INPUT type=reset>
Elements of forms are revert to its original
Submit: <INPUT type=submit>
Clicking the button will call method submit()
Attributes Value: provide text on the button

<html>
<head>
<title > Test Input element </title>
</head>
<body>
<h2> Input element </h2>
<form>
<INPUT TYPE=button
VALUE="PRESS
TO SUBMIT INFO">
<br>
<INPUT TYPE=reset
VALUE="RESET">
</form>
</body>
</html>

Two tags are used; SELECT and OPTION
Attributes for SELECT tag
Name name of the menu
Size use for more than 1 menu
Attributes for OPTION tag
Value not visible on the web but will be
assigned to the value property of object
Selected option will automatically selected
when the page is loaded

<html>
<head>
<title > Test Input List Menu</title>
</head>
<body>
<h2> Input element </h2>
<form>
Select Diploma
<SELECT >
<OPTION VALUE="DCS"> DCS
<OPTION VALUE="DIA"> DIA
<OPTION VALUE="DPA"> DPA
</SELECT>
</form>
</body>
</html>

Input multiple lines of text
Attributes
Cols specifies the width of the text area in characters
Name name of the text area
Rows specifies the height of the text area

<html>
<head>
<title > Test Input text area</title>
</head>
<body>
<h2> Input element </h2>
<form>
Enter any comment or suggestion
<TEXTAREA cols=30, rows=3>
Enter
any comment or suggestion.
</TEXTAREA>
</form>
</body>
</html>

39
40

Test Your Knowledge

Using Text, Image,
List and Table

ALL THE
BEST!
You have created several web pages so far. Create a new
page name <yourname>menu.htm which contain links
to all the web pages.

Using frameset create a website from these webpages.
The menu may be placed horizontally or vertically.